問題タブ [systemjs]

私は angular2 で遊び始め、親の場所にある angular に依存するコンポーネントを作成しようとすると、たとえば、

次のエラー メッセージが表示されます。

ゾーンはすでにオブジェクトのウィンドウにエクスポートされています!

この問題の原因と解決方法を教えてください。

以下のバージョンの JSPM を Angular2 および SystemJS (バージョン: Angular@2.0.0-alpha.27 with JSPM@0.16.0-beta.2 および SystemJS@0.18.0) で実行すると、次の問題が発生します。コンパイルされた (エラーなし) ブラウザーで次のエラーが表示されます。

ファイル Reflect.js: \jspm_packages\npm\reflect-metadata@0.1.0\Reflect.js を手動でインクルードすると、その問題はなくなりますが、別の角度ファイル内でリストが未定義であるという次の問題が発生します。

system.js と typescript / jspm.io の両方からの構成ファイル (src コード) については、以下の bitbucket src を参照してください。

https://bitbucket.org/schippie/angular-2-jspm-hello-world/src/8af83f2066e5e3e9eede7db495545234f3b0c04a

私が疑問に思っているのは、現在、jspm を system.js と一緒に使用して、angular が正常に機能するために必要なすべての angular パッケージを取得できるかどうかです。system.js の設定を見ると、angular がそれに依存していることが明確に述べられています。

しかし、それらは取得されません（ネットワークタブを見てください）

内部開発サーバーに GitLab をインストールしました。開発中のjspmの配布エンドポイントとして利用したいです。JSPM で使用する git サーバーを定義することは可能ですか、それともプライベート ソースのパッケージを使用する他の方法はありますか?

角度のあるプロジェクトの一部を typescript に移行し、内部モジュール/名前空間に問題があることを検討しています。

この作業例を github に投稿しました: https://github.com/hikirsch/TypeScriptSystemJSAngularSampleApp

手順:

これはアプリケーションの要点です: index.ts

例Ctrl.ts

ExampleTwoCtrl.ts

述べたように、これはすべてうまく機能します。しかし、次のような名前空間の下にすべてを置きたいと思います。

そして、次のように使用します。

これにより、gulp バンドル タスクを実行して正しくコンパイルされますが、ブラウザでエラーが発生します /// ///

ブラウザ エラー:

npm モジュール google-maps-api を見つけてインストールしましたが (npm install google-maps-api)、systemjs/jspm でインポートする方法がわかりません (jspm はこのモジュールを見つけることができません)。私のconfig.jsからの構成は次のとおりです。

だから、私がこのようなことをしようとすると：

ブラウザ コンソールに次のエラーが表示されます。

GET https://localhost:44308/app/dist/google-maps-api.js 404 (見つかりません)

ファイルシステムを見ると、npm が app/node_modules/google-maps-api の下にモジュールをインストールしたことがわかります。Aurelia モジュールの import 句でそれを参照するにはどうすればよいですか?

System.set(moduleName, Module) を使用して手動でレジストリに追加する必要があるいくつかのグローバル クラス (プロトタイプ構文の JS クラス) があります。2 番目のパラメーターは Module 型であるため、System.newModule(object) を使用する必要があります。

しかし、オブジェクト以外を System.newModule() に渡すと、 - Uncaught TypeError: Expected object がスローされます。

私はこれを間違っていますか？これを行う別の方法はありますか？

私は現在、実装ではなくインターフェイスに対してプログラムするためにいくつかのコードをクリーンアップしようとしていますが、その方法がわかりません。

より具体的には、以下を使用しています: * TypeScript 1.5.0 beta -> ES5 / commonjs にトランスパイル * SystemJS を使用してモジュールをロード

現在、次のように外部モジュールを使用しようとしています。

posts.service.ts ファイル:

そのモジュールは posts.ts にインポートされます。

上記のコードは正しくコンパイルされますが、基本的に私の問題は、Angular が Posts コンポーネントに PostsServiceImpl のインスタンスを挿入しないという事実に要約されます。

もちろん、それは単に、すべてを宣言/エクスポート/インポートする正しい方法が見つからないためです

がないexport interface PostsService ...と、投稿コントローラーで使用するため、TS コンパイル エラーが発生します。

@Viewexport var PostsService:PostsServiceImpl;デコレータの viewInjector で TS コンパイル エラーが発生します。

生成されたjsコードexports.PostsService;では、エクスポート変数のために追加されたものしか見つかりません...インターフェイスが実行時に消えることはわかっています。

だから私はこのすべてに少し迷っています。TypeScript & Angular 2 でインターフェースベースのプログラミングをどのように使用できるかという実用的なアイデアはありますか?

SystemJS + JSPM管理プロジェクトで、Polymerの要素を使用するにはどうすればよいですか?

以前はPolymerjspm install github:Polymer/polymerをインストールし、 Iron-Elementsもインストールしていました。jspm install github:PolymerElements/iron-elements

これには複数の問題があるようです：

たとえば、iron-elements.html ファイルでは、インポートが間違ったパスに<link rel="import" href="../polymer/polymer.html">移動します。Polymerディレクトリは実際にはそのバージョンで名前が付けられているため (通常はJSPMで)、実際のインポートは my.xml にある必要があります<link rel="import" href="../polymer@1.0.5/polymer.html">。場合。

第 2 に、 Polymerファイルをインポートする際に、 SystemJS環境では、バージョン パスを含めて、そのように index.html 内に配置するのは少し鈍いようです。

SystemJSでこれらの html インポートを行うより良い方法はありますか?

第 3 に、Polymerのダウンロード オプションは、「カート」のようなオプションを使用して手動でダウンロードするか、Bowerで行うため、JSPM のリポジトリまたはを介し​​て鉄要素または紙要素を取得しようとすると、それらの依存関係がダウンロードされず、さらには依存関係を手動で追加すると、バージョンの名前がJSPMであるため、それらのパスは依然として間違っています。github:bower:import

JSPMのgoogle groupでのこの議論によると、この問題は

PolymerがBowerを想定しているということです

SystemJSまたはPolymerのいずれかを捨てることを余儀なくされるのは、私が本当にやりたくないことです。

ただし、( Aureliaフレームワークの) 別の議論で、Rob Eisenberg は Polymer をAureliaで使用する可能性について言及しています。

Polymer の Paper 要素を使用できるはずです。そのためには、Aurelia の前にページに Polymer フレームワークを含めます。

私が知る限り、AureliaはJSPMを使用しているので、それは可能ですか?

可能性のある解決策は、RequireJSに切り替えることです。その後、 Bowerを使用してPolymerのものを追加できますが、 SystemJSを使用したいのですが、 Aureliaで動作するかどうかはわかりません。また、SystemJSとJSPMを使い続けることができ、 PolymerだけにBowerを使用することもできました。

アップデート

より良い答えが見つかるまで、一時的な解決策はJSPMとBowerの両方を使用することです。BowerはPolymerにのみ使用されます。