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 函数或依赖项之一.我已经使用配置/运行功能进行了测试，以查看是否有任何运行或抛出错误，但它们没有.

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.

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

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 对象上.我在一个模块中运行 AngularJS 1.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 的 repo 上提出了一个问题，并得到了官方"的答复.它适用于 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).

所以你可以这样做:

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

setAngularLib(angular);
// do your bootstrap here

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