Angular Upgrade from 8 to 9 - Ivy Compilation Errors in Templates

Question

I successfully upgrade my angular app from version 8 to version 9 according to Angular Update Guide, and i solved all the issues that occurred in ts files.

In version 8 i was not using Ivy, i was using View Engine as it is the default.

After the upgrade to 9 my angular application is working only with the Ivy disabled ("enableIvy": false in tsconfig.json). With Ivy enabled am getting a lot of errors in templates, some of those errors are:

1. Can't bind to 'my-property' since it isn't a known property of 'my-component'
2. No directive found with exportAs 'ngForm'
3. Can't bind to 'ngClass' since it isn't a known property of 'div'
4. Can't bind to 'routerLink' since it isn't a known property of 'a'
5. templateUrl: "./my-component.component.html", Error occurs in the template of component

I am not getting those errors using View Engine and the app works fine.

It seems to be a configuration or Modules Import issue? Am lazy loading modules like:

loadChildren: () => import('./items/items.module').then(m => m.ItemsModule)

In package.json am using

"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 Ideas? :)

Answer 1

In the tsconfig.json, I changed the "target" value from "ES5" to "ES2015", the same value of "module" and it work out for me.

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "module": "es2015",
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "ES2015",
    "typeRoots": ["node_modules/@types"],
    "lib": ["es2018", "dom"]
  }  
}

Answer 2

Try to change EcmaScript target: "es5". nice explain next link

I use angular 9 i have tsconfig.json this way.

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "module": "esnext",
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es5",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2018",
      "dom"
    ]
  }
}