[英]Material 2 - how to let md-icon work in SystemJS project?
Have Material 2 SystemJS based project. 有基于Material 2 SystemJS的项目。
Material 2 is installed in this way: 物料2以这种方式安装:
npm install --save @angular/material
Then it's wired up in SystemJS config: 然后将其连接到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',
...
Specifying the icon set in index.html
: 指定在
index.html
设置的图标:
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"/>
Setting up the MdIconRegistry
: 设置
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');
}
}
Then it's used inside AppComponent
: 然后在
AppComponent
内部AppComponent
:
<md-icon fontSet="material">home</md-icon>
But it doesn't work due these JS errors: 但是由于这些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
Worth to say, the same configuration works fine in the project made using Angular CLI. 值得一提的是,相同的配置在使用Angular CLI进行的项目中效果很好。
How to let the md-icon
work in SystemJS project? 如何让
md-icon
在SystemJS项目中工作?
To use the default icon font (with SystemJS) just do the following (it works for me): 要使用默认图标字体(与SystemJS一起使用),只需执行以下操作(它对我有用):
<md-icon>home</md-icon>
You don't need to use MdIconRegistry according to the docs : 您无需根据docs使用MdIconRegistry:
As an aside, the error you are getting is caused by this line: 顺便说一句,您得到的错误是由以下行引起的:
import { MdIconRegistry } from '@angular/material/icon';
It should just be: 应该只是:
import { MdIconRegistry } from '@angular/material';
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.