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错误？