Angular compilation fails after upgrade to Angular v9 and enabling Ivy

Question

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".

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
  }

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.

For example:

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>

The errors are mainly of two types:

1. Can't bin to [some-property], since it isn't a known property of [some-element]. The properties can be angular properties (ngClass, ngModel) or our custom ones on our components.
2. [some-component] is not a known element (again this occurs for both our custom components and angular components)

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

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

Thanks!

Answer 1

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 { }

Answer 2

My issue was I had a component defined as an entry component. Since this is being deprecated with Ivy, I removed the entryComponents property from our modules. However, in one case, this resulted in a similar error as you.

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

Let's say this occurred in text.component.html (TextComponent). It has a TextModule containing the import for CommonModule which enables ngClass. It sits under ParentComponent, and previously in ParentModule, it had an entry property with TextComponent. I suspect Ivy is only pulling in TextComponent and not TextModule. So I updated ParentModule to import the text module and it resolved the error.

Before:

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

After:

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

So your individual issue may be different, but I would look at how your modules and imports are structured.