I'm using Angular 2. When I'm trying to import "@angular/material" i'm getting error for this. I'm importing packages like:
import {MdDialog} from "@angular/material";
import {MdDialogRef} from "@angular/material";
My tsconfig.json file like:
{
"compilerOptions": {
"baseUrl": "",
"declaration": false,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"lib": ["es6", "dom"],
"mapRoot": "./",
"module": "es6",
"moduleResolution": "node",
"outDir": "../dist/out-tsc",
"sourceMap": true,
"target": "es5",
"typeRoots": [
"../node_modules/@types"
]
}
}
My package.json code:
{
"name": "rmc-temporary",
"version": "0.0.0",
"license": "MIT",
"angular-cli": {},
"scripts": {
"start": "ng serve",
"lint": "tslint \"src/**/*.ts\"",
"test": "ng test",
"pree2e": "webdriver-manager update",
"e2e": "protractor"
},
"private": true,
"dependencies": {
"@angular/common": "2.2.1",
"@angular/compiler": "2.2.1",
"@angular/core": "2.2.1",
"@angular/forms": "2.2.1",
"@angular/http": "2.2.1",
"@angular/platform-browser": "2.2.1",
"@angular/platform-browser-dynamic": "2.2.1",
"@angular/router": "3.2.1",
"core-js": "^2.4.1",
"rxjs": "5.0.0-beta.12",
"ts-helpers": "^1.1.1",
"zone.js": "^0.6.23"
},
"devDependencies": {
"@angular/compiler-cli": "2.2.1",
"@types/jasmine": "2.5.38",
"@types/node": "^6.0.42",
"angular-cli": "1.0.0-beta.21",
"codelyzer": "~1.0.0-beta.3",
"jasmine-core": "2.5.2",
"jasmine-spec-reporter": "2.5.0",
"karma": "1.2.0",
"karma-chrome-launcher": "^2.0.0",
"karma-cli": "^1.0.1",
"karma-jasmine": "^1.0.2",
"karma-remap-istanbul": "^0.2.1",
"protractor": "4.0.9",
"ts-node": "1.2.1",
"tslint": "3.13.0",
"typescript": "~2.0.3",
"webdriver-manager": "10.2.5"
}
}
This question is related to
angular
typescript
That's what solved this problem for me.
I used:
npm install --save @angular/material @angular/cdk
npm install --save @angular/animations
but INSIDE THE APPLICATION'S FOLDER.
Source: https://medium.com/@ismapro/first-steps-with-angular-cli-and-angular-material-5a90406e9a4
Please check Angular Getting started :)
and enjoy the {{Angular}}
import {MatButtonModule} from '@angular/material/button';
I followed each of the suggestions here (I'm using Angular 7), but nothing worked. My app refused to acknowledge that @angular/material existed, so it showed an error on this line:
import { MatCheckboxModule } from '@angular/material';
Even though I was using the --save
parameter to add Angular Material to my project:
npm install --save @angular/material @angular/cdk
...it refused to add anything to my "package.json
" file.
I even tried deleting the package-lock.json
file, as some articles suggest that this causes problems, but this had no effect.
To fix this issue, I had to manually add these two lines to my "package.json
" file.
{
"devDependencies": {
...
"@angular/material": "~7.2.2",
"@angular/cdk": "~7.2.2",
...
What I can't tell is whether this is an issue related to using Angular 7, or if it's been around for years....
Found this post: "Breaking changes" in angular 9. All modules must be imported separately. Also a fine module available there, thanks to @jeff-gilliland: https://stackoverflow.com/a/60111086/824622
Source: Stackoverflow.com