Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Not able to import "@angular/material" module

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!

like image 973
AnonSar Avatar asked Feb 09 '20 22:02

AnonSar


People also ask

Can I import module in component angular?

You can put commonly used directives, pipes, and components into one module and then import just that module wherever you need it in other parts of your application.

How do you use angular materials in angular 8?

Open command prompt and go to project root folder. Angular CLI will ask certain question regarding theme, gesture recognition and browser animations. Select your any theme of your choice and then answer positively for gesture recognition and browser animation. Run the application and test the page.


1 Answers

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

like image 63
Syed Afzal Avatar answered Sep 28 '22 08:09

Syed Afzal