Angular Without Modules - Google I/O Extended Nairobi

In the recently released version Angular, version 14, Angular enables the usage of Angular without the need for NgModules. This talk will look at how Angular Standalone components work, how to use them, and what you need to do to prepare your existing Angular project for Standalone Components.

Transcript

1. Angular without Modules - A Dive into Standalone Components By Maina Wycliffe
2. About Me Software Engineer, Typescript aficionado @mwycliffe_dev This is Learning @Thisis_Learning Author of the All Things Typescript Newsletter - allthingstypescript.dev Maina Wycliffe
3. NgModules?
4. - Basic Building Blocks of Angular - Containers for components, directives, pipes, etc. - Providing Dependency Injection - Imports and Export - Bootstrapping root component Why?
5. NgModules
6. Standalone Components
7. Demo bit.ly/391k56N Code bit.ly/3aFzs5f
8. - 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
9. 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
10. 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
11. complete-strike-through.directive.ts @Directive({ selector: '[appCompleteStrikeThrough]', standalone: true }) export class CompleteStrikeThroughDirective implements OnInit, OnChanges { // ... } Indicates a directive is a Standalone component
12. New projects in v14 will still be generated using with NgModules ng new is not changing
13. - Delete the root module - app.module.ts - Modify main.ts and replace bootstrapModule() with bootstrapApplication() Migrating to Standalone Components
14. importProvidersFrom - Extracts providers from the provided module - The providers are made available to the root component and it’s children
15. bootstrapApplication List of providers that should be available to the root component and all its children.
16. - Finally, modify app.component to add the standalone: true property
17. 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
18. Using Standalone Components - Import standalone component, directive, pipe - Imports – property can also import other modules - providers - property for Dependency Injection
19. Using Standalone Components
20. Routing Nothing changes in terms of routing
21. Lazy Loading Use loadComponent property to lazy load a component instead of loadChildren
22. What’s next? - NgModules are not going anywhere - You can use a combination of both
23. github.com/mainawycliffe/angular-without-modules-google-io-extended-2022-demo DEMO
24. Thank you! Software Engineer @mwycliffe_dev mainawycliffe.dev mainawycliffe Maina Wycliffe