strictTemplates, Angular 9: compability with Ivy

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.

11 thoughts on “strictTemplates, Angular 9: compability with Ivy

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

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

  3. 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 😉

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

  5. 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!

  6. 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 😀

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

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

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

  10. 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!!!

  11. I had the same issue

    This likely means that the library (@angular/material/button) which declares MatButtonModule 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.

    in an angular9.1.2 project when I ran
    npm i --save @angular/material @angular/cdk
    that installed
    "@angular/cdk": "^10.0.0", "@angular/material": "^10.0.0",

    Downgrading to
    "@angular/cdk": "^9.1.2", "@angular/material": "^9.1.2"
    fixed the issue.