2017-03-02 4 views
3

すべての新しいツール(jspm 0.17.0-beta.40)でAngular 2アプリケーションを設定しようとしています)。ES6のインポートに関する問題[SystemJS 0.20.9 + TypeScript + Angular 2 + jspm 0.17.0-beta.40]

私はSystemモジュールに移っています。ここtsconfig.jsonです:

{ 
    "compileOnSave": false, 
    "compilerOptions": { 
     "target": "ES5", 
     "module": "System", 
     "moduleResolution": "Node", 
     "emitDecoratorMetadata": true, 
     "experimentalDecorators": true, 
     "noImplicitAny": true, 
     "rootDir": "../" 
     } 
} 

問題がES6 importです。このような何かがtranspiledされた後:

import { Component, ViewEncapsulation, AfterViewInit } from '@angular/core'; 

これを使用すると、次のようになります。

core_1.Component 

しかし残念ながら、アプリを実行しているブラウザがそれを認識することはできませんが。

"TypeError: core_1.Component is not a function 
at Object.execute (...app/app.component.js:32:24) 
at E (...jspm_packages/system.js:4:7541) 
at S (...jspm_packages/system.js:4:6746) 
at S (...jspm_packages/system.js:4:6646) 
at S (...jspm_packages/system.js:4:6646) 
at x (...jspm_packages/system.js:4:6102) 
at ...jspm_packages/system.js:5:6612" 

ViewEncapsulationを使用すると、同じタイプのエラーが発生します。

これは、Systemモジュールにトランスレーションするときです。


CommonJSモジュールでトランスペアレントに動作します(この手順はアプリが通過します)。

私は、次のmeta設定で

import html from './app.component.html'; 

を使用しているため、私は、しかしそれでは動作しないことができます。

meta: { 
    "*.html": { 
    "loader": "text" 
    }, 
} 

エラー

Error: No template specified for component AppComponent 

で失敗します

私は持っていますJSPMとSystemのバージョンを切り替えました。

明らかに、システムの0.20バージョンに導入された変更が原因です。

これにアプローチする方法についてのご意見はありますか?

答えて

4

はいこれは、ESモジュールとCommonJS間のNodeJSでinteropがどのように機能するかに応じて、非ESモジュールの名前付きエクスポートがサポートされなくなったSystemJS 0.20の変更です。デフォルトのインポートフォーム - import module from 'module'import {default as module} from 'module'に相当)。

ESモジュール自体ではないUMD bulidからAngularがロードされているため、指定されたエクスポートはサポートされていません。

次の構成は、名前の輸出でESモジュールのような角度コアモジュールを治療するためのSystemJSを伝えるために使用することができます

meta: { 
    '@angular/core': { esModule: true } 
} 
+1

はご回答いただきありがとうございます。これはノードからインストールされたモジュールで 'System'のみを使用しているときに動作します[github.com/dima-gusyatiner/system-0.20-angular-2](https://github.com/dima-gusyatiner/system-0.20-angular- 2)。しかし、**私は 'jspm'を使ってインストールすると動作しません** [github.com/dima-gusyatiner/system-0.20-jspm-0.17-angular-2](https://github。com/dima-gusyatiner/system-0.20-jspm-0.17-angular-2) – Dimdum

関連する問題