strictTemplates, Angular 9: compability with Ivy

[andzejsw]

Enabling the new strictTemplates flag in Angular 9's compiler options generates the following build error:
This likely means that the library (@angular/platform-browser/animations) which declares BrowserAnimationsModule has not been processed correctly by ngcc, or is not compatible with Angular Ivy. Check if a newer version of the library is available, and update if so. Also consider checking with the library's authors to see if the library is expected to be compatible with Ivy.
Error appears for multiple components:

1. @angular/platform-browser/animations
2. @angular/router
3. @angular/material/sort
4. @angular/material/paginator
5. @angular/material/datepicker
6. @angular/material/icon
7. @angular/material/core
8. @angular/forms

And maybe in some other. But these ones i am using in my project.

[jpelton-stroud]

Dunno if it helps, but so far I only appear to get the cited errors when I first add an import for a given material module while ng serve is running; ng build & ng build --prod aren't throwing any errors for me, and if I stop & restart ng serve it compiles & runs w/o any further issue.

I will add that I'm working with a brand new project, so there's not a lot else going on, yet.

[jschrbr]

Dunno if it helps, but so far I only appear to get the cited errors when I first add an import for a given material module while ng serve is running; ng build & ng build --prod aren't throwing any errors for me, and if I stop & restart ng serve it compiles & runs w/o any further issue.

I will add that I'm working with a brand new project, so there's not a lot else going on, yet.

Yep, that's been working for me. (Also working on a brand new project).

All but the datepicker.
Adding the mat-datepicker tag to HTML seems to stop my app rendering at the position the datepicker is called. With no errors.

@andzejsw I noticed the datepicker is on your list. This may also be causing your grief.

@jpelton-stroud Can you please try confirm this behavior?
Try adding the datepicker near the top of your project, and see if it still renders.

Just confirm whether its just me or something bigger. Further discussions should be in a separate issue.

[andzejsw]

Dunno if it helps, but so far I only appear to get the cited errors when I first add an import for a given material module while ng serve is running; ng build & ng build --prod aren't throwing any errors for me, and if I stop & restart ng serve it compiles & runs w/o any further issue.

I will add that I'm working with a brand new project, so there's not a lot else going on, yet.

ng build with --watch --poll throws error for me

[andzejsw]

Error now isn't appearing for me, after i updated all dependencies. Is it fixed? Can anyone else confirm!?

[jpelton-stroud]

Angular CLI: 9.0.4
Node: 10.15.3
OS: linux x64

Angular: 9.0.4
... animations, cli, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router
Ivy Workspace: Yes

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.900.3
@angular-devkit/build-angular     0.900.4
@angular-devkit/build-optimizer   0.900.4
@angular-devkit/build-webpack     0.900.4
@angular-devkit/core              9.0.3
@angular-devkit/schematics        9.0.4
@angular/cdk                      9.1.0
@angular/fire                     5.4.2
@angular/material                 9.1.0
@ngtools/webpack                  9.0.4
@schematics/angular               9.0.4
@schematics/update                0.900.4
rxjs                              6.5.4
typescript                        3.7.5
webpack                           4.41.2

ng update says I'm current w/ the above.

added import {MatDatepickerModule} from '@angular/material/datepicker'; and to imports array in app.module, still got the error:

ERROR in node_modules/@angular/material/datepicker/datepicker-module.d.ts:8:22 - 
error NG6002: Appears in the NgModule.imports of AppModule, but could not be 
resolved to an NgModule class.

This likely means that the library (@angular/material/datepicker) which declares
MatDatepickerModule has not been processed correctly by ngcc, or is not compatible
with Angular Ivy. Check if a newer version of the library is available, and update if so.
Also consider checking with the library's authors to see if the library is expected to be
compatible with Ivy.

8 export declare class MatDatepickerModule {

[dyingangel666]

Setting importHelpers in the tsconfig solved the issues for me too. I've also setup a new library project through the CLI and the importHelpers option in the tsconfig file is also set from the CLI. So i think it's necessary ;-)

