Angular without Modules - A Dive into Standalone Components By Maina Wycliffe

About Me Software Engineer, Typescript aficionado @mwycliffe_dev This is Learning @Thisis_Learning Author of the All Things Typescript Newsletter - allthingstypescript.dev Maina Wycliffe

NgModules?

- Basic Building Blocks of Angular - Containers for components, directives, pipes, etc. - Providing Dependency Injection - Imports and Export - Bootstrapping root component Why?

NgModules

Standalone Components

Demo bit.ly/391k56N Code bit.ly/3aFzs5f

- Affects Components, Pipes, Directives - Components that can be used without NgModules - In developer preview - Standalone property for standalone components - Angular 14 Feature What’s changing

app.component.ts @Component({ standalone: true, selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.scss'], imports: [RouterModule, CommonModule], }) export class AppComponent {} Indicates a component is a Standalone component

date-time.pipe.ts @Pipe({ name: 'dateTime', standalone: true, }) export class DateTimePipe implements PipeTransform { transform(value: unknown, ...args: unknown[]): string | null { // ... } } Indicates a pipe is a Standalone pipe

complete-strike-through.directive.ts @Directive({ selector: '[appCompleteStrikeThrough]', standalone: true }) export class CompleteStrikeThroughDirective implements OnInit, OnChanges { // ... } Indicates a directive is a Standalone component

New projects in v14 will still be generated using with NgModules ng new is not changing

- Delete the root module - app.module.ts - Modify main.ts and replace bootstrapModule() with bootstrapApplication() Migrating to Standalone Components

importProvidersFrom - Extracts providers from the provided module - The providers are made available to the root component and it’s children

bootstrapApplication List of providers that should be available to the root component and all its children.

- Finally, modify app.component to add the standalone: true property

New Components Using the ng generate with --standalone flag to generate standalone components i.e. ng g component component-name --standalone ng g directive directive-name --standalone ng g pipe pipe-name --standalone

Using Standalone Components - Import standalone component, directive, pipe - Imports – property can also import other modules - providers - property for Dependency Injection

Using Standalone Components

Routing Nothing changes in terms of routing

Lazy Loading Use loadComponent property to lazy load a component instead of loadChildren

What’s next? - NgModules are not going anywhere - You can use a combination of both

github.com/mainawycliffe/angular-without-modules-google-io-extended-2022-demo DEMO

Thank you! Software Engineer @mwycliffe_dev mainawycliffe.dev mainawycliffe Maina Wycliffe