after upgrading to angular 12, all material components are "not a known element"

Question

After upgrading to Angular 12, although I have all the required code in app.module.ts, all the material tags are not recognized: for example, for mat-checkbox, I have the following in app.module.ts

import { MatCheckboxModule } from '@angular/material/checkbox';

@NgModule({
    imports: [
    BrowserModule,  
    MatCheckboxModule,

and at execution:

'mat-checkbox' is not a known element:

1. If 'mat-checkbox' is an Angular component,then verify that it is part of this module.
2. If 'mat-checkbox' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component

And same problem for all the material tags (mat-icon, mat-table, mat-label . . .).

In previous version (Angular 9), all was OK. Thanks for help.

Seductress

The same thing is also happening to me. Did you manage to solve this issue? – Fistula

If I remember correctly, I had to drop all material component from my login component. For example, when mat-card was in my login component, the compilation failed. – Seductress

In my case there was a "Base component" which all other components extend - but this BaseComponent was annotated with @Injectable() and on angular 12 this doesn't work anymore. I changed it to @Component({template:""}) and that solved the issue. – Fistula

Answer 1

Note 1 (fatal problem)

You are using lazy loading. somewhere in your project, you have the old syntax of lazy loading

{
  ...
  loadChildren: 'path/to/your.module#YourModule'
}

Replace all of them in your project to:

{
  ...
  loadChildren: () => import('path/to/your.module').then(m => m.YourModule)
}

Even if you think it is not related to your current feature. After doing this the problem will be solved.

Note2:

Also during the upgrade to Angular12 if some npm packages are broken you can use

npm i --save package-name --force

to install it for now.

Note3:

Also if you see some bugs in the ts files you can suppress(ignore) them by using // @ts-ignore on top of the error line for now.

Note4

Also if you see an error like "Class is using Angular features but is not decorated. Please add an explicit Angular decorator".

add @Injectable() on top of the class declaration.

Note5

In my idea, If You are upgrading from an older version of angular to angular 12. For doing this first create a project with ng new APP_NAME --strict=false which you don't have a strict mode for now. When all problems are solved and you have a working project now you can create a new project which has strict mode.

Chesterton

Answer 2

i am assuming you are having lazy loaded modules.

if yes,

create a shared module,

import and export all material module in shared module,

import the shared module in root (app) module and feature (lazy loaded) modules.

if no, then what you have done was right, i guess.

Ignore