Migration from v12 to v16: TS errors in template

Question

I would to migrate a big app from Angular 12 to Angular 16. The app is made through Ionic (also migrated from 5 to 7).

To do this, I performed a migration of:

• TSlint to ESlint
• Typescript 4.3 to 5.0

I resolved a lot of errors from linter (through IDE PhpStorm).

When I run the app in development, no problem the app works correctly, but when I try to build in production environment, a lot of errors are raised from templates.

An error like this:

Error: src/app/signup/signup.page.html:134:93 - error TS2532: Object is possibly 'undefined'.

134             <ion-button class="next" routerLink="/login" [disabled]="isLoading" *ngIf="data.isAlreadyLinked">{{ 'signup.login' | transloco }}</ion-button>
                                                                                                ~~~~~~~~~~~~~~~

In fact, the object data will not null because there is a check just above to display this component.

The problem is :

• there are a lot of errors raised by ng run app:build:production
• the IDE doesn't detect these errors
• I can't fix all errors raised from command line (very hard).

So, do you know a solution to:

• display the TS errors of templates in PhpStorm, or
• disable template TS errors check during production build, or
• any solution to unblock me?

Answer 1

Actually new verion of typescript, strict null check is enable by default. So you can disable by adding below line in tsconfig.json file.

"strictNullChecks": false

Let me know if that works.