Wie Winkelmaterial in Angular ~ 4.3.3

Question

Ich erhalte die folgende Fehlermeldung hinzufügen, wenn ich @angular/material und @angular/cdk:

http://localhost:3000/@angular/cdk/observe-content (404) Not found error

systemjs.config.js

map: { 
     ... 

    // Angular Material 
    '@angular/material': 'npm:@angular/material/bundles/material.umd.js', 

    // CDK individual packages 
    '@angular/cdk/platform': 'npm:@angular/cdk/bundles/cdk-platform.umd.js', 
    '@angular/cdk/a11y': 'npm:@angular/cdk/bundles/cdk-a11y.umd.js', 
} 

materialmodule.ts

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

@NgModule({ 
    imports: [ 
     MdButtonModule, 
     MdButton 
    ], 
    exports: [ 
     MdButtonModule, 
     MdButton 
    ] 
}) 
export class CustomMaterialModule { } 

app.component.ts

import { NgModule }  from '@angular/core'; 
import { BrowserModule } from '@angular/platform-browser'; 
import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; 
import { AppComponent } from './app.component'; 
import {CustomMaterialModule} from './materialmodule/material.module'; 
@NgModule({ 
    imports: [ 
     BrowserModule, 
     BrowserAnimationsModule, 
     CustomMaterialModule 
    ], 
    declarations: [ AppComponent ], 
    bootstrap: [ AppComponent ] 
}) 
export class AppModule { } 

Was von meinem Code fehlt, die den Fehler verursacht, wie oben angegeben?

Answer 1

Wenn Sie so aussehen, müssen Sie den cdk/observe-content Eintrag zu Ihrem systemjs.config.js hinzufügen. Hier ist eine Liste der Pakete, die sie bedienen, tut nicht weh, sie hinzuzufügen, nur um sicher zu sein. Es ist seltsam aber, dass ihre Dokumentation sagt nur platform und a11y hinzuzufügen, aber ich denke, je nachdem, welche Art von Material Modul, das Sie verwenden, müssen Sie ein Import bestimmter cdk:

'@angular/material': 'dist/bundles/material.umd.js', 
'@angular/cdk': 'dist/bundles/cdk.umd.js', 
'@angular/cdk/a11y': 'dist/bundles/cdk-a11y.umd.js', 
'@angular/cdk/bidi': 'dist/bundles/cdk-bidi.umd.js', 
'@angular/cdk/coercion': 'dist/bundles/cdk-coercion.umd.js', 
'@angular/cdk/keyboard': 'dist/bundles/cdk-keyboard.umd.js', 
'@angular/cdk/observe-content': 'dist/bundles/cdk-observe-content.umd.js', 
'@angular/cdk/platform': 'dist/bundles/cdk-platform.umd.js', 
'@angular/cdk/portal': 'dist/bundles/cdk-portal.umd.js', 
'@angular/cdk/rxjs': 'dist/bundles/cdk-rxjs.umd.js', 
'@angular/cdk/table': 'dist/bundles/cdk-table.umd.js', 
'@angular/cdk/testing': 'dist/bundles/cdk-testing.umd.js', 

Wenn Sie vorhaben, nur zu verwenden Ihre CustomMaterialModule als ein Fass sollten Sie nur die Module exportieren Sie (nicht die Komponenten) benötigen, keine Notwendigkeit, sie importieren:

@NgModule({ 
    exports: [ 
    MdButtonModule 
    ] 
}) 
export class CustomMaterialModule {} 

Answer 2

Version für Winkel 4.3

 '@angular/cdk': 'npm:@angular/cdk/bundles/cdk.umd.js', 
     '@angular/cdk/a11y': 'npm:@angular/cdk/bundles/cdk-a11y.umd.js', 
     '@angular/cdk/bidi': 'npm:@angular/cdk/bundles/cdk-bidi.umd.js', 
     '@angular/cdk/coercion': 'npm:@angular/cdk/bundles/cdk-coercion.umd.js', 
     '@angular/cdk/collections': 'npm:@angular/cdk/bundles/cdk-collections.umd.js', 
     '@angular/cdk/keycodes': 'npm:@angular/cdk/bundles/cdk-keycodes.umd.js', 
     '@angular/cdk/observers': 'npm:@angular/cdk/bundles/cdk-observers.umd.js', 
     '@angular/cdk/overlay': 'npm:@angular/cdk/bundles/cdk-overlay.umd.js', 
     '@angular/cdk/platform': 'npm:@angular/cdk/bundles/cdk-platform.umd.js', 
     '@angular/cdk/portal': 'npm:@angular/cdk/bundles/cdk-portal.umd.js', 
     '@angular/cdk/rxjs': 'npm:@angular/cdk/bundles/cdk-rxjs.umd.js', 
     '@angular/cdk/table': 'npm:@angular/cdk/bundles/cdk-table.umd.js', 
     '@angular/cdk/scrolling': 'npm:@angular/cdk/bundles/cdk-scrolling.umd.js',