Angular 2+找不到要引导的Angular 1.X

Question

我正在尝试使用Angular 2+（在撰写此问题时为Angular 4.1.0）来引导Angular 1.X应用程序。我遵循了T
的在线指南，但似乎没有取得进展。

我正在使用ES2015 +（通过Babel编译）和TypeScript的混合体。一切都能正确编译，我可以分别成功运行Angular 1和Angular
2。如果有区别，可以使用Webpack将它们一起编译。

我的Angular 1.X入口文件（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，该文件看起来像这样：

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应用程序的实例。但是引导过程仍然失败。

关于我做错的任何想法吗？

编辑

这是我的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

编辑3

我在下面发布了答案。归结为main.ts文件（入口文件）中的导入顺序。只需在导入之前导入AngularJS
1.X应用程序即可zone.js解决此问题。

Answer 1

我不想回答我自己的问题（因此，不要感谢所有帮助过的人，谢谢！），但这是解决问题的方法。

我在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在运行时仍会附加自身，即使捆绑在一起也是如此。但是，这样做“太迟了”（这就是为什么我的修复程序起作用的原因）。

因此，您可以执行以下操作：

import { setAngularLib } from '@angular/upgrade/static';
import * as angular from 'angular';

setAngularLib(angular);
// do your bootstrap here