コードで Angular Material を使用しようとすると、次のエラーが発生します。
zone.js:101 GET http://localhost:3000/traceur 404 (見つかりません)scheduleTask @ zone.js:101ZoneDelegate.scheduleTask @ zone.js:345Zone.scheduleMacroTask @ zone.js:282(匿名関数) @ zone. js:122send @ VM437:3fetchTextFromURL @ system.src.js:1156(匿名関数) @ system.src.js:1739ZoneAwarePromise @ zone.js:607(匿名関数) @ system.src.js:1738(匿名関数) @ system.src.js:2764(匿名関数) @ system.src.js:3338(匿名関数) @ system.src.js:3605(匿名関数) @ system.src.js:3990(匿名関数) @ system. src.js:4453(匿名関数) @ system.src.js:4705(匿名関数) @ system.src.js:408ZoneDelegate.invoke @ zone.js:332Zone.run @ zone.js:225(匿名関数) @ zone.js:591ZoneDelegate.invokeTask @ zone.js:365Zone.runTask @ zone.js:265drainMicroTaskQueue @ zone.js:497ZoneTask.invoke @ zone.js:437
login:15 エラー: エラー: XHR エラー (404 Not Found) http://localhost:3000/traceur の読み込み中
XMLHttpRequest.wrapFn [_onreadystatechange として] (http://localhost:3000/node_modules/zone.js/dist/zone.js:794:30) で
ZoneDelegate.invokeTask (http://localhost:3000/node_modules/zone.js/dist/zone.js:365:38) で
Zone.runTask (http://localhost:3000/node_modules/zone.js/dist/zone.js:265:48) で
XMLHttpRequest.ZoneTask.invoke (http://localhost:3000/node_modules/zone.js/dist/zone.js:433:34) で
http://localhost:3000/traceur のロード中にエラーが発生しました
http://localhost:3000/app/assets/js/app.module から http://localhost:3000/node_modules/@angular2-material/button/button.js を "@angular2-material/button" としてロード中にエラーが発生しました。 js(匿名関数) @ login:15ZoneDelegate.invoke @ zone.js:332Zone.run @ zone.js:225(匿名関数) @ zone.js:591ZoneDelegate.invokeTask @ zone.js:365Zone.runTask @ zone.js: 265drainMicroTaskQueue @ zone.js:497ZoneTask.invoke @ zone.js:437
以下はコードです:
app.component.ts:
import { Component, ViewEncapsulation } from '@angular/core';
import { MdButton } from '@angular2-material/button';
@成分（{
セレクター: 'myApp',
templateUrl: './app/app.html',
styleUrls: ['./app/app.css'],
カプセル化: ViewEncapsulation.None
}))
輸出クラス AppComponent {
}
app.module.ts:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { MdButtonModule } from '@angular2-material/button';
import { routing, appRoutingProviders } from './app.routing';
import { AppComponent } from './app.component';
import { LoginModule } from './login/login.module';
import { HomeModule } from './home/home.module';
import { ItemsModule } from './items/items.module';
import { MoviesModule } from './movies/movies.module';
@NgModule({
インポート: [ BrowserModule, FormsModule, HttpModule, MdButtonModule, routing, LoginModule, HomeModule, ItemsModule, MoviesModule ],
宣言: [ AppComponent ],
プロバイダー: [ appRoutingProviders ],
ブートストラップ: [AppComponent],
}))
エクスポート クラス AppModule {}
app.routing.ts:
import { ModuleWithProviders } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
const appRoutes: Routes = [];
const appRoutingProviders のエクスポート: any[] = [];
const ルーティングのエクスポート: ModuleWithProviders = RouterModule.forRoot(appRoutes);
main.ts:
'@angular/platform-browser-dynamic' から {platformBrowserDynamic} をインポートします。
import { AppModule } from './app.module';
const プラットフォーム = platformBrowserDynamic();
platform.bootstrapModule(AppModule);
system.config.js:
/**
* Angular 2 サンプルのシステム構成
* アプリケーションのニーズに応じて調整してください。
*/
(関数 (グローバル) {
System.config({
パス: {
// パスはエイリアスとして機能します
'npm:': 'node_modules/'
}、
// map は、システム ローダーに検索する場所を指示します
マップ: {
// アプリは app フォルダー内にあります
アプリ: 'アプリ',
// アンギュラ バンドル
'@angular/core': 'npm:@angular/core/bundles/core.umd.js',
'@angular/common': 'npm:@angular/common/bundles/common.umd.js',
'@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
'@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/http': 'npm:@angular/http/bundles/http.umd.js',
'@angular/router': 'npm:@angular/router/bundles/router.umd.js',
'@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
'@angular2-material': 'npm:@angular2-material',
// その他のライブラリ
'rxjs': 'npm:rxjs',
'angular2-in-memory-web-api': 'npm:angular2-in-memory-web-api',
}、
// パッケージは、ファイル名や拡張子がない場合のロード方法をシステムローダーに指示します
パッケージ: {
アプリ： {
メイン: './main.js',
defaultExtension: 'js'
}、
rxjs: {
メイン: 'main.js',
defaultExtension: 'js'
}、
「angular2-in-memory-web-api」: {
メイン: './index.js',
defaultExtension: 'js'
}、
'@angular2-material/core': {
メイン: 'core.js',
defaultExtension: 'js'
}、
'@angular2-material/button': {
メイン: 'button.js',
defaultExtension: 'js'
}、
'@angular2-material/card': {
メイン: 'card.js',
defaultExtension: 'js'
}
}
});
}）（これ）;
MdButtonModule「app.module.ts」のインポートリストに追加するとすぐに、エラーが発生し始めます。