Angular Migrate To New Control Flow Syntax

NagarLalit · Friday at 6:13 PM

From Angular V17, the team has introduced new syntax for if-else, for loop, and switch case.

You can update the existing code to the new syntax using the command available in angular CLI.

Official documentation link :-

Following are the steps to migrate

Navigate to the root folder of the project in command line tool and execute following command

Code:

ng generate @angular/core:control-flow

After executing the previous command, it will ask for path to run the migration. You can enter dot (.) to proceed further

Then it will ask to reformat the templates. Enter Y to continue

The command will take a couple of minutes to execute, depends on the codebase size. Once migration is successful, you will see the following message if it was not able to migrate certain files

Code:

 WARNING: 2 errors occurred during your migration:

    Template "file-path" encountered 1 errors during migration:
     - parse: Error: The migration resulted in invalid HTML for "file-path". Please check the template for valid HTML structures and run the migration again.

    Template "file-path" encountered 1 errors during migration:
     - *ngFor: Error: Found an aliased collection on an ngFor: "data of data.content as Array". Collection aliasing is not supported with @for. Refactor the code to remove the `as` alias and re-run the migration.

For such files, you will have to either update the syntax manually or correct the issues flagged by CLI and run the migrations again (might not work in every case). For rest of the files, the new syntax should be updated.

Verify the changes manually or by executing unit and functional test cases.

Continue reading...

Angular Migrate To New Control Flow Syntax

NagarLalit

Guest