Angular 2+ 找不到 Angular 1.X 来引导

Posted 2023-02-19

【中文标题】Angular 2+ 找不到 Angular 1.X 来引导

【英文标题】：Angular 2+ can't find Angular 1.X to bootstrap

【发布时间】：2017-09-29 01:31:03

【问题描述】：

我正在尝试使用 Angular 2+（在撰写此问题时为 Angular 4.1.0）引导 Angular 1.X 应用程序。我跟着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 函数或依赖项之一。我已经使用 config/run 函数进行了测试，以查看是否有任何运行或抛出错误，但它们没有。

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

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。我会在工作时更新。我在下面回答了几个cmets。目前，我正在使用尽可能简单的示例，对于 AngularJS 1.X，我实际上是在运行一个准系统应用程序，如果它是通过 .run 引导的，则会注销它

编辑 3

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

【问题讨论】：

我摆脱了 Babel 和 Webpack，同样的问题。测试用例就像我上面描述的那样

【参考方案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')
)

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

编辑

我在 Angular 的 repo 上提交了一个问题，并得到了“官方”答复。它适用于 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

【讨论】：

您也可以这样做，强制执行旧脚本的顺序。 github.com/angular/angular-cli/wiki/stories-global-scripts

问题是我想交叉授粉组件，以便我可以更轻松地转换应用程序。我宁愿使用导入/要求来做到这一点，而不是依赖于对 AngularJS 的全局访问

阅读您的博客后，我有点明白您为什么要那样做。想要使用 Angular2 代码来解决大多数新问题，同时将遗留的东西留在旧的 angularJS 中。这将是一个混乱的下坡问题，但玩得开心。

@James 我的博客？我认为我没有提到任何关于过渡的内容。但无论如何感谢您的阅读！ :)