在引导混合 angular 1 + 2 应用程序时，如何初始化 angular 1 注入器？答案

【问题标题】：While bootstrapping a hybrid angular 1 + 2 application, how do you initialize the angular 1 injector?在引导混合 angular 1 + 2 应用程序时，如何初始化 angular 1 注入器？
【发布时间】：2017-05-15 17:06:04
【问题描述】：

为了重现这个问题，我分叉了 Angular Quickstart plunker。

我有这个简单的 Angular 1.x 模块：

'use strict';

angular.module('testModule', [])
  .factory('testService', function($q, $log, $interval, $rootScope){
    //Create a service object that we'll build up with methods and eventually
    //return.
    var service = {};
    service.test = 'test';
    return service;
  });

我有这个 angular 2 模块，它引用 angular 1.x $injector 来获取 angular 1.x 模块作为提供者：

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
  ],
  bootstrap: [ AppComponent ],
  providers: [{
    provide: 'testModule',
    useFactory: (i: any) => i.get('testModule'),
    deps: ['$injector']
  }]

})

export class AppModule {
  ngDoBootstrap() {}
}

我有我的 angular 2 组件，它通过依赖注入请求 angular 1.x 模块：

import { Component, Inject } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `<h1>Hello {{name}}, my name is {{myName}}</h1>`
})
export class AppComponent { 
  name = 'Angular'; 
  constructor(@Inject('testModule') testModule: any) {
    this.myName = testModule.test;
  }
}

然后我引导 angular 2 模块和 angular 1.x 模块

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';

platformBrowserDynamic().bootstrapModule(AppModule).then(platformRef => {
  const upgrade = platformRef.injector.get(UpgradeModule) as UpgradeModule;
  upgrade.bootstrap(document.body, ['testModule'], {strictDi: true});
});

然后我得到这个错误TypeError: Cannot read property 'get' of undefined at useFactory，它发生在我在 angular 2 模块中指定为提供程序定义的“useFactory”属性的箭头函数内

providers: [{
    provide: 'testModule',
    useFactory: (i: any) => i.get('testModule'),
    deps: ['$injector']
}]

我认为关于如何在混合 angular 1 + 2 应用程序中初始化 angular 1.x 注入器，我有一些不明白的地方。你可以看到我正在通过脚本标签拉入 angular 1.x，否则我的 angular 1.x 模块会抛出关于“angular”未定义的错误，我怀疑问题可能与此有关。如果有人可以提供指导，我将不胜感激。

这里是 plunker：https://plnkr.co/edit/wdR7K4rDKoF8L0pfQypM?p=info

这是调用堆栈的错误：

TypeError：无法读取未定义的属性“get” 在 useFactory (https://run.plnkr.co/IgsjEBjD2d29O3YH/app/app.module.ts!transpiled:32:56) 在 AppModuleInjector.get (/AppModule/module.ngfactory.js:140:65) 在 AppModuleInjector.getInternal (/AppModule/module.ngfactory.js:192:46) 在 AppModuleInjector.NgModuleInjector.get (https://unpkg.com/@angular/core/bundles/core.umd.js:8918:48) 在 CompiledTemplate.proxyViewClass.AppView.injectorGet (https://unpkg.com/@angular/core/bundles/core.umd.js:12319:49) 在 CompiledTemplate.proxyViewClass.DebugAppView.injectorGet (https://unpkg.com/@angular/core/bundles/core.umd.js:12699:53) 在 CompiledTemplate.proxyViewClass.View_AppComponent_Host0.createInternal (/AppModule/AppComponent/host.ngfactory.js:15:63) 在 CompiledTemplate.proxyViewClass.AppView.createHostView (https://unpkg.com/@angular/core/bundles/core.umd.js:12275:25) 在 CompiledTemplate.proxyViewClass.DebugAppView.createHostView (https://unpkg.com/@angular/core/bundles/core.umd.js:12683:56) 在 ComponentFactory.create (https://unpkg.com/@angular/core/bundles/core.umd.js:7710:29) 在 ApplicationRef_.bootstrap (https://unpkg.com/@angular/core/bundles/core.umd.js:8677:61) 在评估 (https://unpkg.com/@angular/core/bundles/core.umd.js:8506:93) 在 Array.forEach （本机）在 PlatformRef_._moduleDoBootstrap (https://unpkg.com/@angular/core/bundles/core.umd.js:8506:46) 在评估 (https://unpkg.com/@angular/core/bundles/core.umd.js:8458:31)

【问题讨论】：

标签： angularjs provider hybrid

【解决方案1】：

我遇到了同样的问题，并在github 上找到了我的案例的解决方案。看看更新的plunker。请注意，您的代码中还有其他不相关的问题。评论了<script src="test-module.js"></script> 和testService 的隐式注入参数。希望对你有帮助。

【讨论】：