Error importing Angular Material Module

Question

im trying to add Angular Material to my Angular project but always getting this particular error.

Here is the error on VSC Terminal

I've already added

import {MatDialogModule} from '@angular/material/dialog'

@NgModule({
  declarations: [
   ...
  ],
  imports: [
   ...
   MatDialogModule

into my app.module.ts

And here i am wondering what did i do wrong when every time i tried importing the material module, the error says all other module is not found

codeshare.io/29VZ74 here, i already tried npm install @angular/material --save , or adding dependencies manually to package json. Edited because i pressed enter prematurely — Chandra Giffary
– Chandra Giffary, Commented Jun 6, 2018 at 5:48
I can't access your link kindly update your question with your package.json — Vikas
– Vikas, Commented Jun 6, 2018 at 5:50
Mate if your angular version is 5 then use the same material version see this They have provided a working stackblitz check out the dependency section and adjust your package.json accordinly else if your angular version is 6 check this and do the same — Vikas
– Vikas, Commented Jun 6, 2018 at 6:35
You can install specific version of material npm install --save @angular/[email protected] and npm install --save @angular/[email protected] — Vikas
– Vikas, Commented Jun 6, 2018 at 8:32

Vikas · Accepted Answer · 2018-06-06 05:48:58Z

1

you need to install material module npm install --save @angular/material @angular/cdk then declare in your app.module.ts file like below

import {MatDialogModule} from "@angular/material";

@NgModule({
    declarations: [
        ...
        CourseDialogComponent
    ],
    imports: [
        ...
        MatDialogModule
    ],
    providers: [
       ...
    ],
    bootstrap: [AppComponent],
    entryComponents: [CourseDialogComponent]
})
export class AppModule {
}

edited Jun 6, 2018 at 5:48

Vikas

12.1k7 gold badges49 silver badges71 bronze badges

answered Jun 6, 2018 at 5:47

mittal bhatt

1,0097 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Chandra Giffary Over a year ago

I already done that. Im sorry i didnt put enough information to my question

mittal bhatt Over a year ago

you may get reffrence from here stackblitz.com/edit/dialog-example?file=app%2Fapp.module.ts

Chandra Giffary Over a year ago

Turns out when i tried to npm install --save @angular/material , the npm shows npm WARN @angular/[email protected] requires a peer of @angular/core@>=6.0.0-beta.0 <7.0.0 but none is installed. You must install peer dependencies yourself.. Does this mean i need to update my angular version to v.6? Is there a way i install the material module to match my current Angular version, since im afraid if i update my Angular version some of my code is not working

mittal bhatt Over a year ago

which version you use for angular?

Chandra Giffary · Accepted Answer · 2018-06-06 08:11:46Z

1

Alright it seems @Vikas has answered my question in the comment section. Turns out when im installing my material module through npm it automatically trying to install the latest version of the material module. In my case it didnt work because im still using angular 5 when the npm trying to install angular material v6^. Hence why this warning appears in the terminal after im trying to install it through npm >> npm WARN @angular/[email protected] requires a peer of @angular/core@>=6.0.0-beta.0 <7.0.0 but none is installed. You must install peer dependencies yourself.

answered Jun 6, 2018 at 8:11

Chandra Giffary

331 silver badge4 bronze badges

Collectives™ on Stack Overflow

Error importing Angular Material Module

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related