angular2-mdlコンポーネントをAngular 2 Quickstartに適用

Question

Quickstart Angular 2の例（https://angular.io/guide/quickstart）でangular2-mdlコンポーネントを使用しようとしています。 私は、デフォルトのpackage.jsonファイルにこれらの依存関係を追加しました：

"angular2-mdl": "2.1.0", 
"@angular2-mdl-ext/popover": "*", 
"@angular2-mdl-ext/select": "0.4.0", 

その後、私は必要なモジュールをダウンロードするには、「NPMインストール」走りました。私はモジュールが自分のnode_modulesディレクトリにインストールされているのを見ることができます。 は最終的に私が追加：

'angular2-mdl': 'npm:angular2-mdl' 

をデフォルトsystemjs.config.jsファイルに：

map: { 
    // our app is within the app folder 
    app: 'app', // 'app', 
    // angular bundles 
    '@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', 
    // other libraries 
    'rxjs': 'npm:rxjs', 
    'angular2-in-memory-web-api': 'npm:angular2-in-memory-web-api', 
    'angular2-mdl': 'npm:angular2-mdl' 
}, 

と：

packages: { 
    app: { 
    main: './main.js', 
    defaultExtension: 'js' 
    }, 
    rxjs: { 
    defaultExtension: 'js' 
    }, 
    'angular2-in-memory-web-api': { 
    main: './index.js', 
    defaultExtension: 'js' 
    }, 
    'angular2-mdl': { 
    main: 'components/index.js' 
    } 
} 

：パッケージパラメータに

'angular2-mdl': { 
    main: 'components/index.js' 
    } 

その後、私はmoをインポートした私app.module.tsでdule：

import { MdlModule } from 'angular2-mdl'; 

とすぐ、私はNgModule輸入書にMdlModuleを追加するアプリが動作を停止：

@NgModule({ 
    imports: [ 
    BrowserModule, 
    FormsModule, 
    MdlModule 
    ], 
    declarations: [ AppComponent ], 
    bootstrap: [ AppComponent ] 
}) 

ブラウザコンソールは言う：

http://localhost:3000/traceur Failed to load resource: the server responded with a status of 404 (Not Found) localhost/:19 Error: (SystemJS) XHR error (404 Not Found) loading http://localhost:3000/traceur (…) (anonymous function) @ localhost/:19

私のアプリにangular2-mdlモジュールを追加する正しい方法は何ですか？

Answer 1

残念ながら、systemjsはpackage.jsonファイルのメインエントリを読み取ることができません。あなたはangular2-mdlのために見つけるでしょう：

"main": "./bundle/angular2-mdl.js" 

あなたが@angularからインポートするモジュールに違いはありません。以下の作業をする必要があります：

'angular2-mdl': 'npm:angular2-mdl/bundle/angular2-mdl.js' 

はあなたsystemjs.config.jsファイルから他のすべてのangular2-mdlの設定を削除します。それが動作しない場合：あなたの完全なsystemjs.config.jsファイルを投稿してください。

ポップオーバーのために

、あなたは私が ` 'angular2-MDL' を交換する場合