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

Answer 2

角度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~4.3.3中添加角度材质

2 个答案: