javascript - Angular-kompilering misslyckas efter uppgradering till Angular v9 och aktivering av Ivy

Vi har nyligen uppgraderat vår Angular-app till den senaste versionen av Angular (Angular v9). Alla våra beroenden är också uppgraderade, "ng update" säger att alla våra beroenden är "i ordning".

När vi bygger applikationen med Ivy aktiverat misslyckas kompileringen med en massa fel, som vi aldrig har stött på tidigare:

 "angularCompilerOptions": {
    "enableIvy": true
  }

Vissa av felen är väldigt konstiga och säger att du inte kan binda 'ngClass' eller 'ngModel' eftersom det inte är en känd egenskap hos 'div'. Det verkar som om några av dess huvudmoduler saknas.

Till exempel:

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"

Eller så känner den inte igen några av komponenterna, som:

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>

Felen är huvudsakligen av två typer:

  1. Kan inte binda till [some-property], eftersom det inte är en känd egenskap hos [some-element]. Egenskaperna kan vara angular-egenskaper (ngClass, ngModel) eller våra egna på våra komponenter.
  2. [some-component] är inte ett känt element (detta händer igen för både våra egna komponenter och Angular-komponenter)

Om vi inaktiverar "Ivy" fungerar allt utan några fel, koden kompilerar och körs smidigt.

Vi vill börja använda Ivy, så vi letar efter en förklaring till dessa fel och hur man åtgärdar dem.

Tack!

Svar #1

Du behöver lägga till CUSTOM_ELEMENTS_SCHEMA i schemas-arrayen i din modul

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

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

Svar #2

Mitt problem var att jag hade en komponent definierad som en entry-komponent. Eftersom detta avvecklas med Ivy, tog jag bort entryComponents-egenskapen från våra moduler. Men i ett fall resulterade detta i ett liknande fel som ditt.

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

Säg att detta inträffade i text.component.html (TextComponent). Den har ett TextModule som innehåller importen för CommonModule vilket möjliggör ngClass. Den ligger under ParentComponent, och tidigare i ParentModule hade den en entry-egenskap med TextComponent. Jag misstänker att Ivy endast tar in TextComponent och inte TextModule. Så jag uppdaterade ParentModule för att importera textmodulen och det löste felet.

Före :

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

Efter :

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

Så ditt individuella problem kan vara annorlunda, men jag skulle titta på hur dina moduler och importeringar är strukturerade.

Relaterade artiklar