Migrate to Standalone Components using the Angular CLI

Let's use the Angular CLI to automatically migrate an existing Angular application to standalone components!

Standalone components were provided in Angular version 14 as a developer preview. In Angular v15 standalone components were released as a stable feature. In version 15.2, Angular provided a schematic to help migrate an existing project to standalone.

What's a schematic? A schematic provides the code generation feature behind the Angular CLI including: ng generate, ng add, and ng update. Any time you use the Angular CLI to generate some code, the instructions for how that code is generated is provided in a schematic.

In this video, I walk you through the steps of migrating an existing application to standalone components using the Angular CLI. And I detail the changes made at each point in the process.

Links
Simplify with Angular Standalone Components:    • Simplify with Angular Standalone Comp...  

Sample code: https://github.com/DeborahK/Angular-G...

Content
00:00 Angular standalone components
00:55 Angular CLI standalone migration schematic
01:43 Review of code without standalone components
03:42 Application structure with NgModules
05:04 Bootstrapping with NgModules
05:51 Migration prerequisites
06:27 Migrating to standalone with the Angular CLI
07:17 Converting components, directives, and pipes (step 1)
08:53 Reviewing the result of migration step 1 (Components)
12:04 Reviewing the result of migration step 1 (NgModules)
13:16 Removing unused NgModules (step 2)
14:27 Reviewing the result of migration step 2 (NgModules)
15:01 Switching to standalone bootstrapping (step 3)
14:27 Reviewing the result of migration step 3 (bootstrapping)
17:22 Confirming the result
17:40 What's next?


▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
😊About Me
Hey! I'm Deborah Kurata
I'm a software developer and YouTube content creator. I speak at conferences such as VS Live and ng-conf. I write articles for freeCodeCamp. And I'm a Pluralsight author with courses in the top 10 most popular (out of 10,000+) over the past 5 years. For my work in support of software developers, I've been recognized with the Microsoft Most Valuable Professional (MVP) award, and I'm a Google Developer Expert (GDE).

Contact me on Twitter:   / deborahkurata  
Find my Pluralsight courses: https://www.pluralsight.com/profile/a...
Access my freeCodeCamp articles: https://www.freecodecamp.org/news/aut...
View my YouTube content:    / @deborah_kurata  

▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
#angular #bestpractices #angulartutorial #angularstandalonecomponents #standalonecomponents #demo