材料 2 - 如何让 md-icon 在 SystemJS 项目中工作？答案

【问题标题】：Material 2 - how to let md-icon work in SystemJS project?材料 2 - 如何让 md-icon 在 SystemJS 项目中工作？
【发布时间】：2016-11-20 15:20:55
【问题描述】：

拥有基于 Material 2 SystemJS 的项目。

Material 2是这样安装的：

npm install --save @angular/material

然后在 SystemJS 配置中连接起来：

...
'@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
'@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
'@angular/material': 'npm:@angular/material/material.umd.js', <-- material 2
'@angular/http': 'npm:@angular/http/bundles/http.umd.js',
...

指定index.html中设置的图标：

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"/>

设置MdIconRegistry：

...
import { MaterialModule } from '@angular/material';
import { MdIconRegistry } from '@angular/material/icon';

@NgModule({
    imports: [ BrowserModule, MaterialModule.forRoot() ],
    declarations: [ AppComponent ],
    providers: [ MdIconRegistry ],
    bootstrap: [ AppComponent ],
    schemas: [ CUSTOM_ELEMENTS_SCHEMA ]
})
export class AppModule {
    constructor(mdIconRegistry: MdIconRegistry) {
        mdIconRegistry.registerFontClassAlias('material', 'material-icons');
    }
}

然后在AppComponent内部使用：

<md-icon fontSet="material">home</md-icon>

但由于这些 JS 错误，它不起作用：

zone.js:1382 GET http://localhost:8080/node_modules/@angular/material/material.umd.js/icon 404 ()
Error: (SystemJS) XHR error (404) loading http://localhost:8080/node_modules/@angular/material/material.umd.js/icon

值得一提的是，相同的配置在使用 Angular CLI 制作的项目中运行良好。

如何让md-icon在SystemJS项目中工作？

【问题讨论】：

标签： angular systemjs angular-material2

【解决方案1】：

要使用默认图标字体（使用 SystemJS），只需执行以下操作（它适用于我）：

<md-icon>home</md-icon>

你不需要按照docs使用MdIconRegistry：

顺便说一句，你得到的错误是由这一行引起的：

import { MdIconRegistry } from '@angular/material/icon';

应该是：

import { MdIconRegistry } from '@angular/material';

【讨论】：