升级到 Angular v9 并启用 Ivy 后 Angular 编译失败

2024-07-01

我们最近将 Angular 应用程序升级到了最新版本的 Angular(Angular v9)。 我们所有的依赖项也都升级了,“ng update”表示我们所有的依赖项都“按顺序”。

当我们在启用 Ivy 的情况下构建应用程序时,编译过程会失败并出现大量错误,这是我们以前从未遇到过的:

 "angularCompilerOptions": {
    "enableIvy": true
  }

有些错误非常奇怪,表示您无法绑定“ngClass”或“ngModel”,因为它不是“div”的已知属性。它似乎缺少一些主要模块。

例如:

src/app/register/register.component.html:34:48 - error NG8002: Can't bind to 'ngClass' since it isn't a known property of 'div'.

<div class="form-group has-feedback" [ngClass]="{ 'has-error': f.submitted && !fname.valid }">
                                                  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
src/app/modals/modal-recommendations/modal-recommendations.component.html:12:25 - error NG8002: Can't bind to 'ngClass' since it isn't a known property of 'div'.
<div class="modal-body" [ngClass]="{'text-center': recommendationNotVisible()}">
12 <div class="modal-body" [ngClass]="{'text-center': recommendationNotVisible()}">

src/app/dashboard/dashboard.component.html:53:17 - error NG8002: Can't bind to 'accountId' since it isn't a known property of 'app-metric-box'.
53                 [accountId]="accountId"

或者它无法识别某些组件,例如:

src/app/export/export-base/export-base.component.html:2:5 - error NG8001: 'router-outlet' is not a known element:
1. If 'router-outlet' is an Angular component, then verify that it is part of this module.
2. If 'router-outlet' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

2     <router-outlet></router-outlet>

错误主要有两类:

  1. 无法合并到 [some-property],因为它不是 [some-element] 的已知属性。这些属性可以是角度属性(ngClass、ngModel)或我们组件上的自定义属性。
  2. [some-component] 不是已知元素(我们的自定义组件和角度组件也会出现这种情况)

如果我们禁用“Ivy”,则一切正常,没有任何错误,代码可以顺利编译和运行。

我们想要开始使用 Ivy,因此我们正在寻找有关这些错误以及如何修复它们的解释。

Thanks!


你需要添加CUSTOM_ELEMENTS_SCHEMA to schemas模块中的数组

import { NgModule, CUSTOM_ELEMENTS_SCHEMA }  from '@angular/core';

@NgModule({
    ...
    schemas: [ CUSTOM_ELEMENTS_SCHEMA ]
})
export class AppModule { }
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

升级到 Angular v9 并启用 Ivy 后 Angular 编译失败 的相关文章