如何在 Angular 5 组件中注入 AngularJS 服务？

Question

我正在使用 ngUpgrade 技术将一个 AngularJS 项目迁移到 Angular 5，但是在尝试将一个 AngularJS 服务注入到其中一个新组件时遇到了问题。

我遵循了Angular的升级指南，创建了一个服务提供商，该服务提供商使用$injector（请参见下面的代码），但我仍然会收到以下错误：

core.js:1449 ERROR Error: Uncaught (in promise): Error: Trying to get the AngularJS injector before it being set.

我怀疑我需要在某个地方使用forwardRef 来解决此问题，但我无法找出如何、何时和为什么使用它。

---

按照升级指南的示例，我创建了以下服务提供程序：

ajs-upgraded-providers.ts:

// The AngularJS service I want to use
import { AuthenticationService } from '../ajs/services/authentication.service';

export function authenticationServiceFactory($injector) {
    return $injector.get('authentication');
}

export const authenticationServiceProvider = {
    provide: AuthenticationService,
    useFactory: authenticationServiceFactory,
    deps: ['$injector']
};

然后我将其提供给应用程序的NgModule：

app.module.ts:

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        UpgradeModule,
    ],
    providers: [
        authenticationServiceProvider,
    ],
    bootstrap: [
        AppComponent,
    ],
})
export class AppModule {
}

我使用ngUpgrade来引导该模块：

main.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { UpgradeModule } from '@angular/upgrade/static';
import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

// Import our AngularJS module
import '../ajs/app';

platformBrowserDynamic()
    .bootstrapModule(AppModule)
    .then(platformRef => {
        // Use the upgrade module to bootstrap the hybrid
        const upgrade = platformRef.injector.get(UpgradeModule) as UpgradeModule;
        upgrade.bootstrap(document.documentElement, ['myAngularJSApp']);
    });

如果我理解正确的话，这将允许我直接将AngularJS服务注入到我的组件中，就像这样：

login.component.ts

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

import { AuthenticationService } from '../ajs/services/authentication.service';

@Component({
    selector: 'my-login-page',
    templateUrl: './login-page.component.html'
})
export class LoginPageComponent {    
    constructor(private authenticationService: AuthenticationService) {
        console.log('authentication', authenticationService);
    }
}

---

我能做些什么来进一步简化这个过程吗？我尽可能地按照升级指南进行操作，为什么还是不能成功呢？

- Stephan Muller

---

你尝试在构造函数中定义过吗？并在 Angular 的 app.module 中进行定义。 - bhaumik shah

在我的构造函数中定义什么？我不确定你的意思。 - Stephan Muller

供应商: [ 身份验证服务] - bhaumik shah

如上所述，我遵循了这个指南：https://angular.io/guide/upgrade#making-angularjs-dependencies-injectable-to-angular。这意味着我不直接提供`AuthenticationService`，而是为它创建了一个serviceProvider，并在`app.module.ts`中提供了它。 - Stephan Muller

@StephanMuller，你有解决这个问题的方法吗？ - Prasanth S

Answer 1

你需要添加

。

providers: [AuthenticationService] 

在组件声明中，像这样：

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

import { AuthenticationService } from '../ajs/services/authentication.service';
@Component({
    selector: 'my-login-page',
    templateUrl: './login-page.component.html',
    providers: [AuthenticationService] 
})
export class LoginPageComponent {    
    constructor(private authenticationService: AuthenticationService) {
        console.log('authentication', authenticationService);
    }
}

- Nickolay Poliakow