After successfully upgrading my Angular application from version 8 to version 9 following the Angular Update Guide, I encountered some issues in the ts files and managed to resolve them all.
In version 8, I was using the View Engine instead of Ivy, which is the default.
However, after upgrading to version 9, I found that my Angular app only works when Ivy is disabled ("enableIvy": false in tsconfig.json). Enabling Ivy results in various template errors, such as:
- Unable to bind to 'my-property' as it is not a recognized property of 'my-component'
- No directive found with exportAs 'ngForm'
- Unable to bind to 'ngClass' as it is not a recognized property of 'div'
- Unable to bind to 'routerLink' as it is not a recognized property of 'a'
- Error occurs in the template of component with templateUrl: "./my-component.component.html"
Interestingly, these errors do not occur when using the View Engine, and the app functions without any issues.
Could this be a configuration or Modules Import problem?
I am using lazy loading modules like:
loadChildren: () => import('./items/items.module').then(m => m.ItemsModule)
In package.json, I have included:
"postinstall": "ngcc"
And in tsconfig.json:
{
"compileOnSave": false,
"compilerOptions": {
"downlevelIteration": true,
"importHelpers": true,
"module": "esnext",
"outDir": "./dist/out-tsc",
"sourceMap": true,
"declaration": false,
"moduleResolution": "node",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"target": "es6",
"typeRoots": ["node_modules/@types"],
"types": ["jest"],
"lib": ["es2015", "dom"],
"skipLibCheck": true
},
"angularCompilerOptions": {
"enableIvy": true
},
}
Any suggestions or ideas? :)