Загрузочный Угловой 2 + Угловой 1 Гибридное приложение не загружается при использовании downgradeComponent

Question

У меня есть приложение с угловым 1, которое я выполнил по инструкциям из официального уральского учебника (https://angular.io/docs/ts/latest/guide/upgrade.html) для начальной загрузки гибридного приложения 1 + 2. У меня есть весь код на месте и запускаю приложение, и абсолютно ничего не происходит. Он просто подходит к корневому URL-адресу, и я получаю только стиль и представление о том, что есть в index.html. Однако основной <div ng-view> никогда не обновляется через $routeProvider и app.ts. По крайней мере, похоже, это то, что происходит. Есть zero ошибок. Вот то, что я до сих пор:

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 (от углового 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' 
       }); 
     } 
    ]); 
} 

Так вот обзор вопроса:

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

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

---

UPDATE:

Я разыскал вредоносный код, чтобы быть следующее app.module.ts:

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

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

Answer 1

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

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

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

My OP отметил, что я не получал ошибок. Это было потому, что я лишил много кода A1, пытаясь заставить все работать и дошел до того, что приложение загрузилось, но ничего не было отображено и считалось, что это проблема маршрутизации.

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

angular.module('MyA1App') 
    .directive('contactList', downgradeComponent({ component: ContactListComponent }) as angular.IDirectiveFactory); 

Answer 2

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

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() { 
    } 
}