将Angular 1服务注入Angular 4 [英] Injecting Angular 1 service into Angular 4

问题描述

使用概述这里，我正在尝试将Angular 1服务注入Angular 4应用程序。该应用程序以混合模式启动（并且正在运行，因为我运行了一些Angular 4组件和服务）。

Using the process outlined here, I'm trying to inject Angular 1 services into an Angular 4 app. The app is bootstrapped in hybrid mode (and works as I have some Angular 4 components and services running).

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

Whenever I try to inject the Angular 1 service, I get Cannot read property 'get' of undefined.

升级后的供应商：

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']
};

我试图使用LinksService的Angular 4服务如下：

My Angular 4 service which is trying to use LinksService looks like:

@Injectable()
export class EntityService {

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

    }

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

最后LinksService（Angular 1服务，用Typescript编写）看起来像：

And finally LinksService (the Angular 1 service, written in Typescript) looks like:

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
}

bootstrap和模块的东西：

The bootstrap and module stuff:

@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});
});

Angular 1（遗留）的东西一切正常。

The Angular 1 (legacy) stuff all works fine.

似乎Angular无法找到$ injector，但是不应该在那里吗？

It seems like Angular cant find the $injector, but shouldn't that be there regardless?

非常感谢任何建议，
Jeff

Many thanks for any suggestions, Jeff

推荐答案

我生命中的两天我不会回来但是......

Two days of my life I won't get back but...

刚发现：

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

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

Basically the documentation is wrong. By adding a constrcutor to the app module with the call to upgrade.bootstrap in it, everything works.

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 1服务注入Angular 4的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！