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!
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.
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.
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With