如何在Angular中添加angular material~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，但我想根据您使用的 material 模块类型，您必须导入某个 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 {}

Answer 2

angular 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',

如何在Angular中添加angular material~4.3.3

How to add angular material in Angular ~4.3.3

angular-material2

angular