問題タブ [angular2-upgrade]

へのアップグレード後RC6、次のエラーが発生します。

コードがないと問題を解決するのは簡単ではないことは理解していますが、誰かが同じエラーを抱えてそれを理解した可能性があります。

既存の投稿で問題が解決しない

更新: system.config.js:

更新 2: system.config.js を次のように変更しました。

今、私は次のエラーが発生します:

次のアップグレード/ダウングレード ブリッジhttps://angular.io/docs/ts/latest/guide/upgrade.htmlを使用して、1 つのアプリケーションでAngular1とAngular2を並べて使用します。

私の質問は、 Angular2サービスからAngular1にアクセスする可能性があるかどうかです。 明確にするために、Angular2に相当するものについて尋ねているわけではありません。$rootScope$rootScope

angular1コンポーネントを再利用することを期待して、angular2プロジェクトを開始しています。この plunkr http://plnkr.co/edit/yMjghOFhFWuY8G1fVIEgに基づいてプロジェクトをセットアップしようとしましたが、アプリを実行しようとすると、次のエラーが発生しました。

plunkr は ng2 モジュールなしでアップグレード アダプターをインスタンス化しただけで、なぜうまくいかなかったのかわかりません。plunkr が使用している angular2 のバージョンはわかりませんが、バージョン 2.0.0 を使用しています。

タブとタブの 2 つの角度のある 1.5 コンポーネントがあります。タブコンポーネントにはタブコンポーネントのコントローラーが必要なので、後者はタブコンポーネントのアクティブ状態を管理できます。コードは次のとおりです（typescriptで）：

UpgradeAdapter を使用してこれら 2 つのコンポーネントを angular 2 にアップグレードしようとすると、TabController の親が解決されず、「undefined には関数 'addTab' がありません」というエラー メッセージが表示されます。

ここで基本的な何かが欠けていると確信しています。

RC5 の前に ng2 アップグレード アダプターを使用して、ng1 アプリケーションを ng2 に移植し始めました。以前は、コンポーネントが直接コンポーネントで使用していたディレクティブを宣言すると、すべてが正しく接続され、意味がありました。

しかし、今、ハイブリッド アプリを Angular 2 Final に移行しようとしています。依存関係に関しては、NgModule 全体がハイブリッド アプリと混同しています。

アップグレード アダプターを作成するには、ハイブリッド アプリで使用する Ng2 モジュールを渡す必要があります。それはいいです。しかし、アップグレード アダプタを作成する前に、Ng2 モジュールを完全に定義する必要があります。それが本当なら、まだ作成されていないアップグレード アダプターを使用して、ng2 モジュールで使用する ng1 コンポーネントをアップグレードするにはどうすればよいですか (アダプターを作成する前に作成する必要があります)。

参考までに、他の方法でも問題ありません-ng1で使用する必要があるすべてのトップレベルのng2コンポーネントをダウングレードするtypescriptモジュールがあり(ui-router構成で)、そのtypescriptモジュールは両方のアップグレードアダプターの後にロードされますそして、ダウングレードするコンポーネントを含む Ng2 モジュール。

それで、私は何が欠けていますか？アップグレード アダプタの upgradeNg1Component 機能を利用するにはどうすればよいですか?

この機能がないと、最も外側のコンポーネントから始めて、内側に向かって作業する必要があります。そして、それはうまく機能しますが、全体で使用されるいくつかの一般的なコンポーネントがあり、最初にそれらを ng2 に変換する必要はありません。

巨大なクライアント側アプリを Angular 1.x から Angular 2 にアップグレードしようとしていますが、本当に厄介な障害にぶつかりました。ダミーの軽量プロジェクト (以下に貼り付けたファイル) を使用して問題を再現しましたが、最初に問題について説明させてください。

基本的に、tsconfig.jsonモジュールを として指定するとcommonjs、chrome dev コンソールに次のエラーが表示されます。

app.module.ts:1Uncaught ReferenceError: require が定義されていません

モジュールを に切り替えるとsystem、次のエラーが表示されます。

キャッチされていない TypeError: System.register 呼び出しが無効です。匿名の System.register 呼び出しは、スクリプト タグではなく、SystemJS.import によってロードされたモジュールによってのみ行うことができます。

モジュールを に切り替えるとumd、すべて正常に動作します。しかし、角度自体が の使用を提案していることを考えると、それが正しい答えではないcommonjsことを懸念しています。umdしかし、もし私がそれについて間違っていて、umdまったく問題ないのであれば、その理由について適切な説明を聞きたいと思っています.

