Not able to import "@angular/material" module

Question

I'm totally new to mean stack and I'm facing some problems with Angular's material module. I'm trying to import the "@angular/material" module in my code but I'm getting an error whenever I'm importing it. The error is as follows:

ERROR in src/app/app.module.ts:5:32 - error TS2306: File '/Users/anmolsarraf/Desktop/MEAN Stack/mean-course/node_modules/@angular/material/index
.d.ts' is not a module.

Here is my package.json file:

   {
  "name": "mean-course",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animation": "^4.0.0-beta.8",
    "@angular/animations": "~8.2.7",
    "@angular/cdk": "^9.0.0",
    "@angular/common": "~8.2.7",
    "@angular/compiler": "~8.2.7",
    "@angular/core": "~8.2.7",
    "@angular/forms": "~8.2.7",
    "@angular/material": "^9.0.0",
    "@angular/platform-browser": "~8.2.7",
    "@angular/platform-browser-dynamic": "~8.2.7",
    "@angular/router": "~8.2.7",
    "rxjs": "~6.4.0",
    "tslib": "^1.10.0",
    "zone.js": "~0.9.1"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.803.5",
    "@angular/cli": "~8.3.5",
    "@angular/compiler-cli": "~8.2.7",
    "@angular/language-service": "~8.2.7",
    "@types/node": "~8.9.4",
    "@types/jasmine": "~3.3.8",
    "@types/jasminewd2": "~2.0.3",
    "codelyzer": "^5.0.0",
    "jasmine-core": "~3.4.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.1.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~2.0.1",
    "karma-jasmine-html-reporter": "^1.4.0",
    "protractor": "~5.4.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.15.0",
    "typescript": "~3.5.3"
  }
}

Here is my app.module.ts file:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatInputModule } from '@angular/material/input';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { PostCreateComponent } from './posts/post-create/post-create.component';

