0

Material 2 SystemJS ベースのプロジェクトがあります。

マテリアル 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-iconSystemJS プロジェクトで作業するにはどうすればよいですか?

4

1 に答える 1

1

デフォルトのアイコンフォントを（SystemJSで）使用するには、次のようにします（私にとってはうまくいきます）：

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

docsに従って MdIconRegistry を使用する必要はありません:

ここに画像の説明を入力

余談ですが、取得しているエラーは次の行が原因です。

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

次のようにする必要があります。

import { MdIconRegistry } from '@angular/material';
于 2016-11-20T18:54:24.313 に答える