typescript - kan ikke finne modul "@angular/material"

Jeg bruker Angular 2. Når jeg prøver å importere "@angular/material" får jeg en feil for dette. Jeg importerer pakker slik:

import {MdDialog} from "@angular/material";
import {MdDialogRef} from "@angular/material";

Min tsconfig.json-fil ser slik ut:

{
 "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"
]
}
}

Min package.json-kode:

{
 "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"
}
}

Svar #1

Følg disse trinnene for å begynne å bruke Angular Material.

Trinn 1: Installer Angular Material

npm install --save @angular/material

Trinn 2: Animasjoner

Noen Material-komponenter er avhengige av Angular animations-modulen for å kunne gjøre mer avanserte overganger. Hvis du vil at disse animasjonene skal fungere i appen din, må du installere @angular/animations-modulen og inkludere BrowserAnimationsModule i appen din.

npm install --save @angular/animations

Da

import {BrowserAnimationsModule} from '@angular/platform browser/animations';

@NgModule({
...
  imports: [BrowserAnimationsModule],
...
})
export class PizzaPartyAppModule { }

Trinn 3: Importer komponentmodulene

Importer NgModule for hver komponent du ønsker å bruke:

import {MdButtonModule, MdCheckboxModule} from '@angular/material';

@NgModule({
...
imports: [MdButtonModule, MdCheckboxModule],
...
 })
 export class PizzaPartyAppModule { }

sørg for å importere Angular Material-modulene etter Angulars BrowserModule, siden importrekkefølgen er viktig for NgModules

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';

import {MdCardModule} from '@angular/material';
@NgModule({
    declarations: [
        AppComponent,
        HeaderComponent,
        HomeComponent
    ],
    imports: [
        BrowserModule,
        FormsModule,
        HttpModule,
        MdCardModule
    ],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule { }

Trinn 4: Inkluder et tema

Å inkludere et tema er påkrevd for å bruke alle kjerne- og temastiler på applikasjonen din.

For å komme i gang med et ferdiglaget tema, inkluder følgende i appens index.html:

<link href="../node_modules/@angular/material/prebuilt-themes/indigo-pink.css" rel="stylesheet">

Svar #2

Det var det som løste dette problemet for meg.

Jeg brukte:

npm install --save @angular/material @angular/cdk
npm install --save @angular/animations

men INNE I PROGRAMMETS MAPPE.

Kilde: https://medium.com/@ismapro/first-steps-with-angular-cli-and-angular-material-5a90406e9a4

Relaterte artikler