@NgModule({
  declarations: [
    AppComponent,
    PostCreateComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule,
    BrowserAnimationsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

To be exact I'm trying to do import { MatInputModule } from '@angular/material'; and I'm getting the above-mentioned error.

I have tried importing the above module as import { MatInputModule } from '@angular/material/input'; but then it throws a bunch of error saying node_modules/@angular/material/input/input.d.ts:138:9 - error TS1086: An accessor cannot be declared in an ambient context.

Any help would be highly appreciated. Thanks!

UPDATE

I created a new instance of an Angular app and then tried to import angular material in it, somehow it worked since I'm not getting any errors while importing it. Thanks!

Yeah, I executed that command as well after adding it to my project, but no success :-( — AnonSar, Feb 09 '20 at 22:37
It might be due to `@angular/material` being v9 and Angular v8, but not entirely sure. Can you make sure the versions of Angular and Angular Material are the same? (remove node_modules, reinstall etc) — Phix, Feb 09 '20 at 23:07
Tried removing the node_modules and reinstalling it, but still no success with it. — AnonSar, Feb 09 '20 at 23:15

Arun · Answer 1 · 2020-04-27T17:43:20.607

Create one new module.ts file. for example, you can create material.module.ts and prepare all the material libraries in it like below

import { NgModule } from '@angular/core';
import { A11yModule } from '@angular/cdk/a11y';
import { ClipboardModule } from '@angular/cdk/clipboard';
import { DragDropModule } from '@angular/cdk/drag-drop';
import { PortalModule } from '@angular/cdk/portal';
import { ScrollingModule } from '@angular/cdk/scrolling';
import { CdkStepperModule } from '@angular/cdk/stepper';
import { CdkTableModule } from '@angular/cdk/table';
import { CdkTreeModule } from '@angular/cdk/tree';
import { MatAutocompleteModule } from '@angular/material/autocomplete';
import { MatBadgeModule } from '@angular/material/badge';
import { MatBottomSheetModule } from '@angular/material/bottom-sheet';
import { MatButtonModule } from '@angular/material/button';
import { MatButtonToggleModule } from '@angular/material/button-toggle';
import { MatCardModule } from '@angular/material/card';
import { MatCheckboxModule } from '@angular/material/checkbox';
import { MatChipsModule } from '@angular/material/chips';
import { MatStepperModule } from '@angular/material/stepper';
import { MatDatepickerModule } from '@angular/material/datepicker';
import { MatDialogModule } from '@angular/material/dialog';
import { MatDividerModule } from '@angular/material/divider';
import { MatExpansionModule } from '@angular/material/expansion';
import { MatGridListModule } from '@angular/material/grid-list';
import { MatIconModule } from '@angular/material/icon';
import { MatInputModule } from '@angular/material/input';
import { MatListModule } from '@angular/material/list';
import { MatMenuModule } from '@angular/material/menu';
import { MatNativeDateModule, MatRippleModule } from '@angular/material/core';
import { MatPaginatorModule } from '@angular/material/paginator';
import { MatProgressBarModule } from '@angular/material/progress-bar';
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
import { MatRadioModule } from '@angular/material/radio';
import { MatSelectModule } from '@angular/material/select';
import { MatSidenavModule } from '@angular/material/sidenav';
import { MatSliderModule } from '@angular/material/slider';
import { MatSlideToggleModule } from '@angular/material/slide-toggle';
import { MatSnackBarModule } from '@angular/material/snack-bar';
import { MatSortModule } from '@angular/material/sort';
import { MatTableModule } from '@angular/material/table';
import { MatTabsModule } from '@angular/material/tabs';
import { MatToolbarModule } from '@angular/material/toolbar';
import { MatTooltipModule } from '@angular/material/tooltip';
import { MatTreeModule } from '@angular/material/tree';

@NgModule({
  exports: [
    A11yModule,
    ClipboardModule,
    CdkStepperModule,
    CdkTableModule,
    CdkTreeModule,
    DragDropModule,
    MatAutocompleteModule,
    MatBadgeModule,
    MatBottomSheetModule,
    MatButtonModule,
    MatButtonToggleModule,
    MatCardModule,
    MatCheckboxModule,
    MatChipsModule,
    MatStepperModule,
    MatDatepickerModule,
    MatDialogModule,
    MatDividerModule,
    MatExpansionModule,
    MatGridListModule,
    MatIconModule,
    MatInputModule,
    MatListModule,
    MatMenuModule,
    MatNativeDateModule,
    MatPaginatorModule,
    MatProgressBarModule,
    MatProgressSpinnerModule,
    MatRadioModule,
    MatRippleModule,
    MatSelectModule,
    MatSidenavModule,
    MatSliderModule,
    MatSlideToggleModule,
    MatSnackBarModule,
    MatSortModule,
    MatTableModule,
    MatTabsModule,
    MatToolbarModule,
    MatTooltipModule,
    MatTreeModule,
    PortalModule,
    ScrollingModule
  ],
  imports: [
    A11yModule,
    ClipboardModule,
    CdkStepperModule,
    CdkTableModule,
    CdkTreeModule,
    DragDropModule,
    MatAutocompleteModule,
    MatBadgeModule,
    MatBottomSheetModule,
    MatButtonModule,
    MatButtonToggleModule,
    MatCardModule,
    MatCheckboxModule,
    MatChipsModule,
    MatStepperModule,
    MatDatepickerModule,
    MatDialogModule,
    MatDividerModule,
    MatExpansionModule,
    MatGridListModule,
    MatIconModule,
    MatInputModule,
    MatListModule,
    MatMenuModule,
    MatNativeDateModule,
    MatPaginatorModule,
    MatProgressBarModule,
    MatProgressSpinnerModule,
    MatRadioModule,
    MatRippleModule,
    MatSelectModule,
    MatSidenavModule,
    MatSliderModule,
    MatSlideToggleModule,
    MatSnackBarModule,
    MatSortModule,
    MatTableModule,
    MatTabsModule,
    MatToolbarModule,
    MatTooltipModule,
    MatTreeModule,
    PortalModule,
    ScrollingModule
  ]
})
export class MaterialModule { }

import this model in the app.module.ts

@NgModule({
  declarations: [
    AppComponent        
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule,       
    MaterialModule    
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Nice! Added the line to the imports: import { MatFormFieldModule } from '@angular/material/form-field'; — Valtoni Boaventura, May 30 '20 at 12:17
The problem is that vscode doesn't import when the folder is two or more deep. here is the thread that explains that. https://github.com/microsoft/TypeScript/issues/31763 — Natdrip, Aug 01 '21 at 05:10

score 10 · Answer 2 · answered Feb 09 '20 at 23:05

10

You need to be more specific:

import {MatInputModule} from '@angular/material/input';

not just

import {MatInputModule} from '@angular/material';

and then add it to your imports

answered Feb 09 '20 at 23:05

Syed Afzal

259
2
12

I tried that approach as well but no success. I have mentioned this approach above in my question, please refer to the question for more details. – AnonSar Feb 09 '20 at 23:13
try restarting angular. – Syed Afzal Feb 09 '20 at 23:24
unfortunately, no luck ! – AnonSar Feb 10 '20 at 05:12

Neha Prajapati · Answer 3 · 2021-06-28T08:36:35.660

6

I had also faced the same issue when I started using Angular Material for the first time and didn't know the installation process.

First, you need to install angular material by command:

npm install --save @angular/material

Then add angular material in your project with this command:

ng add @angular/material

For me, it started working by these two simple commands.

edited Jun 28 '21 at 08:36

answered Jun 25 '21 at 11:12

Neha Prajapati

111
2
3

flyingCode · Answer 4 · 2020-02-09T23:17:43.237

1

Did you run the command ng add @angular/material??

You can also try going through the angular material docs here: https://material.angular.io/guide/getting-started

Also, are you taking the mean course by Maximilian Schwarzmüller? If you're not too far into it, try seeing if you missed any steps (I'm guessing because the name "mean-course" is used for his project too :)

EDIT: In your imports module, you put the line import { MatInputModule } from '@angular/material/input'; but forgot to add it to your imports array :)

change it to this:


@NgModule({
  declarations: [
    AppComponent,
    PostCreateComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule,
    BrowserAnimationsModule,
    MatInputModule //new import
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Edit 2: if that still doesn't work, try running this command: ng update --next @angular/cli --force or updating typescript using npm install -g typescript@latest or npm update

edited Feb 09 '20 at 23:17

answered Feb 09 '20 at 22:43

flyingCode

132
2
10

I had a look at the documentation and I made sure to follow each every step mentioned in the documentation but unfortunately, I'm still getting the error. And yes I'm taking the mean course by Maximilian Schwarzmüller. I have reviewed the video several times to make sure I followed each and every step but unfortunately, nothing worked. – AnonSar Feb 09 '20 at 22:50
I actually have that course too, what a coincidence! I'm not sure if stack overflow gives you a notification whenever an answer gets edited but I think the issue is in your app.module.ts – flyingCode Feb 09 '20 at 23:03
Tried making the changes that you have mentioned above, but still, it's throwing me the following error: ' node_modules/@angular/material/input/input.d.ts:138:9 - error TS1086: An accessor cannot be declared in an ambient context ' – AnonSar Feb 09 '20 at 23:10
have you tried upgrading typescript? also try checking the comment section of your course, sometimes people have the same issue there and Max usually replies and helps them solve it. – flyingCode Feb 09 '20 at 23:18

score 1 · Answer 5 · answered Sep 01 '20 at 07:11

Seems there are so many version mismatch in your package.json.

Can your try ng update , then you will see something like this:

Using package manager: 'npm'
Collecting installed dependencies...
Found 80 dependencies.
We analyzed your package.json, there are some packages to update:

  Name                                Version                  Command to update
 ---------------------------------------------------------------------------------
  @angular/cdk                        7.3.7 -> 10.1.3          ng update @angular/cdk
  @angular/cli                        8.3.25 -> 10.0.8         ng update @angular/cli
  @angular/core                       8.2.14 -> 10.0.14        ng update @angular/core
  @ngrx/store                         7.4.0 -> 10.0.0          ng update @ngrx/store
  rxjs                                6.5.4 -> 6.6.2           ng update rxjs

Then please update the required dependencies

score 1 · Answer 6 · answered Nov 26 '20 at 21:25

1

First make sure you imported material using ng add @angular/material, then just right click on your project, reload from disk and error will go away..

answered Nov 26 '20 at 21:25

Khaoula Arfaoui

75
11

Eng_Farghly · Answer 7 · 2022-10-13T02:12:51.123

Because Angular/material version is higher than 8.0.0 and you should be more specific.

If you open node_modules/@angular folder and go to material folder, the components is organized into folders and to use it write component name after material/

Note: IF you didn't found material folder, you should install @angular/material package first :

npm install --save @angular/material

And to use Input material that version is higher than 8 will be write component name after material/ for example:

import {MatInputModule} from '@angular/material/input';

If the Angular/material version is less than or equal 8.0.0 the import will be like the next format:

import {MatInputModule} from '@angular/material';

score 0 · Answer 8 · answered Jun 05 '20 at 07:33

I had the same issue as the OP. I could not pin point the cause but I believe it may have been an issue with the package manager adding conflicting versions of the Material package. I recently switched to using PNPM over NPM. I first started to see this issue after running pnpm install @angular/material. The package installed successfully but I had the errors the OP had above whenever I ran the server, ng serve. Like the OP I tried all the suggestions but none worked. I even tried installing the specific version of Material that worked previously pnpm i @angular/material@8.2.3 but that didn't work either.

What worked was globally setting PNPM as my package manager in the Anglar CLI configurations.

ng config -g cli.packageManager pnpm // Set PNPM globally
ng config cli.packageManager pnpm    // Set PNPM for single project
ng config -g cli.packageManager npm  // Set NPM globally, default

Afterwards, I created a new project and installed the Material package using ng add @angular/material. It took a while but it everything installed successfully. In both instances PNMP was used instead of NPM. I was also able to import the Material modules using the old syntax.

import {MatCardModule, MatIconModule, MatToolbarModule} from '@angular/material'

score 0 · Answer 9 · answered Feb 02 '21 at 05:48

0

For me, it resolved by importing the MatInputModule from '@angular/material/input'.

import {MatInputModule} from '@angular/material/input';

answered Feb 02 '21 at 05:48

Kapil Das

1

Not able to import "@angular/material" module

9 Answers9