将Angular 1服务注入到Angular 4中

问题描述：

使用概述的过程here，我试图将Angular 1服务注入到Angular 4应用程序中。该应用程序以混合模式引导（并且因为我有一些Angular 4组件和服务正在运行）。将Angular 1服务注入到Angular 4中

每当我尝试注入Angular 1服务，我得到无法读取未定义的属性'get'。

升级-providers.ts：

import {LinksService} from "./+services/links/links"; 

export function linksServiceFactory(i: any) { 
    return i.get('bfLinksService');   // <--- Errors here! 
} 
export const linksServiceProvider = { 
    provide: LinksService, 
    useFactory: linksServiceFactory, 
    deps: ['$injector'] 
};

我的角4服务，这是试图用LinksService样子：

@Injectable() 
export class EntityService { 

    constructor (
     private http: Http, 
     private links: LinksService 
    ) { 

    } 

    get(id: string): Observable<OrgDetails> { 
     // Do something 
    } 
}

最后LinksService（该角1个服务，写在打字稿）看起来像：

export class LinksService { 

    static $inject = ["$log", "$location", PROPERTIES_SERVICE]; 

    private contentHost : string; 
    private thisAppHost : string; 

    constructor (private $log : ng.ILogService, private $location : ng.ILocationService, private props : IPropertiesService) { 
     this.init(); 
    } 

    // Service functions elided 
}

自举和模块的东西：

@NgModule({ 
    imports: [ 
     BrowserModule, 
     HttpModule, 
     UpgradeModule, 
    ], 
    declarations: [ 
     AppComponent, 
     OrgSummaryComponent, 
    ], 
    providers: [ 
     EntityService, 
     linksServiceProvider 
    ], 
    bootstrap: [ 
     AppComponent, 
    ], 
}) 
export class AppModule { 
    ngDoBootstrap() { 
     // Does nothing by design. 
     // This is to facilitate "hybrid bootstrapping" 
    } 
} 

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

角1（遗留）的东西都工作正常。

它似乎像Angular不能找到$注入器，但不应该在那里不管？

非常感谢您的任何建议，杰夫

为什么你不把它改写在角4？ –

这只是大型复杂应用程序的一部分。大爆炸重写现在不是一种选择（时间/资源限制）。 – jeffeld

你好，你是否已经在Angular模块声明中导入了UpgradeModule，在那里你已经注册了linksServiceProvider？ –

答

我的生活

两天我不会回来，但...

刚刚发现这一点：

https://github.com/angular/angular.io/issues/3317

基本上文档是错误的。通过在其中调用upgrade.bootstrap的应用程序模块添加一名constrcutor，一切正常。

 
export class AppModule { 

    constructor(upgrade: UpgradeModule) { 
     upgrade.bootstrap(document.body, [AppModuleName], {strictDi: true}); 
    } 

    // Does nothing by design. 
    // This is to facilitate "hybrid bootstrapping" 
    ngDoBootstrap() {} 
} 

platformBrowserDynamic().bootstrapModule(AppModule);

谢谢那些回复。

等待在Angular服务中使用AngularJS服务的这种工作？我知道它适用于Angular组件，但不断收到Angular服务的错误 –

答

其实更好的方式来实例化AngularJS是后：

platformBrowserDynamic().bootstrapModule(AppModule) 
    .then(platformRef => { 
    const upgrade = platformRef.injector.get(UpgradeModule) as UpgradeModule; 
    upgrade.bootstrap(document.body, ['app'], { strictDi: false }); 
    }) 
    .catch(err => console.log(err));

将Angular 1服务注入到Angular 4中

相关推荐