Christian Liebel @christianliebel Consultant Hallo Standalone Components, tschüss NgModules! So bauen Sie Angular-Apps der Zukunft

Hello, it’s me. Hallo Standalone Components, tschüss NgModules! So bauen Sie Angular-Apps der Zukunft Christian Liebel Twitter: @christianliebel Email: christian.liebel @thinktecture.com Angular & PWA Slides: thinktecture.com /christian-liebel

Motivation Standalone Components Standalone Applications Hallo Standalone Components, tschüss NgModules! So bauen Sie Angular-Apps der Zukunft Agenda

Angular 16+ – Signals (…and a Zone.js-less future) – Server-Side Rendering/Hydration – Built-in Control Flow ({#if cond.expr}{/if}) – Standalone Applications/Components Goals: Streamline & modernize APIs + improve performance Hallo Standalone Components, tschüss NgModules! So bauen Sie Angular-Apps der Zukunft “The New Angular”

Modules // declare a module var myAppModule = angular.module('myApp', []); // configure the module. // in this example we will create a greeting filter myAppModule.filter('greet', function() { return function(name) { return 'Hello, ' + name + '!'; }; }); Hallo Standalone Components, tschüss NgModules! So bauen Sie Angular-Apps der Zukunft AngularJS

Beta in 2015 @Component({ selector: 'app-my', template: `{{ item.name | myPipe }}`, directives: [NgFor, TooltipDirective], pipes: [MyPipe], }) export class MyComponent { @Input({ required: true }) items!: Item[]; } Hallo Standalone Components, tschüss NgModules! So bauen Sie Angular-Apps der Zukunft Angular 2

RC 5 Hallo Standalone Components, tschüss NgModules! So bauen Sie Angular-Apps der Zukunft Angular 2

@NgModule({ declarations: [AppComponent, HomeComponent, MenuComponent], imports: [BrowserModule], providers: [DataService], bootstrap: [AppComponent], }) export class AppModule { } Hallo Standalone Components, tschüss NgModules! So bauen Sie Angular-Apps der Zukunft NgModules

Hallo Standalone Components, tschüss NgModules! So bauen Sie Angular-Apps der Zukunft 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

@Component({ selector: 'app-my', template: `{{ item.name | myPipe }}`, }) export class MyComponent { @Input({ required: true }) items!: Item[]; } Question: Where does appTooltip and myPipe come from? Hallo Standalone Components, tschüss NgModules! So bauen Sie Angular-Apps der Zukunft The problem with modules…

Dependencies ↑ Module ↑ Component Hallo Standalone Components, tschüss NgModules! So bauen Sie Angular-Apps der Zukunft The problem with modules…

Component ↓ Modules ↓ Dependencies Hallo Standalone Components, tschüss NgModules! So bauen Sie Angular-Apps der Zukunft The goal…

Motivation Standalone Components Standalone Applications Hallo Standalone Components, tschüss NgModules! So bauen Sie Angular-Apps der Zukunft Agenda

@Component({ selector: 'app-my', template: `{{ item.name | myPipe }}`, standalone: true, imports: [NgFor, TooltipDirective, MyPipe] }) export class MyComponent { @Input({ required: true }) items!: Item[]; } Hallo Standalone Components, tschüss NgModules! So bauen Sie Angular-Apps der Zukunft Standalone Components

Generating a new component ng generate component my-component --standalone --standalone is currently optional, and off by default. This also works for directives and pipes. Hallo Standalone Components, tschüss NgModules! So bauen Sie Angular-Apps der Zukunft Standalone Components

Lazy Loading export const ROUTES: Route[] = [ { path: 'admin', loadComponent: () => import('./admin/panel.component') .then(mod => mod.AdminPanelComponent), providers: [MyService] }, // … ]; https://angular.io/guide/standalone-components#lazy-loading-a-standalone-component Hallo Standalone Components, tschüss NgModules! So bauen Sie Angular-Apps der Zukunft Standalone Components

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[]; https://angular.io/guide/standalone-components#lazy-loading-many-routes-at-once Hallo Standalone Components, tschüss NgModules! So bauen Sie Angular-Apps der Zukunft Standalone Components

“Modules” export const CAROUSEL_DIRECTIVES = [ ImageCarouselComponent, ImageSlideComponent ] as const; @Component({ standalone: true, imports: [CAROUSEL_DIRECTIVES] }) export class MyComponent {} https://angular.io/guide/standalone-components#standalone-components-for-library-authors Hallo Standalone Components, tschüss NgModules! So bauen Sie Angular-Apps der Zukunft Standalone Components

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 {} Hallo Standalone Components, tschüss NgModules! So bauen Sie Angular-Apps der Zukunft Standalone Components

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[]; } Hallo Standalone Components, tschüss NgModules! So bauen Sie Angular-Apps der Zukunft Standalone Components

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 Hallo Standalone Components, tschüss NgModules! So bauen Sie Angular-Apps der Zukunft Standalone Components

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); Hallo Standalone Components, tschüss NgModules! So bauen Sie Angular-Apps der Zukunft Standalone Components

Motivation Standalone Components Standalone Applications Hallo Standalone Components, tschüss NgModules! So bauen Sie Angular-Apps der Zukunft Agenda

Hallo Standalone Components, tschüss NgModules! So bauen Sie Angular-Apps der Zukunft

Getting Started ng new my-app --standalone --standalone is currently optional, and off by default. ⚠ Some ng add/ng update integrations may not work with standalone workspaces. Hallo Standalone Components, tschüss NgModules! So bauen Sie Angular-Apps der Zukunft Standalone Applications LIVE DEMO

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 Hallo Standalone Components, tschüss NgModules! So bauen Sie Angular-Apps der Zukunft Standalone Applications

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)); Hallo Standalone Components, tschüss NgModules! So bauen Sie Angular-Apps der Zukunft Standalone Applications

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) ] }; Hallo Standalone Components, tschüss NgModules! So bauen Sie Angular-Apps der Zukunft Standalone Applications

Environment Injectors Modules @NgModule({ providers: [{ provide: PhotosService, useClass: CustomPhotosService, }] }) export class MyModule { constructor() { // My logic } } Standalone Apps createEnvironmentInjector([ { provide: PhotosService, useClass: CustomPhotosService }, { provide: ENVIRONMENT_INITIALIZER, useValue: () => {/* My logic */} } ]); Hallo Standalone Components, tschüss NgModules! So bauen Sie Angular-Apps der Zukunft Standalone Applications

Migration ng g @angular/core:standalone Hallo Standalone Components, tschüss NgModules! So bauen Sie Angular-Apps der Zukunft Standalone Applications

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 https://angular.io/guide/standalone-migration#migrations-steps Hallo Standalone Components, tschüss NgModules! So bauen Sie Angular-Apps der Zukunft Standalone Applications LIVE DEMO

Migration – 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) Hallo Standalone Components, tschüss NgModules! So bauen Sie Angular-Apps der Zukunft Standalone Applications

Standalone components are fun! IDEs already have tooling support Foundation for driving Angular forward à get ready for upcoming features Matches other frameworks (e.g., React, Lit) In my opinion… – New projects should be started using the standalone API – Existing projects should be migrated as soon as possible – Where this is not possible, add new parts using the standalone API Hallo Standalone Components, tschüss NgModules! So bauen Sie Angular-Apps der Zukunft Summary

Thank you for your kind attention! Christian Liebel @christianliebel [email protected]