Angular компиляция завершается неудачно после обновления до Angular v9 и включения Ivy - PullRequest
Новая
       86

Angular компиляция завершается неудачно после обновления до Angular v9 и включения Ivy

5 голосов
/ 27 января 2020

Мы недавно обновили наше приложение 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]. Свойства могут быть angular свойствами (ngClass, ngModel) или нашими пользовательскими для наших компонентов.
  2. [some-component] не является известным элементом (опять же, это происходит как для наших пользовательских компонентов, так и для angular компоненты)

Если мы отключаем «Ivy», все работает без ошибок, код компилируется и работает гладко.

Мы хотим начать использовать Ivy, поэтому мы ищем объяснение об этих ошибках и как их исправить.

Спасибо!

Ответы [ 2 ]

0 голосов
/ 07 мая 2020

Моя проблема заключалась в том, что у меня был компонент, определенный как компонент ввода. Поскольку это не рекомендуется для Ivy, я удалил свойство entryComponents из наших модулей. Однако в одном случае это привело к ошибке, аналогичной вашей. 

error NG8002: Can't bind to 'ngClass' since it isn't a known property of 'div'

Допустим, это произошло в text.component. html (TextComponent). У него есть TextModule, содержащий импорт для CommonModule, который включает ngClass. Он находится под ParentComponent, а ранее в ParentModule у него было свойство entry с TextComponent. Я подозреваю, что Плющ тянет только в TextComponent, а не TextModule. Поэтому я обновил ParentModule для импорта текстового модуля, и он устранил ошибку.

До: 

@NgModule({
     imports: []
     entryComponents: [TextComponent]
})
export class ParentModule { }

После: 

@NgModule({
     imports: [TextModule]
})
export class ParentModule { }

Так что ваша индивидуальная проблема может отличаться , но я бы посмотрел, как структурированы ваши модули и импорт.

0 голосов

Вам необходимо добавить CUSTOM_ELEMENTS_SCHEMA в схемы в вашем модуле 

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

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