我有一个 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
并能够引导它。
索引.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'
});
}
]);
}
所以这里是问题的概述:
main.ts
通过systemjs
调用引导到 Angular2index.html
(似乎成功 - 没有错误)- 我可以在 Angular1 控制器、Landing 等中放置断点,并查看正在定义和加载的控制器。但没有其他事情发生!没有错误或任何东西。
- 该
ng-view
指令永远不会通过路由更新。在主页上检查后,它看起来像:<div class="main-content" ng-view=""></div>
- 任何地方都没有 JS 错误
- 如果我回去使用原始的 A1 引导程序,
index.html
它的工作原理是使用systemjs
加载 A2 和引导 A1 作为混合。
我在这里做错了什么,以至于原始Angular1
应用程序似乎可以正常加载和引导,但实际上并没有做任何事情?
更新:
我已经追踪到有问题的代码如下app.module.ts
:
import { downgradeComponent } from '@angular/upgrade/static';
angular.module('MyA1App', [])
.directive(
'contactList',
downgradeComponent({ component: ContactListComponent }) as angular.IDirectiveFactory
);
这不是路由(那是一条红鲱鱼)。Angular1
如果我删除上面的代码,整个应用程序将引导并加载。我在上面的代码中做了什么可能导致一切停止加载,但不会产生任何JavaScript
错误?