Migrate to Standalone Components in Angular

This guide shows you how to migrate existing project to standalone components in Angular. ng generate command helps us to Migrate an existing Angular Project to Standalone Components. It will also migrate the directives and pipes to Standalone API. The Angular CLI takes care of the majority of the migration work, but there might be a need for a few minor changes from your end. In this article we will discuss the steps involved in migrating to standalone components in Angular in detail.

Standalone Components Migration

The migration to standalone components process consists of three steps. All of them done using the ng generate command.

When you run the above command, it will ask you to choose from the type of migration (or step) as shown below

Angular standalone components migration choose the type of migration

The three migration types are.

  1. Convert all components, directives and pipes to standalone
  2. Remove unnecessary NgModule classes
  3. Bootstrap the application using standalone APIs

These three steps are discussed below.

After choosing the migration type, you will be asked to specify the path (relative to the Project root). Use this if you the application is very large. Leaving it blank will migrate the entire application (The default path is ./ which points to the project route).

Angular standalone components migration choose the path

Migration Steps

There are three distinct migration steps. Before running the migration, you should know what to expect in each of those steps.

Convert all components, directives and pipes to standalone

This will look for every Component, Directive & Pipe and does the following

  1. Add the standalone flag.
  2. Populates the imports array of the Component with its dependencies.
  3. Removes the Component from the declaration array of NgModule.
  4. This step will not mark the AppComponent as standalone as it is marked as bootstrap component in the AppModule.

For example

LoginComponent before migration

LoginComponent after migration to Standalone Component.

LoginModule before migration.

LoginModule after migration. You can see that LoginComponent & ChangePasswordComponent are removed from the declarations array.

Remove unnecessary NgModule classes

If we migrate all Components, Directives & Pipes, then NgModules are no longer necessary. This step will remove all the NgModules that are safe to remove.

A module is considered “safe to remove” if it:

  1. Has no declaration, providers & bootstrap components.
  2. Module does not have class Members.
  3. Has no imports that reference a ModuleWithProviders or reference a module that cannot be removed.

It is very likely that it will not be able to remove all the NgModules. For Example, if NgModule contain RouterModule.forChild(routes) or RouterModule.forRoot(routes), Migration step will not delete it. You need to change them manually.

This will not touch the AppModule (i.e. root module of the application)

Bootstrap the application using standalone APIs

This last step will remove the AppModule and configure the application to bootstrap using the standalone API. Run this step only after you completed previous steps for the entire application.

  1. The Module based applications are bootstrapped (main.ts) using the bootstrapModule function. This step will remove that. Instead it will use the bootstrapApplication to bootstrap the application using the the AppComponent.
  2. The Migration step will autofill the providers array from the existing AppModule.
  3. The AppModule will be deleted.
  4. It will also mark the AppComponent as Standalone.

The following is the example main.ts file before migration.

main.ts after migration.

Running the Migration

Now, you know what each steps does, you can proceed with the migration. Before proceeding ensure that

  1. You are using Angular 15.2 or above. Prior versions of the Angular does not support standalone components.
  2. Ensure that Application builds & runs correctly.
  3. Commit any pending changes in your repository. Start with a clean slate.
  4. Run the migration in a separate branch and commit after each step.

The migration runs in three distinct operations. You should verify the app after each step and may need to make necessary changes. Remember to commit changes in a separate branch.

If you are migrating a large application, then you may consider migrating specific paths at a time.

Step 1: Convert all components, directives and pipes to standalone

run the command ng generate @angular/core:standalone and select “Convert all components, directives and pipes to standalone“.

Once done, test your application & commit your changes.

Step 2: Remove unnecessary NgModule classes

run the command ng generate @angular/core:standalone and select “Remove unnecessary NgModule classes“.

Once done, test your application & commit your changes.

Step 3: Bootstrap the application using standalone APIs

If you migrating each path, then ensure that you complete the Step 1 & Step 2.

run the command ng generate @angular/core:standalone and select “Bootstrap the application using standalone APIs“.

Test you application after the above step.

The migration script may fail to migrate some parts of the application. In such cases it will leave a TODO comment. Check all those comments and take necessary action.

That it.


Standalone Migration

Leave a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Scroll to Top