Angular 17
Neue Features optimal nutzen und Bestandsprojekte effizient migrieren
Server-Side Rendering
No SSR SSR
Slide 1
Slide 1 text
Angular 17
Neue Features optimal nutzen und
Bestandsprojekte effizient migrieren
Christian Liebel
@christianliebel
Consultant
Slide 2
Slide 2 text
Hello, it’s me.
Angular 17
Neue Features optimal nutzen und Bestandsprojekte effizient migrieren
Christian Liebel
X:
@christianliebel
Email:
christian.liebel
@thinktecture.com
Angular & PWA
Slides:
thinktecture.com
/christian-liebel
Slide 3
Slide 3 text
Angular 17
Neue Features optimal nutzen und Bestandsprojekte effizient migrieren
“Angular Renaissance”
Slide 4
Slide 4 text
Angular 16+
– Signals, Signal-based inputs (…and a Zone.js-less future)
– Standalone Components/APIs
– Built-in Control Flow/Deferrable Views
– New build tools: esbuild & Vite
– Server-Side Rendering/Hydration
Goals: Streamline & modernize APIs & improve performance
Angular 17
Neue Features optimal nutzen und Bestandsprojekte effizient migrieren
“Angular Renaissance”
Slide 5
Slide 5 text
Angular 16+
But: The shape of Angular apps changes significantly.
You can tell the difference between an Angular 2 and an Angular 17 app.
No worries: All new features are backwards compatible & interoperable.
Not another AngularJS scenario.
Still: You should migrate your applications as soon as possible.
In this session, we talk about why, when and how you should migrate.
Angular 17
Neue Features optimal nutzen und Bestandsprojekte effizient migrieren
“Angular Renaissance”
Slide 6
Slide 6 text
Signals
Standalone
Components and
APIs
Built-in Control
Flow and
Deferrable Views
Server-Side
Rendering,
esbuild and Vite
Angular 17
Neue Features optimal nutzen und Bestandsprojekte effizient migrieren
Agenda
Slide 7
Slide 7 text
Overview
– A signal is a reactive primitive: a wrapper around a
value that notifies interested consumers when that
value changes
– The signal concept is a lot simpler than RxJS
(= streamlined APIs)
– Signals form the basis for a new, more effective
change detection system in Angular that could
eventually replace Zone.js
(= performance improvement)
– Works great with ChangeDetectionStrategy.OnPush
Angular 17
Neue Features optimal nutzen und Bestandsprojekte effizient migrieren
Signals
Slide 8
Slide 8 text
OLD Zone.js-based Change Detection
Angular 17
Neue Features optimal nutzen und Bestandsprojekte effizient migrieren
Signals
current (global) zone
NgZone
Angular boot
onclick
setTimeout
Detect changes
Detect changes
CHANGE
{{ binding }}
{{ binding }} {{ binding }}
{{ binding }}
Slide 9
Slide 9 text
POSSIBLE Future Change Detection
Angular 17
Neue Features optimal nutzen und Bestandsprojekte effizient migrieren
Signals
CHANGE
{{ binding }}
{{ signal() }} {{ binding }}
{{ binding }}
Slide 10
Slide 10 text
API
– Writable Signals
const count = signal(0);
count.set(3);
– Computed Signals
const doubleCount = computed(() => count() * 2);
– Effects
effect(() => console.log(`The count is: ${doubleCount()}`));
Angular 17
Neue Features optimal nutzen und Bestandsprojekte effizient migrieren
Signals
https://angular.dev/guide/signals
Slide 11
Slide 11 text
RxJS Interop
– Convert observable to signal
counter$ = interval(1000);
counter = toSignal(this.counter$, {initialValue: 0});
– Convert signal to observable
counter = signal(0);
counter$ = toObservable(this.counter);
– takeUntilDestroyed()
Angular 17
Neue Features optimal nutzen und Bestandsprojekte effizient migrieren
Signals
https://angular.dev/guide/signals/rxjs-interop
Slide 12
Slide 12 text
Signal-based Components (since Angular 17.1)
@Component({
selector: "counter",
standalone: true,
template: "{{ value }}",
})
export class CounterComponent {
@Input() value = 0;
@Input({ required: true })
value2!: number;
}
@Component({
selector: "counter",
standalone: true,
template: "{{ value() }}",
})
export class CounterComponent {
value = input(0);
value2
= input.required();
}
Angular 17
Neue Features optimal nutzen und Bestandsprojekte effizient migrieren
Signals
https://blog.angular-university.io/angular-signal-inputs/
OLD NEW
Slide 13
Slide 13 text
Signal-based Components (since Angular 17.2)
@Component({
selector: "counter",
standalone: true,
template: "{{ value }}",
})
export class CounterComponent {
@Input({ required: true })
value = 0;
@Output() valueChange
= new EventEmitter();
}
@Component({
selector: "counter",
standalone: true,
template: "{{ value() }}",
})
export class CounterComponent {
value =
model.required();
}
Angular 17
Neue Features optimal nutzen und Bestandsprojekte effizient migrieren
Signals
https://blog.angular-university.io/angular-signal-inputs/
OLD NEW
Slide 14
Slide 14 text
Signal-based Components (since Angular 17.3)
@Component({
selector: "counter",
standalone: true,
template: "",
})
export class CounterComponent {
@Output() count
= new EventEmitter();
}
@Component({
selector: "counter",
standalone: true,
template: "",
})
export class CounterComponent {
count = output();
}
Angular 17
Neue Features optimal nutzen und Bestandsprojekte effizient migrieren
Signals
OLD NEW
Slide 15
Slide 15 text
Signal-based Components (since Angular 17.2)
@ViewChild(MyComponent)
a!: MyComponent;
@ViewChilren(MyComponent)
b!: QueryList;
@ContentChild(MyComponent)
c!: MyComponent;
@ContentChildren(MyComponent)
d!: QueryList;
a = viewChild(MyComponent);
b = viewChildren(MyComponent);
c = contentChild(MyComponent);
d = contentChildren(MyComponent);
Angular 17
Neue Features optimal nutzen und Bestandsprojekte effizient migrieren
Signals
OLD NEW
Slide 16
Slide 16 text
NgRx Signal Store
– Reactive state management solution based on Signals
– Simple and lightweight
– Package: @ngrx/signals
– Replacement for component store and entity adapter
– Function-based, but can be class-based
Angular 17
Neue Features optimal nutzen und Bestandsprojekte effizient migrieren
Signals
https://ngrx.io/guide/signals
Slide 17
Slide 17 text
Maturity
– effect(), RxJS interop and signal-based components
are still in developer preview (as of Angular 17.3.7)
– @ngrx/signals is still in developer preview
(as of version 17.1.1)
Angular 17
Neue Features optimal nutzen und Bestandsprojekte effizient migrieren
Signals
Slide 18
Slide 18 text
Migration Strategy
– Why? You should migrate to Signals, as they improve performance
and API simplicity.
– When? You should write new components based on Signals and
migrate older components if time permits.
Currently, there’s no hurry: RxJS and the traditional ways in Angular
won’t go away anytime soon, and some Signal APIs and frameworks
are still in developer preview.
– How? Manual effort required, no automated migration available.
(Could probably be handled by GenAI.)
Angular 17
Neue Features optimal nutzen und Bestandsprojekte effizient migrieren
Signals
Slide 19
Slide 19 text
Signals
Standalone
Components and
APIs
Built-in Control
Flow and
Deferrable Views
Server-Side
Rendering,
esbuild and Vite
Angular 17
Neue Features optimal nutzen und Bestandsprojekte effizient migrieren
Agenda
Slide 20
Slide 20 text
Angular 17
Neue Features optimal nutzen und Bestandsprojekte effizient migrieren
NgModules
UI-related
components
(BookModule)
UI-related
components
(TodoModule)
Logic/
infrastructure
components
(BookModule)
Logic/
infrastructure
components
(TodoModule)
Components
Directives
Pipes
High-Level
Services
Low-Level
Services
Slide 21
Slide 21 text
@NgModule({
declarations: [AppComponent, HomeComponent, MenuComponent],
imports: [BrowserModule],
providers: [DataService],
bootstrap: [AppComponent],
})
export class AppModule {
}
Angular 17
Neue Features optimal nutzen und Bestandsprojekte effizient migrieren
NgModules
Slide 22
Slide 22 text
The problem with modules…
@Component({
selector: 'app-my',
template: `{{ item.name | myPipe }}`,
})
export class MyComponent {
@Input({ required: true }) items!: Item[];
}
Question: Where does appTooltip and myPipe come from?
Angular 17
Neue Features optimal nutzen und Bestandsprojekte effizient migrieren
NgModules
OLD
Slide 23
Slide 23 text
@Component({
selector: 'app-my',
template: `{{ item.name | myPipe }}`,
standalone: true,
imports: [NgFor, TooltipDirective, MyPipe]
})
export class MyComponent {
@Input({ required: true }) items!: Item[];
}
Angular 17
Neue Features optimal nutzen und Bestandsprojekte effizient migrieren
Standalone Components
NEW
Slide 24
Slide 24 text
Lazy Loading
export const ROUTES: Route[] = [
{
path: 'admin',
loadComponent: () => import('./admin/panel.component')
.then(mod => mod.AdminPanelComponent),
providers: [MyService]
},
// …
];
Angular 17
Neue Features optimal nutzen und Bestandsprojekte effizient migrieren
Standalone Components
https://angular.io/guide/standalone-components#lazy-loading-a-standalone-component
Slide 25
Slide 25 text
Lazy Loading Multiple Routes
export const ROUTES: Route[] = [
{path: 'admin', loadChildren: () => import('./admin/routes')},
// …
];
export default [
{path: 'home', component: AdminHomeComponent},
{path: 'users', component: AdminUsersComponent},
// …
] as Route[];
Angular 17
Neue Features optimal nutzen und Bestandsprojekte effizient migrieren
Standalone Components
https://angular.io/guide/standalone-components#lazy-loading-many-routes-at-once
Slide 26
Slide 26 text
“Modules”
export const CAROUSEL_DIRECTIVES = [
ImageCarouselComponent,
ImageSlideComponent
] as const;
@Component({
standalone: true,
imports: [CAROUSEL_DIRECTIVES]
})
export class MyComponent {}
Angular 17
Neue Features optimal nutzen und Bestandsprojekte effizient migrieren
Standalone Components
https://angular.dev/guide/standalone-components#standalone-components-for-library-authors
Slide 27
Slide 27 text
Interoperability with NgModules
– Standalone components/directives/pipes can’t be part of NgModules
– When used in non-standalone components, it needs to be imported
@NgModule({
declarations: [MyStandaloneComponent],
imports: [MyStandaloneComponent],
})
export const MyModule {}
Angular 17
Neue Features optimal nutzen und Bestandsprojekte effizient migrieren
Standalone Components
Slide 28
Slide 28 text
Interoperability with NgModules
@Component({
selector: 'app-my',
template: `{{ item.name | myPipe }}`,
standalone: true,
imports: [CommonModule, TooltipModule, PipeModule]
})
export class MyComponent {
@Input({ required: true }) items!: Item[];
}
Angular 17
Neue Features optimal nutzen und Bestandsprojekte effizient migrieren
Standalone Components
Slide 29
Slide 29 text
Web Components
Streamlined standalone API simplifies
the creation of web components from
Angular components
Web components can be used in any
context (not only Angular apps)
⚠ Problem: Zone.js is still used for
change detection, should become less
relevant in the future with signals
Angular 17
Neue Features optimal nutzen und Bestandsprojekte effizient migrieren
Standalone Components
Slide 30
Slide 30 text
Angular Elements
import { createCustomElement } from '@angular/elements';
import { createApplication } from '@angular/platform-browser';
import { MyComponent } from './app/my/my.component';
const {injector} = await createApplication({
providers: [/* add providers */]
});
const myElement = createCustomElement(MyComponent, {
injector
});
customElements.define('my-element', myElement);
Angular 17
Neue Features optimal nutzen und Bestandsprojekte effizient migrieren
Standalone Components
Slide 31
Slide 31 text
Angular 17
Neue Features optimal nutzen und Bestandsprojekte effizient migrieren
Slide 32
Slide 32 text
Folder Structure
Modules
main.ts
app/app-routing.module.ts
app/app.module.ts
Standalone Apps
main.ts
app/app.routes.ts
app/app.config.ts
Angular 17
Neue Features optimal nutzen und Bestandsprojekte effizient migrieren
Standalone Applications
OLD NEW
Slide 33
Slide 33 text
Bootstrap API
Modules
import { platformBrowser } from
'@angular/platform-browser';
import { AppModule } from
'./app/app.module';
platformBrowser()
.bootstrapModule(AppModule)
.catch(e => console.error(e));
Standalone Apps
import { bootstrapApplication }
from '@angular/platform-browser';
import { AppComponent } from
'./app/app.component';
bootstrapApplication(AppComponent)
.catch(e => console.error(e));
Angular 17
Neue Features optimal nutzen und Bestandsprojekte effizient migrieren
Standalone Applications
OLD NEW
Slide 34
Slide 34 text
Providers
Modules
@NgModule({
imports: [
BrowserModule,
RouterModule.forRoot(routes),
HttpClientModule
]
})
export class AppModule { }
Standalone Apps
export const appConfig:
ApplicationConfig = {
providers: [
provideRouter(routes),
provideHttpClient(),
// fallback for modules:
importProvidersFrom
(TranslateModule)
]
};
Angular 17
Neue Features optimal nutzen und Bestandsprojekte effizient migrieren
Standalone Applications
OLD NEW
Slide 35
Slide 35 text
Migration Strategy
– Maturity: Standalone components and APIs are fully stable.
– Why? Standalone components and APIs improve developer experience
and prepare your codebase for upcoming Angular features.
– When? New projects should be started using standalone APIs,
new components should be added as standalone components
(default since version 17), NgModules and standalone are interoperable.
– Existing projects should be migrated as soon as possible,
new parts should be added using standalone components/APIs.
– ⚠ Some ng add/ng update integrations may not work with standalone
workspaces.
Angular 17
Neue Features optimal nutzen und Bestandsprojekte effizient migrieren
Standalone Components & APIs
Slide 36
Slide 36 text
How?
– Migration can be partly automated
– Manual changes will be required
– Effort for mid-size projects: 4–8 hours
– No functional difference
– ⚠ Changes to the project setup may lead to the migration to break
– ⚠ Replacements in unit tests may be incorrect
– ⚠ Migration does not introduce the new folder structure (app config)
Angular 17
Neue Features optimal nutzen und Bestandsprojekte effizient migrieren
Standalone Components & APIs
Slide 37
Slide 37 text
Migration
ng g @angular/core:standalone
Angular 17
Neue Features optimal nutzen und Bestandsprojekte effizient migrieren
Standalone Components & APIs
Slide 38
Slide 38 text
Migration
1. Run ng g @angular/core:standalone and select "Convert all
components, directives and pipes to standalone"
2. Run ng g @angular/core:standalone and select "Remove
unnecessary NgModule classes"
3. Run ng g @angular/core:standalone and select "Bootstrap the
project using standalone APIs"
4. Run any linting and formatting checks, fix any failures, and commit
the result
Angular 17
Neue Features optimal nutzen und Bestandsprojekte effizient migrieren
Standalone Components & APIs
https://angular.io/guide/standalone-migration#migrations-steps
Slide 39
Slide 39 text
Signals
Standalone
Components and
APIs
Built-in Control
Flow and
Deferrable Views
Server-Side
Rendering,
esbuild and Vite
Angular 17
Neue Features optimal nutzen und Bestandsprojekte effizient migrieren
Agenda
Slide 40
Slide 40 text
If
Item not found!
@if (item) {
} @else {
Item not found!
}
Angular 17
Neue Features optimal nutzen und Bestandsprojekte effizient migrieren
Built-in Control Flow
OLD NEW
https://angular.dev/essentials/conditionals-and-loops#if-block
Slide 41
Slide 41 text
Motivation
– Control flow is built into the renderer, so you don’t have to import the
structural directives (e.g., CommonModule, NgIf).
– Dummy DOM elements such as are no longer needed.
– The structural directive syntax (e.g., *ngIf) is not very common.
– Better performance (up to 90% for @for), no longer tied to Zone.js.
– Improve developer experience when dealing with common scenarios,
such as “else” blocks, empty lists or deferring loading certain content.
– ⚠ But: Built-in control flow is not extensible, in contrast to structural
directives (e.g., *ngxPermission).
Angular 17
Neue Features optimal nutzen und Bestandsprojekte effizient migrieren
Built-in Control Flow
https://angular.dev/guide/templates/control-flow https://blog.angular.io/introducing-angular-v17-4d7033312e4b
Slide 42
Slide 42 text
Switch
Case A.
Default case.
@switch (condition) {
@case (caseA) {
Case A.
} @default {
Default case.
}
}
Angular 17
Neue Features optimal nutzen und Bestandsprojekte effizient migrieren
Built-in Control Flow
OLD NEW
https://angular.dev/guide/templates/control-flow#switch-block---selection
Slide 43
Slide 43 text
For
{{ item.name }}
No items.
@for (item of items;
track item.name) {
{{ item.name }}
} @empty {
No items.
}
Angular 17
Neue Features optimal nutzen und Bestandsprojekte effizient migrieren
Built-in Control Flow
OLD NEW
https://angular.dev/essentials/conditionals-and-loops#for-block
Slide 44
Slide 44 text
Migration Strategy
– Maturity: The built-in control flow is in developer preview.
– Why? Optimizes developer experience for common scenarios and
improves performance (Zone.js, mandatory tracking in for loops)
– When? Changes are still possible as the feature is in developer preview.
If you can handle potential changes, start using control flow now and
migrate your codebase as soon as possible. Otherwise, keep using
structural directives and migrate later.
– Supported by current versions of WebStorm, VS Code and Prettier.
– ⚠ But: The syntax does not match the HTML standard and may lead to
problems with older IDE versions or tooling that is not aware of it.
Angular 17
Neue Features optimal nutzen und Bestandsprojekte effizient migrieren
Built-in Control Flow
Slide 45
Slide 45 text
How?
– Migration can be automated
– Target path can be specified (allowing a step-by-step migration)
– Allows formatting affected files
– Removes CommonModule/structural directive imports from component
class
– Manual changes likely required
– Effort for mid-size projects: < 1 hour
– No functional changes
Angular 17
Neue Features optimal nutzen und Bestandsprojekte effizient migrieren
Built-in Control Flow
Slide 46
Slide 46 text
How?
– ⚠ Migration is in developer preview itself
– ⚠ @for tracks the count variable by default (not necessarily the best
performance)
– ⚠ The built-in control flow does not support some rarely used features
that were previously possible (e.g., *ngFor collection aliasing, multiple
*ngIf aliases, …). These usages must be changed before running the
migration.
– ⚠ Template reformatting does not use Prettier
Angular 17
Neue Features optimal nutzen und Bestandsprojekte effizient migrieren
Built-in Control Flow
Slide 47
Slide 47 text
Migration
ng g @angular/core:control-flow
Angular 17
Neue Features optimal nutzen und Bestandsprojekte effizient migrieren
Built-in Control Flow
Slide 48
Slide 48 text
Motivation
– Takes lazy loading a step further by bringing it to the template level,
which can improve the load time performance of your application.
– Loads a (large/rarely used) view only based on a certain trigger
(e.g., when the template enters the viewport, the device is idle, …).
– Everything uses template magic, enabled by the new @defer block.
– Offers helpers like @placeholder (while the content is being loaded), or
@error when the content fails to load.
– An example for a feature that is only accessible via the new syntax.
Angular 17
Neue Features optimal nutzen und Bestandsprojekte effizient migrieren
Deferrable Views
Slide 49
Slide 49 text
Examples
@defer (on viewport) {
} @placeholder {
Calendar placeholder
} @error {
Failed to load the calendar!
}
Angular 17
Neue Features optimal nutzen und Bestandsprojekte effizient migrieren
Deferrable Views
https://angular.dev/guide/defer
Slide 50
Slide 50 text
Signals
Standalone
Components and
APIs
Built-in Control
Flow and
Deferrable Views
Server-Side
Rendering,
esbuild and Vite
Angular 17
Neue Features optimal nutzen und Bestandsprojekte effizient migrieren
Agenda
Slide 51
Slide 51 text
Motivation
– Server-side rendering (SSR) renders the application on the server,
significantly improving load time performance
– Prerendering/static site generation (SSG) renders all static HTML files
during build time, improving server response time
– Hydration allows client-side Angular to reattach to the server-
rendered DOM nodes during launch, improving client-side load time
Angular 17
Neue Features optimal nutzen und Bestandsprojekte effizient migrieren
Server-Side Rendering
Slide 52
Slide 52 text
Motivation
Slide 53
Slide 53 text
In Angular 17
– SSR is now fully integrated with Angular and includes SSR,
prerendering, and hydration
– Angular Universal is no longer offered as a separate library
– For new projects, SSR can be easily enabled (e.g., ng new --
ssr)
– Existing projects first have to switch to the new application builder
and update their configuration
Angular 17
Neue Features optimal nutzen und Bestandsprojekte effizient migrieren
Server-Side Rendering
Slide 54
Slide 54 text
Motivation
The JavaScript ecosystem has advanced and new (and significantly
faster) build tools have arrived.
Angular 17
Neue Features optimal nutzen und Bestandsprojekte effizient migrieren
esbuild and Vite
https://esbuild.github.io/
Slide 55
Slide 55 text
Motivation
– Significantly faster build
times (initial/incremental)
– Compatibility with native
ECMAScript Modules (ESM)
and the modern JavaScript
ecosystem
– Hot module replacement
(HMR) support for styles
(performance improvement)
Angular 17
Neue Features optimal nutzen und Bestandsprojekte effizient migrieren
esbuild and Vite
https://blog.angular.io/introducing-angular-v17-4d7033312e4b
Slide 56
Slide 56 text
New Builders
browser-esbuild
More compatible, drop-in
replacement for “browser” builder
application
Integrated SSR, requires code
changes when SSR was used,
requires configuration changes
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:application",
"options": {
"outputPath": {
"base": "dist/my-app"
},
"index": "src/index.html",
"polyfills": [
"zone.js"
],
"tsConfig": "tsconfig.app.json",
"assets": [
"src/favicon.ico",
"src/assets",
Angular 17
Neue Features optimal nutzen und Bestandsprojekte effizient migrieren
esbuild and Vite
https://angular.io/guide/esbuild
NEW
Slide 57
Slide 57 text
Motivation
– Maturity: New apps created in Angular 17 will automatically use the
application builder
– Why? Significantly faster build times, modern JavaScript
– When? The existing Webpack-based build system is still stable. Old
apps will not be migrated automatically. As Angular will move on, you
should migrate as time permits.
– How? Aim for application, if that is not possible, try browser-esbuild.
Just replace the builders in angular.json and see if the build works. If
not, investigate and estimate the effort.
Angular 17
Neue Features optimal nutzen und Bestandsprojekte effizient migrieren
esbuild and Vite
Slide 58
Slide 58 text
Migration
– ⚠ Output folders change, build pipelines may have to be adjusted.
– ⚠ Manual changes may be required, depending on the dependencies.
– ⚠ The effort may be very high for larger projects.
– ⚠ Migration might not be possible due to incompatible dependencies.
Angular 17
Neue Features optimal nutzen und Bestandsprojekte effizient migrieren
esbuild and Vite
Slide 59
Slide 59 text
Migration
ng update @angular/cli --name use-application-builder
Angular 17
Neue Features optimal nutzen und Bestandsprojekte effizient migrieren
esbuild and Vite
Slide 60
Slide 60 text
Feature Maturity Benefit Criticality Effort
Signals ●●○ ●●○ ●○○ ●●●
Standalone ●●● ●●○ ●●○ ●●○
Control Flow ●○○ ●○○ ●○○ ●○○
SSR ●●● ●●○ ●○○ ●●●
esbuild and Vite ●●● ●●● ●●● ●●○
Angular 17
Neue Features optimal nutzen und Bestandsprojekte effizient migrieren
Summary
Slide 61
Slide 61 text
The “Angular Renaissance” is real
Notable advancements while being backwards compatible
Increased build/runtime performance and developer experience
Keep your users and developers happy
Angular 17.1+ apps will look significantly different to previous versions
Avoid technical debt, migrate now
Angular 17
Neue Features optimal nutzen und Bestandsprojekte effizient migrieren
Summary
Slide 62
Slide 62 text
Thank you
for your kind attention!
Christian Liebel
@christianliebel
[email protected]