DEV Community: NagarLalit

Angular Migrate To New Control Flow Syntax

NagarLalit — Fri, 29 Aug 2025 16:59:23 +0000

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.

Following are the steps to migrate

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

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

 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.

How rollup's latest release affected our angular library build

NagarLalit — Wed, 22 Jun 2022 16:29:09 +0000

In one of our project at workplace we are using mono-repo architecture for our angular applications.
Following is the tech stack for the mono repo.

Angular
Lerna (to manage the packages at multiple application level)
NPM (package manager)

Folder structure:-

project
│   README.md   
│   lerna.json
|   package.json
|   package-lock.json
└───apps
│   │
│   └───angular-app-1
│       │   package.json
│       │   angular.json
│       │   ...
|   |
│   └───angular-app-2
│       │   package.json
│       │   angular.json
│       │   ...
|
└───SDK
|   |
│   └───angular-library
│       │   package.json
|       |   ...

The angular library located inside SDK directory is used to share the code between multiple angular applications. Majorly it contains services, translators and utility functions.
The npm package which is used to build angular library is ng-packagr (for more info visit this website)
ng-packagr internally uses rollup for building the angular library. See the highlighted package in below screenshot.

If you have noticed ng-packagr is using caret(^) sign to download the rollup package. It means every package version from 2.0.0 till < 3.0.0 will be automatically fetched from npm registry whenever we are going to install the packages.

When rollup released its version 2.75.3 our angular library's build was suddenly started breaking. It throws following error.
Cannot read properties of null (reading 'render')
Visit this link to see more details

Remediation:-
When we checked the npm error log. We have found out that it was getting generated from rollup.js . But we were not using rollup.js in our root package.json so to know that from where it is getting installed we fired following command to identify the source package.
npm list rollup

Then we got to know that it is being used by ng-packagr.
To resolve the issue quickly we added rollup's latest stable version in our root package.json without caret sign due to which the version specified by us was installed instead of the version which is required by ng-packagr.

"rollup": "2.75.2"

It was later fixed by rollup team in another release.
Visit this link to understand the fix

Closures & Angular

NagarLalit — Mon, 02 Aug 2021 13:20:48 +0000

During the interview, most of the people are able to answer when asked about Closures and their general examples. But when asked about the same if they have used or seen it anywhere in their angular application most of them failed to provide an example. So I thought to document a basic example of closure in Angular.
Reiterating the definition of Closure as per MDN. Closures.

Closures

A closure is the combination of a function bundled together (enclosed) with references to its surrounding state (the lexical environment). In other words, a closure gives you access to an outer function’s scope from an inner function. In JavaScript, closures are created every time a function is created, at function creation time.

Now breaking up the definition for better understanding.
A closure gives you access to an outer function’s scope from an inner function.
So basically after execution of the outer function, the inner function can remember the scope (e.g. if there are any variables in the outer function the inner function can access them).
So, in Angular, we usually subscribe to any API call inside the ngOnInit function. Something like the below example.

ngOnInit() {
    this.api.get('users?page=1').subscribe(res => {
      this.users = res;
      console.log('data response', this.users);
    }, error => {
      console.log(error);
    });
  }

Here the subscribe and error functions are acting as inner functions and the ngOnInit is acting as an outer function. And we can access any variables or methods of the component using this keyword. This means it remembers the scope of the outer function.

PS: This is my first blog, apologies if I have made any mistakes. Hope you have liked this one.