2016-08-19 8 views
7

Mam aplikację hybrydową Angular 1/Angular 2, która współpracuje z rc.3 i przestarzałym routerem. Ze wszystkich źródeł, które mogę znaleźć, rc.5 jest dużym krokiem do przejścia z nowym routerem. Jestem w stanie uzyskać dostęp do mojej aplikacji hybrydowej i zrenderować mój główny składnik, ale routing nie działa.Załadowanie aplikacji hybrydowej Angular 2 rc.6 przy użyciu polecenia ngUpgrade z routingiem

var upgradeAdapter = new UpgradeAdapter(forwardRef(() => AppModule)); 

angular.module('ng1App', []) 
    .directive('myBaseComponent', <any>upgradeAdapter.downgradeNg2Component(MyBaseComponent)); 

@NgModule({ 
    imports: [BrowserModule, routing], 
    providers: [appRoutingProviders, HTTP_PROVIDERS], 
    declarations: [MyBaseComponent, 
    MyNG2RoutableComponent] 
}) 
class AppModule { } 


upgradeAdapter.bootstrap(document.body, ['ng1App']).ready(function(){ 
    console.log('bootstraped!'); 
}); 

Moje bootloady składników root NG2, ponieważ mogę wyrzucać elementy z szablonu, który renderuje. Ale wydaje się, że kiedy dodaję <router-outlet></router-outlet>, to nie wyrenderuje trasy podrzędnej. Jeśli uruchomię tylko moją aplikację NG2 bez aktualizacji, wszystko działa zgodnie z oczekiwaniami.

Czuję, że brakuje mi tylko jednego łącznika. Jakieś pomysły?


kątowa RC.6 i Router RC.2 Aktualizacja

I przeniesieni do rc.6 a wersja rc.2 routera w ubiegłym tygodniu, ten sam problem. UpgradAdapter działa świetnie, gdy routing nie jest zaangażowany. Po wciągnięciu gniazda routera nic się nie wyświetla i nie ma błędów.

+0

Czy dodano dyrektyw routera do 'dyrektyw' dekorator swojej własności składnika? Stamtąd 'import {ROUTER_DIRECTIVES} z '@ kątowego/routera;' –

+0

@OlegBarinov Właśnie zrobiłem to, ale wciąż nic. Myślałem, że dyrektywy routerów będą się zajmować na poziomie modułu? Podążając za instrukcją angular.io, konfiguruję routing w app.routing.ts i wykorzystuję funkcję 'RouterModule.forRoot()', która jest następnie używana w imporcie mojego modułu. Tak czy inaczej, bezpośrednie importowanie dyrektyw najwyraźniej nie pomogło. –

+0

Uaktualniłem do rc.6 w zeszłym tygodniu, ten sam problem. UpgradAdapter działa świetnie, gdy routing nie jest zaangażowany. Po wciągnięciu gniazda routera nic się nie wyświetla i nie ma błędów. –

Odpowiedz

3

Aby uzyskać instancję, router kątowy wymaga co najmniej jednego składnika. Ponieważ bootloadowanie ngUpgrade strony Angular 1, nie ma elementu ładującego Angular 2. Aby temu zaradzić, musisz zastąpić ApplicationRef i dostarczyć własny komponent. Oto działający plunker demonstrujący, jak to osiągnąć.

http://plnkr.co/edit/Gj8xq0?p=preview

Dla porównania:

https://github.com/angular/angular/issues/9870

+0

To jest dokładnie to, czego szukałem! Dziękuję Ci! Wiedziałem, że musi istnieć jakiś magiczny sos łączący, ponieważ żadne błędy nie zostały rzucone. Jestem pewien, że dokumentacja zostanie wkrótce zaktualizowana, ale to odblokuje nam aktualizację naszej aplikacji do najnowszego rc. –

+1

To nie jest już wymagane w Angular 2.1.0 i nowszych - dobrze byłoby zaktualizować tę odpowiedź w tym celu. – studds

Powiązane problemy