将 Angular 1 服务注入 Angular 4答案

【问题标题】：Injecting Angular 1 service into Angular 4将 Angular 1 服务注入 Angular 4
【发布时间】：2017-05-09 12:51:06
【问题描述】：

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

每当我尝试注入 Angular 1 服务时，我都会得到 Cannot read property 'get' of undefined。

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

我尝试使用 LinksService 的 Angular 4 服务如下所示：

@Injectable()
export class EntityService {

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

    }

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

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

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

Angular 1（旧版）的东西都可以正常工作。

似乎 Angular 找不到 $injector，但无论如何不应该在那里吗？

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

【问题讨论】：

你为什么不直接用 Angular 4 重写它？
这只是一个庞大而复杂的应用程序的一部分。大爆炸式重写现在不是一种选择（时间/资源限制）。
您好，您是否在Angular模块声明处导入了UpgradeModule，您已在其中注册了linksServiceProvider？
刚刚编辑了要包含的问题。感谢您指出。
这对我来说是个难题顺便问一下，请问您对 Angular >1 的体验如何？（我的意思是在 2 版本之后）你喜欢它比 Angular 1 更喜欢它吗？

标签： javascript angularjs angular typescript

【解决方案1】：

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

刚刚找到这个：

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

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

导出类 AppModule { 构造函数（升级：UpgradeModule）{ upgrade.bootstrap(document.body, [AppModuleName], {strictDi: true}); } // 设计上什么都不做。 // 这是为了方便“混合引导” ngDoBootstrap() {} } platformBrowserDynamic().bootstrapModule(AppModule);

感谢回复的人。

【讨论】：

等待在 Angular 服务中使用 AngularJS 服务是否有效？我让它适用于 Angular 组件，但不断收到 Angular 服务的错误

【解决方案2】：

其实实例化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));

【讨论】：