时间戳

首页 > 解决方案 > Angular 从 8 升级到 9 - 模板中的 Ivy 编译错误

javascript - Angular 从 8 升级到 9 - 模板中的 Ivy 编译错误

问题描述

根据 Angular 更新指南，我成功地将我的 Angular 应用程序从版本 8 升级到版本 9，并且我解决了 ts 文件中出现的所有问题。

在版本 8 中，我没有使用 Ivy，而是使用 View Engine，因为它是默认设置。

升级到 9 后，我的 Angular 应用程序只能在禁用 Ivy 的情况下工作（“enableIvy”：tsconfig.json 中的 false）。启用 Ivy 后，模板中出现很多错误，其中一些错误是：

  1. 无法绑定到“我的属性”，因为它不是“我的组件”的已知属性
  2. 没有找到 exportAs 'ngForm' 的指令
  3. 无法绑定到“ngClass”，因为它不是“div”的已知属性
  4. 无法绑定到“routerLink”，因为它不是“a”的已知属性
  5. templateUrl: "./my-component.component.html", 组件模板出错

我使用 View Engine 没有收到这些错误，并且该应用程序运行良好。

似乎是配置或模块导入问题？我懒加载模块，如：

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

在 package.json 我正在使用

"postinstall": "ngcc"

在 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
  },
}

有任何想法吗？:)

标签： javascriptangulartypescriptangular9angular-upgrade

解决方案

尝试更改 EcmaScript 目标：“es5”。很好解释下一个链接

我使用 angular 9 我有 tsconfig.json 这种方式。

{
  "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"
    ]
  }
}

推荐阅读