Appears in the NgModule.imports of AppModule, but could not be resolved to an NgModule class. in Angular 12.2.9

Question

I've just create new angular 12 application. Installed version 12 of @angular/material. Now I want to use it. I've just added this simple element:

<mat-drawer-container></mat-drawer-container>

The browser display a white page. Console shows the following message:

Uncaught Error: Type MatDrawerContainer does not have 'ɵmod' property.

I've looked for MatDrawerContainer in node_modules and the class not exists. Maybe a wrong compilation? In the following config file, I've added enableIvy to false. Just because same issue has been resolved with this configuration. Here my tsconfig.js configuration:

{
  "compileOnSave": false,
  "enableIvy": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true,
    "sourceMap": true,
    "declaration": false,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "moduleResolution": "node",
    "importHelpers": true,
    "target": "es2017",
    "module": "es2020",
    "lib": [
      "es2018",
      "dom"
    ]
  },
  "angularCompilerOptions": {
    "enableI18nLegacyMessageIdFormat": false,
    "strictInjectionParameters": true,
    "strictInputAccessModifiers": true,
    "strictTemplates": true
  }
}

And then, .. angular.json

{
  "name": "acme-angular",
  "version": "0.0.0",
  "scripts": {
    "postinstall": "ngcc",
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~12.2.0",
    "@angular/cdk": "12.2.9",
    "@angular/common": "~12.2.0",
    "@angular/compiler": "~12.2.0",
    "@angular/core": "~12.2.0",
    "@angular/forms": "~12.2.0",
    "@angular/material": "12.2.9",
    "@angular/platform-browser": "~12.2.0",
    "@angular/platform-browser-dynamic": "~12.2.0",
    "@angular/router": "~12.2.0",
    "rxjs": "~6.6.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~12.2.9",
    "@angular/cli": "~12.2.9",
    "@angular/compiler-cli": "~12.2.0",
    "@types/jasmine": "~3.8.0",
    "@types/node": "^12.11.1",
    "jasmine-core": "~3.8.0",
    "karma": "~6.3.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.0.3",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "~1.7.0",
    "typescript": "~4.3.5"
  }
}

I am blocked here. I just see "Cannot GET /" in browser and the following error message in console whenever I run ng serve .

✔ Browser application bundle generation complete.

Initial Chunk Files | Names         |      Size
vendor.js           | vendor        |   3.18 MB
polyfills.js        | polyfills     | 128.51 kB
styles.css          | styles        |  77.91 kB
main.js             | main          |  10.67 kB
runtime.js          | runtime       |   6.63 kB

                    | Initial Total |   3.39 MB

Build at: 2021-10-10T22:37:36.829Z - Hash: 2b12f1f1a7825c5ab31d - Time: 7115ms

Error: node_modules/@angular/material/sidenav/drawer.d.ts:170: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/sidenav) which declares MatDrawerContainer 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.

170 export declare class MatDrawerContainer implements AfterContentInit, DoCheck, OnDestroy {

I've als updated angular, angular/material to latest version:

ng update @angular/core@12.2.9 @angular/cli@12.2.9 @angular/material@1
2.2.9
Using package manager: 'npm'
Collecting installed dependencies...
Found 25 dependencies.
Package '@angular/core' is already at '12.2.9'.
Package '@angular/cli' is already at '12.2.9'.
Package '@angular/material' is already at '12.2.9'.

I do not know if can help, ... my node version is v14.17.3 .

Answer 1

You can force run ngcc after each installation of node_modules or any thing that needs to be compiled with Angular compatibility compiler ( AKA ngcc ) by adding a postinstall like this in package.json

{
  "scripts": {
    "postinstall": "ngcc"
  }
}

Source: https://angular.io/guide/ivy