2016-07-20 16 views
2

angular2-material alpha3のAngular2ベータ版を使用していますが、互換性はありますがマッピングに問題があります。 /私の公共の場でAngular2マテリアルマッピングの問題

私は、以下に示すように、テンプレートで使用するディレクティブにインポートして追加しようとするとindex.htmlを私は、このシステムのセットアップ

System.config (
      { 
       packages: { 
        app: { 
         format   : 'register', 
         defaultExtension: 'js' 
        } 
       }, 
       map: { 
        '@angular2-material/input': 'node_modules/@angular2-material/input' 
       } 
      } 
     ); 
     System.import ('app/boot').then (null, console.error.bind (console)); 

が、私の構成要素の一つであります:

import { Component } from 'angular2/core'; 
import { ControlGroup, Validators, FormBuilder } from 'angular2/common'; 
import { Http, Headers } from 'angular2/http'; 
import { ConfigService } from '../../services'; 
import {MD_INPUT_DIRECTIVES} from '@angular2-material/input'; 


@Component({ 
    selector: 'test-form', 
    providers: [], 
    templateUrl: ConfigService.APP_FOLDER + '/components/test/test.html', 
    directives: [MD_INPUT_DIRECTIVES] 
}) 

私はこのエラーを取得:

angular2-polyfills.js:127 GET http://localhost:8080/node_modules/@angular2-material/input 404 (Not Found)scheduleTask @ angular2-polyfills.js:127ZoneDelegate.scheduleTask @ angular2-polyfills.js:362Zone.scheduleMacroTask @ angular2-polyfills.js:299(anonymous function) @ angular2-polyfills.js:148send @ VM1191:3fetchTextFromURL @ system.src.js:1154(anonymous function) @ system.src.js:1735ZoneAwarePromise @ angular2-polyfills.js:610(anonymous function) @ system.src.js:1734(anonymous function) @ system.src.js:2759(anonymous function) @ system.src.js:3333(anonymous function) @ system.src.js:3600(anonymous function) @ system.src.js:3985(anonymous function) @ system.src.js:4448(anonymous function) @ system.src.js:4700(anonymous function) @ system.src.js:406ZoneDelegate.invoke @ angular2-polyfills.js:349Zone.run @ angular2-polyfills.js:242(anonymous function) @ angular2-polyfills.js:597ZoneDelegate.invokeTask @ angular2-polyfills.js:382Zone.runTask @ angular2-polyfills.js:282drainMicroTaskQueue @ angular2-polyfills.js:500ZoneTask.invoke @ angular2-polyfills.js:452 angular2-polyfills.js:349 Error: Error: XHR error (404 Not Found) loading http://localhost:8080/node_modules/@angular2-material/input

+0

ここではsystemjsを設定していますか?もしあなたが角度の訂正を設定していない場合は、クイックスタートを読んだり、リポジトリをクローンしたり、付属のシステム設定ファイルを見てみてください。 –

+0

@mahdimahzuni私の家庭教師が私にウェブアプリケーションを作成しなければならない意味のあるスタックで、angle2 beta systemjs.config.jsファイルが見つかりませんでした。手動でやっていましたが、そこでしか実行できませんでした。ベータ版からrcへの移行に問題があった –

+0

system.config.jsファイルであり、メインのhtmlファイル(例:index.html)で参照され、コンテンツがこのページで提供されているものであるかどうかを確認しますhttps://angular.io/docs/ts/latest/quickstart .html#!#create-and-configure –

答えて

2
<script> 
     System.config (
      { 
       map: { 
        '@angular2-material' : 'libs/@angular2-material', 
       }, 
       packages: { 
        app: { 
         format   : 'register', 
         defaultExtension: 'js' 
        }, 
        '@angular2-material/core' : { 
         main: 'core.js', 
         defaultExtension: 'js' 
        }, 
        '@angular2-material/input' : { 
         main: 'input.js', 
         defaultExtension: 'js' 
        } 
       } 
      } 
     ); 
     System.import ('app/boot').then (null, console.error.bind (console)); 
    </script> 

@ angular2-materialをマッピングする必要があるので、angular2-material内の各パッケージをJSファイルに定義する必要があるため、修正されました。

0

私はどのように最初から素材を使用してセットアップAngular2チュー​​トリアル書きました:あなたの設定は昔ながらかなり古い見えますので、あなたは、少なくとも、それを見ている必要があり

quick-guide-install-angular2-and-material2-with-angular-cli

を。 Angular2とMaterial2が開発中であることを忘れないでください。変更を追跡する必要があります。 angle-cliのようなツールを使用すると、最新の状態に保つのに役立ちます。

歓迎