私の問題を再現するための私のコードは次のとおりです。

tsconfig.json:

型付け.json:

systemjs.config.js :

パッケージ.json:

app.js :

app.module.ts:

appCtrl.ts :

upgrade_adapter.ts :

私は何が欠けていますか？

angular 1 + 2ハイブリッドアプリケーションがあります（したがって、angular 1ベースアプリを使用します）。

アダプターでアプリケーションをブートストラップする前に、アップグレード アダプターを使用して angular2 コンポーネントをダウングレードします。それは期待どおりに機能します。

ただし、多数の angular2 コンポーネント (150 以上) があると予想されるため、ブートストラップの前にすべてのコンポーネントをロードすると、初期ロードが非常に遅くなります。angular2コンポーネントを必要に応じてロードできるように、遅延ロードする方法を見つけようとしています。それを達成する方法はありますか？

これが私のコードの一部です。

main.ts

module.ts

upgradeAdapter.ts

ダッシュボード.コンポーネント.ts

これを行うと、ダッシュボード コンポーネントをアプリケーションで使用できるようになります。

Angular 2.2.1 を使用した 1.x ガイドからのアップグレードに従っています。私は自分のコードのほとんどを取り除いたので、次のようになりました。

main.ts:

app.module.ts:

私の webapp が読み込まれると、次のエラーが表示されます。

そして、何もレンダリングされません。thenmain.ts のブロックが呼び出されていません。AppComponentセレクターtest-angular-twoを使用し、それ以外は空です。

どうしたの？

現在、AngularJS (ng1) アプリを Angular 2 (ng2) にアップグレードしています。

Angular バージョン 2.2.1 を使用しています。

@angular\upgrade\static から UpgradeModule をインポートすると、次の例外が発生します。 Uncaught SyntaxError: Unexpected reserved word Uncaught ReferenceError: webpackJsnop is not defined

WebPack V1.13.1 を使用しています。

upgrade_adapter の方法を使用しているときは、@Inject アノテーションを追加する必要があります。

助けてくれてありがとう。

ハイブリッド 1 + 2 アプリをブートストラップするための公式の Angular チュートリアル ( https://angular.io/docs/ts/latest/guide/upgrade.html ) の指示に従った Angular 1 アプリがあります。すべてのコードを配置してアプリを実行しましたが、まったく何も起こりません。ルート URL に移動するだけで、 にあるもののスタイリングとビューのみを取得しindex.htmlます。ただし、メインはおよび<div ng-view>を介して更新されることはありません。少なくとも、それが起こっているようです。エラーはゼロです。これが私がこれまでに持っているものです：$routeProviderapp.ts

main.ts (SystemJS 経由でロード)

上記のハイブリッド ブートストラップ コードに関する 1 つの注意事項 -私が知る限り、それは機能しています。Angular1 アプリの名前を に変更すると、ブラウザーに大量blahblahのエラーが表示されます。このコードはMyA1App、で定義されている Angular1 モジュールを見つけて、app.tsそれをブートストラップできます。

index.html :

app.module.ts

app.ts (モジュールとルーティングを定義する Angular 1 から - これはまだ有効で使用されているはずです)

では、問題の概要は次のとおりです。

• 呼び出された Angular2main.tsへのブートストラップ(成功したように見えます - エラーなし)systemjsindex.html
• Angular1 コントローラーや Landing などにブレークポイントを配置し、コントローラーが定義されて読み込まれていることを確認できます。しかし、他に何も起こりません！エラーも何もありません。
• ディレクティブは、ng-viewルーティングによって更新されることはありません。メインページを調べると、次のようになります。<div class="main-content" ng-view=""></div>
• JS エラーはどこにもありません
• 戻って元の A1 ブートストラップを使用すると、A2 をロードして A1 をハイブリッドとしてブートストラップするのindex.htmlとは対照的に機能します。systemjs

元のAngular1アプリが正常にロードおよびブートストラップされているように見えますが、実際には何もしていないように見えます。

アップデート：

問題のあるコードを追跡して、次のようにしましたapp.module.ts。

それはルーティングではありませんでした（それはニシンでした）。Angular1上記のコードを削除すると、アプリ全体がブートストラップして読み込まれます。上記のコードで、すべての読み込みが停止する可能性がありますが、JavaScriptエラーは発生しません。