[Qarun-Qadir-Bissoondial]

I can confirm that I'm having the same problem that @andzejsw is having, however with a library that I created myself.

I added the "enableIvy": false option in my tsconfig.lib.json.

But if i stop the application that's using the library and restart it, then it works fine for some reason.
Can also confirm that the error is not showing up when running ng build --prod

[dyingangel666]

Setup a new library with a current CLI version and compare your tsconfigs. With all stuff configured correctly all is running without any problem.

[Qarun-Qadir-Bissoondial]

Hey @dyingangel666, based on what you said, I realized that my library was originally created with Angular Version 8.
I ran ng update on it around 2-3 weeks ago and I thought everything was fine. I just realized that my peerDependencies in my library package.json was still set to ^8.2.14.

I updated them and re-built the library and now everything works smoothly. So i didn't really create a new library but i realized my stuff was outdated even after i ran ng update.

Thanks a lot man!

[dyingangel666]

Yeah you're right. Had the same issues with one of my projects. Since I've seen that I prefer to update my projects manually and going through the changelog and the update docs just to make sure. Never trust a program :D

[s4m0r4m4]

I just upgraded to Angular 9 (from 8) using ng update, and am hitting the same error. Whenever I run ng build or ng serve,

node_modules/@angular/material/toolbar/toolbar-module.d.ts:8:22 - error NG6002: Appears in the NgModule.imports of AppModule, but could not be resolved to an NgModule
class.

This likely means that the library (@angular/material/toolbar) which declares MatToolbarModule has not been processed correctly by ngcc, or is not compatible with Angular Ivy. Check if a newer version of the library is available, and update if so. Also consider checking with the library's authors to see if the library is expected to be compatible with Ivy.

This happens for all of the Angular Material modules that I use (TableModule, ButtonToggleModule, ListModule, IconModule, FormFieldModule, InputModule, StepperModule, etc.). I tried adding the postinstall task to package.json as recommended by the Update Guide, restarting my computer and retrying the build --> still the same error. I have importHelpers: true in tsconfig.json.

Any idea what's going on here? My angular config as as follows (not sure why devkit is still stuck on 8.3, I followed their update guide line-by-line):

Angular CLI: 9.0.5
Node: 12.4.0
OS: win32 x64

Angular: 9.0.5
... animations, cli, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router
Ivy Workspace: Yes

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.900.5
@angular-devkit/build-angular     0.900.5
@angular-devkit/build-optimizer   0.900.5
@angular-devkit/build-webpack     0.900.5
@angular-devkit/core              8.3.23
@angular-devkit/schematics        8.3.23
@angular/cdk                      9.1.1
@angular/material                 9.1.1
@ngtools/webpack                  9.0.5
@schematics/angular               8.3.23
@schematics/update                0.900.5
rxjs                              6.5.4
typescript                        3.7.5
webpack                           4.41.2

EDIT: I fixed the issue by deleting node_modules and then redoing npm install

[youssefalaoui]

This error happened to me when i upgraded to angular 9.

My current config is

Angular CLI: 9.0.5
Node: 13.7.0
OS: darwin x64

Angular: 9.0.5
... animations, cli, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router
Ivy Workspace: Yes

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.900.5
@angular-devkit/build-angular     0.900.5
@angular-devkit/build-optimizer   0.900.5
@angular-devkit/build-webpack     0.900.5
@angular-devkit/core              9.0.5
@angular-devkit/schematics        9.0.5
@angular/cdk                      9.1.2
@angular/material                 9.1.2
@ngtools/webpack                  9.0.5
@schematics/angular               9.0.5
@schematics/update                0.900.5
rxjs                              6.5.4
typescript                        3.7.5
webpack                           4.41.2

A solution would be to remove "node_modules" and perform a npm install

[dyingangel666]

Not sure if it's worth to say. When something goes wrong, then the first thing is always to remove the node_modules and perform a npm install... xD

[mvhk]

But if i stop the application that's using the library and restart it, then it works fine for some reason.

Worked For Me Thank you!!!