我正在尝试使用Angular 2+(在撰写此问题时为Angular 4.1.0)来引导Angular 1.X应用程序。我遵循了T 的在线指南,但似乎没有取得进展。
我正在使用ES2015 +(通过Babel编译)和TypeScript的混合体。一切都能正确编译,我可以分别成功运行Angular 1和Angular 2。如果有区别,可以使用Webpack将它们一起编译。
我的Angular 1.X入口文件(app.ts)大致如下所示:
app.ts
import * as angular from 'angular'; export default angular.module('app', []) .run(function() { console.log('Angular 1 is running!')})
为简单起见,我从主应用程序中删除了所有依赖项,以便可以确定它不是run / config函数或依赖项之一。我已经使用config / run函数进行了测试,以查看其中是否有任何运行或引发错误,但没有。
然后,我为Angular 2+应用程序创建了一个入口文件(也用作Webpack的入口文件)main.ts,该文件看起来像这样:
main.ts
import 'core-js/es7/reflect'; import 'zone.js'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { UpgradeModule } from '@angular/upgrade/static'; import { AppModule } from './app.module'; import app from '../app/app'; const platform = platformBrowserDynamic(); platform.bootstrapModule(AppModule).then(platformRef => { console.log('angular 2+ bootstrapped'); const upgrade = platformRef.injector.get(UpgradeModule) as UpgradeModule; console.log('getting update module'); console.log('app', app) upgrade.bootstrap(document.body, [app.name], { strictDi: true}) console.log('should be bootstrapped') })
该过程console.log('app', app)在行后失败。日志显示app确实是Angular 1.X应用程序的实例。但是引导过程仍然失败。
console.log('app', app)
app
关于我做错的任何想法吗?
编辑
这是我的app.module文件:
app.module
import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { UpgradeModule } from '@angular/upgrade/static'; import { AppComponent } from './app.component'; @NgModule({ imports: [ BrowserModule, UpgradeModule ], declarations: [ AppComponent ], entryComponents: [ AppComponent ] }) export class AppModule { constructor(protected upgrade: UpgradeModule) {} ngDoBootstrap() { } };
编辑2
我的直觉是Angular 2+依赖AngularJS 1.X已经在window对象上了。我正在模块中运行AngularJS1.X。我会在工作时进行更新。我在下面回答了一些评论。目前,我正在使用尽可能简单的示例,对于AngularJS 1.X,我实际上是在运行准系统应用程序,该应用程序会通过以下方式注销:.run
.run
编辑3
我在下面发布了答案。归结为main.ts文件(入口文件)中的导入顺序。只需在导入之前导入AngularJS 1.X应用程序即可zone.js解决此问题。
zone.js
我不想回答我自己的问题(因此,不要感谢所有帮助过的人,谢谢!),但这是解决问题的方法。
我在main.ts入口文件中更改了导入顺序!:)
新版本如下所示:
import app from '../app/app.temp'; import 'core-js/es7/reflect'; import 'zone.js'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { UpgradeModule } from '@angular/upgrade/static'; import { AppModule } from './app.module'; const platform = platformBrowserDynamic(); platform.bootstrapModule(AppModule).then(platformRef => { console.log('angular 2+ bootstrapped'); const upgrade = platformRef.injector.get(UpgradeModule) as UpgradeModule; console.log('getting update module'); console.log('app', app) upgrade.bootstrap(document.body, [app.name], { strictDi: true}) console.log('should be bootstrapped') })
我基本上只需要在之前导入AngularJS 1.X应用程序zone.js。我不确定为什么会这样,但是它运行得很完美。
我在Angular的仓库中提出了一个问题,并得到了“官方”答复。它适用于4.1.0-rc.0及更高版本。有一种方法可以手动设置对AngularJS的引用,而不是让系统尝试从window对象中获取它。实际上,AngularJS似乎window在运行时仍会附加自身,即使捆绑在一起也是如此。但是,这样做“太迟了”(这就是为什么我的修复程序起作用的原因)。
window
因此,您可以执行以下操作:
import { setAngularLib } from '@angular/upgrade/static'; import * as angular from 'angular'; setAngularLib(angular); // do your bootstrap here