升级到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 添加到模块中的方案数组中

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屋！