Angular 2+找不到要引导的Angular 1.X [英] Angular 2+ can't find Angular 1.X to bootstrap

问题描述

我正在尝试使用Angular 2+(在撰写本文时为Angular 4.1.0)引导Angular 1.X应用程序.我遵循了在线指南到T，但似乎没有取得进展.

I'm trying to bootstrap an Angular 1.X app with Angular 2+ (Angular 4.1.0 at the time of writing this question). I followed the online guide to the T but can't seem to make headway.

我正在使用ES2015 +(通过Babel编译)和TypeScript的混合体.一切都能正确编译，我可以分别成功运行Angular 1和Angular 2.如果有帮助，他们可以使用Webpack一起编译.

I'm using a hybrid of ES2015+ (compiled via Babel) and TypeScript. Everything compiles correctly and I can run both Angular 1 and Angular 2 separately successfully. They get compiled together using Webpack if that makes a difference.

这是我的Angular 1.X条目文件(app.ts)大致如下所示:

Here's what my Angular 1.X entry file (app.ts) approximately looks like:

import * as angular from 'angular';

export default angular.module('app', [])
  .run(function() { console.log('Angular 1 is running!')})

为简单起见，我从主应用程序中删除了所有依赖项，以便可以确定它不是run/config函数或依赖项之一.我已经使用config/run函数进行了测试，以查看其中是否有任何运行或引发错误，但没有.

For simplicity sake, I deleted all dependencies from the main application so that I can be sure it's not the run/config function or one of the dependencies. I have tested with config/run functions to see if any of those run or throw errors but they don't.

然后，我有一个Angular 2+应用程序的入口文件(我也将其用作Webpack的入口文件)，名为main.ts，如下所示:

I then have an entry file for my Angular 2+ app (that I use as an entry file for Webpack as well) called main.ts which looks like this:

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

The process fails after the console.log('app', app) line. The log shows that app is, indeed, an instance of the Angular 1.X app. But the bootstrap process still fails.

关于我在做错什么的任何想法吗?

Any ideas on what I'm not doing right?

编辑

这是我的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已经在window对象上了.我正在模块中运行AngularJS1.X.我会在进行更新时进行更新.我在下面回答了一些评论.目前，我正在使用尽可能简单的示例，对于AngularJS 1.X，我实际上是在运行准系统应用程序，如果通过.run

My hunch is that Angular 2+ depends on AngularJS 1.X to be already on the window object. I'm running AngularJS 1.X from within a module. I'll update as I work on it. I answered a few comments below. Currently, I'm using as simple of an example as possible and for AngularJS 1.X, I'm literally running a barebones app that logs out if it's been bootstrapped via .run

编辑3

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

I posted an answer below. What it boiled down to was the ordering of imports in the main.ts file (the entry file). Simply importing the AngularJS 1.X app before importing zone.js fixed the issue.

推荐答案

我讨厌回答我自己的问题(因此，不感谢所有帮助过的人，谢谢！)，但这是解决问题的方法.

I hate to answer my own question (and thus not give credit to everyone that helped, thank you!) but here is what fixed it.

我更改了main.ts条目文件中的导入顺序！ :)

I changed the order of imports in main.ts the entry file! :)

新版本的外观如下:

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')
})

我基本上只需要在zone.js之前导入AngularJS 1.X应用程序.我不确定为什么会这样，但是它运行得很完美.

I basically just had to import the AngularJS 1.X app before zone.js. I'm not sure why that is but it worked flawlessly.

编辑

我在Angular的回购中提出了一个问题，并得到了官方"答复.它适用于4.1.0-rc.0及更高版本.有一种方法可以手动设置对AngularJS的引用，而不是让系统尝试从window对象获取它.实际上，AngularJS甚至在捆绑时似乎会自动将其附加到window上.但是，这样做为时已晚"(这就是我的修复程序起作用的原因).

I filed an issue on Angular's repo and got an "official" answer. It works on 4.1.0-rc.0 and above. There is a method to manually set a reference to AngularJS instead of having the system try to get it from the window object. As it is, AngularJS seems to attach itself to window when it runs even when it's bundled; however, it does so "too late" (which is why my fix works).

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

So here's what you can do:

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

setAngularLib(angular);
// do your bootstrap here

这篇关于Angular 2+找不到要引导的Angular 1.X的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！