升级到 Angular v9 并启用 Ivy 后，Angular 编译失败 [英] Angular compilation fails after upgrade to Angular v9 and enabling Ivy

问题描述

我们最近将 angular 应用升级到了最新版本的 Angular (Angular v9).我们所有的依赖项也都升级了，ng update"表示我们所有的依赖项都是有序的".

We have recently upgraded our angular app to the latest version of Angular (Angular v9). All our dependencies are also upgraded, "ng update" says all our dependencies are "in order".

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

When we build the application with Ivy enabled the compilation process fails with a ton of errors, which we've never encountered before:

 "angularCompilerOptions": {
    "enableIvy": true
  }

有些错误很奇怪，说你不能绑定 'ngClass' 或 'ngModel'，因为它不是 'div' 的已知属性.它似乎缺少一些主要模块.

Some of the errors are very odd, saying that you can't bind 'ngClass' or 'ngModel' since it's not a know property of 'div'. It seems like it's missing some of its main modules.

例如:

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"

或者它不能识别某些组件，例如:

Or it doesn't recognize some of the components, like:

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] 不是已知元素(这同样发生在我们的自定义组件和角度组件中)

如果我们禁用常春藤"，一切正常，没有任何错误，代码编译并顺利运行.

If we disable "Ivy" everything works without any errors, the code compiles and runs smoothly.

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

We want to start using Ivy so we're searching for an explanation about these errors and how to fix them.

谢谢！

推荐答案

您需要将 CUSTOM_ELEMENTS_SCHEMA 添加到您的模块中的 schemas 数组

You need add CUSTOM_ELEMENTS_SCHEMA to schemas array in your module

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

@NgModule({
    ...
    schemas: [ CUSTOM_ELEMENTS_SCHEMA ]
})
export class AppModule { }

这篇关于升级到 Angular v9 并启用 Ivy 后，Angular 编译失败的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！