如何在Angular~4.3.3中添加角度材质

Question

当我使用@angular/material和时,我收到以下错误@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 { }

我的代码中缺少什么导致上述错误？

Answer 1

根据它的外观,您需要将cdk/observe-content条目添加到您的systemjs.config.js.这是他们服务的软件包列表,并不会因为安全而添加它们.这是奇怪的,虽然他们的文档只是说加platform和a11y,但我想这取决于什么样的,你使用的材料模块,你必须输入一定的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',

如果你只是想用你CustomMaterialModule的桶作为桶,你应该只导出你需要的模块(而不是组件),不需要导入它们:

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