Question

我正在尝试使用Angular 2+引导Angular 1.X应用程序（撰写此问题时的Angular 4.1.0）。我跟着online guide到了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函数或其中一个依赖项。我已经测试了配置/运行功能，看看是否有任何运行或抛出错误，但他们没有。

然后我有一个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() {
  }
};

EDIT2

我的预感是Angular 2+依赖于AngularJS 1.X已经在窗口对象上。我正在模块中运行AngularJS 1.X.我会在工作时更新。我在下面回答了几条评论。目前，我正在使用尽可能简单的示例，对于AngularJS 1.X，我实际上正在运行一个准系统应用程序，如果它已经通过.run

引导，则会退出

编辑3

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

Angular 2+无法找到Angular 1.X来引导

0 个答案: