MatToolbar throws error when using it with Angular 9

Question

Angular version 9.2.0

When I import the MatToolbarModule in a module and use it in the html template, then I get the following error message:

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.
8 export declare class MatToolbarModule {
                       ~~~~~~~~~~~~~~~~
src/app/angular-material.module.ts:53:14 - error NG6002: Appears in the NgModule.imports of ComponentsModule, but itself has errors

Does anyone face the same issue?

score 100 · Accepted Answer · edited Feb 08 '21 at 13:41

100

Add below specific configuration in package.json and npm install.

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

Reference: https://angular.io/guide/ivy#speeding-up-ngcc-compilation

edited Feb 08 '21 at 13:41

Sathiamoorthy

8,831
9
65
77

answered May 28 '20 at 13:43

Rakesh

1,056
1
5
3

4

I have fixed it without the ngcc. I am working with Angular 9 and during the npm i material he took the version 10 of angular/material. I have changed from npm i into ng add angular/material and then it worked. – TheCoderGuy Jul 15 '20 at 15:24
2

For me it worked , just closed the running instance , npm install and done... – Nasir Shah Sep 29 '20 at 09:16
2

Appreciate adding the link to the docs so we're not just blindly changing the project config! – Kurtis Jungersen Oct 14 '20 at 20:19
Another one possibility will be to update Angular 9 to 11 : https://update.angular.io/?v=9.1-11.0 It work perfectly : Just take in account first step for this upgrade : *Before Updating* If you depend on many Angular libraries you may consider speeding up your build by invoking the ngcc (Angular Compatibility Compiler) in an npm postinstall script via small change to your package.json. – Vifier Lockla Jan 31 '21 at 13:09
The better solution here is noted in @TheCoderGuy comment using "ng add angular/material". This maintains the version number and compatibility and sets up any dependencies needed all while fulfilling this bug reported – thxmike Jun 17 '23 at 00:13

score 90 · Answer 2 · edited Sep 30 '20 at 06:01

90

I had the same problem before, its because you modify your app.module.ts file while the server is running. Try to stop it and then run it again using the ng servecommand.

edited Sep 30 '20 at 06:01

Anurag Srivastava

14,077
4
33
43

answered May 21 '20 at 15:20

Ramzi Bouchair

915
5
7

I was having the same issue with MatListModule and stop/restart server was the solution – Juanpa Oct 09 '20 at 14:42
2

Anybody have an idea why this necessary? It works for me, but I hate when "have you tried turning it off and on again?" solves the issue with no insight as to the true problem. Not faulting the answer btw (I upvoted) but just curious more than anything. – Kurtis Jungersen Oct 23 '20 at 20:01
doing this alone wasn't enough for me. i had to also remove `node_modules`, and run `yarn` again – zwessels Jan 09 '22 at 20:53

score 70 · Answer 3 · answered Sep 09 '20 at 09:40

70

This used to happen to me whenever I imported 'MatToolbar' 'MatDialog' instead of 'MatToolbarModule' or 'MatDialogModule'.

answered Sep 09 '20 at 09:40

ChrisOdney

6,066
10
38
48

1

Yes we have to import module that contains component and not component directly. – Vifier Lockla Jan 31 '21 at 13:43
1

This was it. I've imported MatSnackBar instead of MatSnackBarModule – Vlad Lego May 31 '21 at 16:23
Yes that helped well, ut what about MatDataSource, it doesn't have module and says datasource is not a table – aniran mohammadpour Jan 20 '22 at 16:13

score 11 · Answer 4 · edited Jan 21 '22 at 11:45

11

I faced similar problem with MatDatePicker. The problem was that I had imported MatDatepicker instead of importing MatDatepickerModule in the app.module.ts file.

So, check that you have imported MODULE not Component in your module file.

edited Jan 21 '22 at 11:45

glenatron

11,018
13
64
112

answered Aug 03 '21 at 12:46

GAURAV JOSHI

659
8
7

score 4 · Answer 5 · answered Sep 08 '20 at 10:22

4

I found an error in imports section, i've added unexisting item.

import { MatMenuItem } from '@angular/material/menu';

and MatMenut item doesn't exist, i changed in MatMenuModule and after works

answered Sep 08 '20 at 10:22

iugs88

971
10
9

score 4 · Answer 6 · answered Nov 25 '20 at 02:43

4

So I was just having a similar issue, and I was able to fix it by rearranging my import modules.

In my case, I was calling LoadingBarRouterModule before the main module LoadingBarModule. Check to see if you are loading the MatToolbarModule module before another required module and move it below that.

answered Nov 25 '20 at 02:43

Asitha De Silva

183
1
13

I moved my material module imports to the top of all imports in-app.module.ts file and it worked. – shashank Dec 01 '20 at 21:33

score 1 · Answer 7 · answered Jan 20 '21 at 08:08

Maybe the selected answer could not be the correct one because you may want bundle the dependency when you are building the application.

From https://angular.io/guide/ivy#speeding-up-ngcc-compilation

In version 9, the server builder which is used for App shell and Angular Universal has the bundleDependencies option enabled by default. If you opt-out of bundling dependencies you will need to run the standalone Angular compatibility compiler (ngcc).

I'm opting of restarting the server everytime i'm adding a material component into AppModule. But if i'm wrong, please let me know.

score 1 · Answer 8 · answered Mar 05 '22 at 17:43

1

Here to me was because I forgot import a module.ts, and the console did not show about it. so, I only imported it and the angular worked ok. You can review all your modules.ts if there are some error with imports.

answered Mar 05 '22 at 17:43

Hoiama Rodrigues

318
4
4

score 0 · Answer 9 · answered Apr 07 '20 at 11:44

0

I solved it by removing the node_modules and reinstalled it.

Complete discussion here: https://github.com/angular/components/issues/18637

answered Apr 07 '20 at 11:44

Ling Vu

4,740
5
24
45

score 0 · Answer 10 · edited Jul 20 '20 at 06:07

0

I imported some classes(FormControl, FormGroup, Validators) which are not modules in app.module.ts
I removed those classes and it solved my problem.

edited Jul 20 '20 at 06:07

Yunnosch

26,130
9
42
54

answered Jul 20 '20 at 05:58

tung yu

94
4

score 0 · Answer 11 · answered Aug 14 '20 at 12:12

0

What worked for me is importing the whole module for MatToolbar.

import {MatToolbarModule} from '@angular/material/toolbar';

And then adding MatToolbarModule to the imports[] array in my app.module.ts.

answered Aug 14 '20 at 12:12

NobodySomewhere

2,997
1
16
12

score 0 · Answer 12 · answered Oct 02 '20 at 02:41

0

stop your angular service (if you use command prompt or powershell ctrl + c) and run again(ng serve)

answered Oct 02 '20 at 02:41

hamed

85
1
10

1

If you read carefully, you can see that there is already the same answer. – Ling Vu Oct 02 '20 at 09:35

score 0 · Answer 13 · answered May 07 '21 at 08:51

0

For me it was due to unused (or rather broken) ValueAccessors – removing them fixed this.

answered May 07 '21 at 08:51

Nurseiit A

1

MatToolbar throws error when using it with Angular 9

13 Answers13

Linked