1

ハイブリッド 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 経由でロード)

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { UpgradeModule } from '@angular/upgrade/static';
import { AppModule } from './app.module';

platformBrowserDynamic().bootstrapModule(AppModule).then(platformRef => {
    const upgrade = platformRef.injector.get(UpgradeModule) as UpgradeModule;
    upgrade.bootstrap(document.body, ['MyA1App']);
});

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

index.html :

<div class="main-content" ng-view=""></div>

<!-- Configure SystemJS (bootstrap Angular 2 app) -->
<script src="systemjs.config.js"></script>
<script>
    System.import('app').catch(function(err){ console.error(err); });
</script>

<!-- Old Angular 1 bootstrap method -->
<!--<script>
    angular.bootstrap(document.body, ['MyA1App']);
</script>-->

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { UpgradeModule } from '@angular/upgrade/static'; //To bootstrap a hybrid application, we  need to import UpgradeModule in our AppModule, and override it's bootstrap method:

@NgModule({
    imports: [BrowserModule, UpgradeModule ],
})

export class AppModule {
    ngDoBootstrap() {}
}

import { downgradeComponent } from '@angular/upgrade/static';
angular.module('MyA1App', [])
    .directive(
    'contactList',
    downgradeComponent({ component: ContactListComponent }) as angular.IDirectiveFactory
    );

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

module MyApp {
    'use strict';

export var App: ng.IModule = angular.module('MyA1App', ['ngRoute', 'ngResource', 'highcharts-ng', 'ui.bootstrap']);

    //  register work which needs to be performed on module loading
    App.config([
        '$routeProvider', '$httpProvider',
        ($routeProvider: ng.route.IRouteProvider, $httpProvider: ng.IHttpProvider) => {

            $routeProvider
                .when('/landing',
                {
                    controller: MyApp.Controllers.LandingCtrl,
                    templateUrl: '/app/angular1x/partials/landing.html'
                })
                .when('/registration',
                {
                    controller: MyApp.Controllers.RegistrationCtrl,
                    controllerAs: 'vm',
                    templateUrl: '/app/angular1x/partials/registration.html'
                })               
                .otherwise({
                    redirectTo: '/landing'
                });
        }
    ]);   
}

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

  • 呼び出された 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。

import { downgradeComponent } from '@angular/upgrade/static';
angular.module('MyA1App', [])
    .directive(
    'contactList',
    downgradeComponent({ component: ContactListComponent }) as angular.IDirectiveFactory
    );

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

4

2 に答える 2

3

さて、私はこの号の最後にたどり着きましたが、 UPGRADING FROM 1.Xチュートリアルに従っているために腰を下ろした時間の長さにがっかりしています。チュートリアルでは、モジュール経由でコンポーネントを登録することでコンポーネントをダウングレードするための正確なサンプル コードを示しています。Angular 2directiveAngular 1

angular.module('heroApp', [])
  .directive(
    'heroDetail',
    downgradeComponent({component: HeroDetailComponent}) as angular.IDirectiveFactory
  );

モジュール名の後の空の括弧に注意してください[]。それが問題でした。チュートリアルから直接それを持っていたときに、コントローラーAngular1が定義されていないというエラーが発生し始めたため、野生のガチョウ追跡に送られました。これの多くはまだ新鮮なので、私は野生のガチョウの追跡を行ってA1、A2. 同じチュートリアルを読むまでは、「既存のAngular 1コードは以前と同じように機能し、Angular 2コードを実行する準備ができています」これにより、A2ブートストラップコードの何かが間違っていて、最終的に、ブラケットは何もロードしませんでした。

私の OP は、エラーを受け取っていないことを指摘しました。これは、A1物事を機能させようとして多くのコードを削除し、アプリがロードされても何も表示されず、ルーティングの問題であると考えられるようになったためです。

私にとっての作業コードは次のとおりです。

angular.module('MyA1App')
    .directive('contactList', downgradeComponent({ component: ContactListComponent }) as angular.IDirectiveFactory);
于 2016-12-02T06:11:03.130 に答える