在引導混合角度1 + 2應用程序時，如何初始化角度1噴射器？

爲了重新創建問題，我分叉了Angular Quickstart plunker。在引導混合角度1 + 2應用程序時，如何初始化角度1噴射器？

我有這個簡單的角度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; 
    });

我有這個角2模塊，它引用了角的1.x $噴油器來獲得角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() {} 
}

我有我的角2組分，其通過依賴注入請求角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; 
    } 
}

我然後引導角2模塊和角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這是從指定爲提供者定義我在的「useFactory」屬性的箭頭函數內發生角2模塊

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

我覺得有一些東西我不理解如何在混合角1 + 2應用程序初始化角1.x的注射器。你可以看到我通過腳本標記拉角1.x，否則我的角1.x模塊將拋出一個關於「角」沒有被定義的錯誤，我懷疑這個問題可能與此有關。如果有人能提供指導，我會很感激。

這裏是plunker：https://plnkr.co/edit/wdR7K4rDKoF8L0pfQypM?p=info

這裏是調用堆棧中的錯誤：

TypeError: Cannot read property 'get' of undefined at useFactory (https://run.plnkr.co/IgsjEBjD2d29O3YH/app/app.module.ts!transpiled:32:56) at AppModuleInjector.get (/AppModule/module.ngfactory.js:140:65) at AppModuleInjector.getInternal (/AppModule/module.ngfactory.js:192:46) at AppModuleInjector.NgModuleInjector.get (https://unpkg.com/@angular/core/bundles/core.umd.js:8918:48) at CompiledTemplate.proxyViewClass.AppView.injectorGet (https://unpkg.com/@angular/core/bundles/core.umd.js:12319:49) at CompiledTemplate.proxyViewClass.DebugAppView.injectorGet (https://unpkg.com/@angular/core/bundles/core.umd.js:12699:53) at CompiledTemplate.proxyViewClass.View_AppComponent_Host0.createInternal (/AppModule/AppComponent/host.ngfactory.js:15:63) at CompiledTemplate.proxyViewClass.AppView.createHostView (https://unpkg.com/@angular/core/bundles/core.umd.js:12275:25) at CompiledTemplate.proxyViewClass.DebugAppView.createHostView (https://unpkg.com/@angular/core/bundles/core.umd.js:12683:56) at ComponentFactory.create (https://unpkg.com/@angular/core/bundles/core.umd.js:7710:29) at ApplicationRef_.bootstrap (https://unpkg.com/@angular/core/bundles/core.umd.js:8677:61) at eval (https://unpkg.com/@angular/core/bundles/core.umd.js:8506:93) at Array.forEach (native) at PlatformRef_._moduleDoBootstrap (https://unpkg.com/@angular/core/bundles/core.umd.js:8506:46) at eval (https://unpkg.com/@angular/core/bundles/core.umd.js:8458:31)

來源

2017-01-01 Victor

我有同樣的問題，找到了我的github情況下的解決方案。看看更新的plunker。請注意，您的代碼中還有其他不相關的問題。評論<script src="test-module.js"></script>和testService的隱式注入參數。希望它能幫助你。

來源

2017-03-10 11:13:04

在引導混合角度1 + 2應用程序時，如何初始化角度1噴射器？

回答

相關問題