Гибридное приложение Bootstrapped Angular 2 + Angular 1 не загружается при использовании downgradeComponent

У меня есть приложение Angular 1, в котором я следовал инструкциям официального руководства по Angular ( https://angular.io/docs/ts/latest/guide/upgrade.html) для начальной загрузки гибридного приложения 1+2. У меня есть весь код на месте и запускаю приложение, и абсолютно ничего не происходит. Он просто идет по корневому URL, и я получаю только стили и представление того, что находится в index.html, Однако основной <div ng-view> никогда не обновляется через $routeProvider а также app.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']);
});

Одно замечание к приведенному выше гибридному загрузочному коду - насколько я могу судить, он работает. Если я изменю имя приложения 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'
                });
        }
    ]);   
}

Итак, вот обзор проблемы:

  • Начальная загрузка в Angular2 main.ts с помощью systemjs называется в index.html (кажется успешным - без ошибок)
  • Я могу разместить точки останова в контроллерах Angular1, Landing и т. Д. И увидеть, что контроллеры определены и загружены, когда их ударили. Но больше ничего не происходит! Нет ошибок или что-нибудь.
  • ng-view директива никогда не обновляется через маршрутизацию. После проверки на главной странице это выглядит так: <div class="main-content" ng-view=""></div>
  • Никаких ошибок JS нигде
  • Если я вернусь и использую оригинальный загрузчик A1 в index.html это работает в отличие от использования systemjs загрузить А2 и загрузить А1 как гибрид.

Что я тут делаю неправильно, чтобы оригинал Angular1 приложение, кажется, загружается и загружается просто отлично, но на самом деле ничего не делает?

ОБНОВИТЬ:

Я выследил код обидчика, чтобы быть следующим в app.module.ts:

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

Это был не маршрут (это была красная сельдь). Целиком Angular1 приложение загрузится и загрузится, если я удалю код выше. Что я делаю в приведенном выше коде, что может привести к остановке загрузки, но не создавать JavaScript ошибки?

Источник

2 ответа

Решение

Что ж, я дошел до сути этой проблемы, и это разочаровывает, сколько времени я занимался талией из-за того, что следовал учебнику UPGRADING FROM 1.X В этом уроке показан точный пример кода для понижения Angular 2 компонент, зарегистрировав его как directive через Angular 1 модуль:

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

Обратите внимание на пустые скобки после имени модуля []? Это была проблема. Это отправило меня в погоню за диким гусем, потому что когда у меня было то, что было прямо из учебника, я начал получать ошибки о своих контроллерах в Angular1 не определяется Так как многое из этого все еще свежо, я продолжил погоню за диким гусем A1 приложение пытается заставить вещи работать, думая, что они не совместимы с A2, Только в том же учебнике я прочитал: "Существующий код Angular 1 работает, как и раньше, и вы готовы запустить код Angular 2". Это привело меня к процессу устранения, что что-то в загрузочном коде A2 было неправильным и в конечном итоге скобки ничего не загружали.

Мой ОП отметил, что я не получаю никаких ошибок. Это было потому, что я снял много A1 Код пытался заставить вещи работать и добрался до точки, где приложение загрузилось, но ничего не отображалось и думал, что это проблема маршрутизации.

Рабочий код для меня выглядит следующим образом:

angular.module('MyA1App')
    .directive('contactList', downgradeComponent({ component: ContactListComponent }) as angular.IDirectiveFactory);
Источник

У меня есть два предложения:

  1. В вашем index.html измените <div class="main-content" ng-view=""></div> в <div class="main-content" ui-view></div>,

  2. Удалить <div class="main-content" ng-view=""></div> из индекса и добавить <root-cmp></root-cmp>

Обновите ваш app.module.ts следующим образом:

@Component({  
  selector: 'root-cmp',  
  template: '<div class="main-content" ui-view></div>'  
})  
export class RootCmp {
}

@NgModule({  
  imports: [  
    BrowserModule,  
    UpgradeModule  
  ],  
  bootstrap: [RootCmp],  
  declarations: [
    RootCmp
  ],  
  providers: [],  
  entryComponents: [
    RootCmp
  ]  
})  
export class Ng2Module {
  ngDoBootstrap() {
  }
}
Источник
Другие вопросы по тегам