使用降級組件引導的角度2 +角1混合應用程序不加載組件

我有一個Angular 1應用程序，我遵循官方Angular教程（https://angular.io/docs/ts/latest/guide/upgrade.html）的指示來引導混合1 + 2應用程序。我擁有所有的代碼並運行應用程序，絕對沒有任何反應。它只是進入根網址，我只能看到index.html中的任何內容的樣式和視圖。然而主要<div ng-view>永遠不會通過$routeProvider和app.ts更新。至少，這似乎是發生了什麼事。有零錯誤。以下是我迄今爲止：使用降級組件引導的角度2 +角1混合應用程序不加載組件

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，我會在瀏覽器中看到大量錯誤。此代碼可以找到app.ts中定義的MyA1App Angular1模塊，並且能夠引導它。

的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' 
       }); 
     } 
    ]); 
}

所以這裏的問題的概述：通過systemjs

的Bootstrap到Angular2 main.ts稱爲index.html -
我可以把斷點Angular1控制器，着陸等，見（出現成功沒有錯誤）被定義和加載的控制器被擊中。但沒有其他事情發生！沒有錯誤或任何東西。
ng-view指令永遠不會通過路由更新。在檢查主頁上它只是看起來像：<div class="main-content" ng-view=""></div>隨時隨地
如果我回去，並在index.html它的工作原理，而不是使用systemjs加載A2和引導A1作爲混合使用原來的A1引導
沒有JS錯誤。

我在這裏做錯了什麼，以便原來的Angular1應用似乎加載和引導就好了，但實際上並沒有做任何事情？

UPDATE：

我已經找到了問題的代碼要在在app.module.ts如下：

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

它不是路由（這是一個紅鯡魚）。如果我刪除上面的代碼，整個Angular1應用程序將引導並加載。我在上面的代碼中做了什麼，可能會導致一切暫停加載，但不會創建任何JavaScript錯誤？

來源

2016-12-01 atconway

好吧，我已經到了這個問題的底部，並且由於遵循UPGRADING FROM 1.X教程，我的腰線時間長度令人失望。在該教程，它示出了本確切示例代碼通過經由Angular 1模塊註冊爲一個directive降級的Angular 2部件：模塊名[]後

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-02 06:11:03 atconway

我有兩個建議：

在您的index.html，改變<div class="main-content" ng-view=""></div>爲<div class="main-content" ui-view></div>。
從索引中刪除<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() { 
    } 
}

來源

2017-03-14 11:20:55

使用降級組件引導的角度2 +角1混合應用程序不加載組件

回答

相關問題