9

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

我遵循了Angular 的升级指南并创建了一个使用$injector（见下面的代码）的 serviceProvider，但我不断收到这个错误：

core.js:1449 错误错误：未捕获（承诺）：错误：尝试在设置之前获取 AngularJS 注入器。

我怀疑我需要使用forwardRef某个地方来解决这个问题，但我无法找出如何以及在哪里（以及为什么）。

按照升级指南的示例，我创建了一个 serviceProvider，如下所示：

ajs-升级-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 服务注入到我的组件中，如下所示：

登录组件.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);
    }
}

我可以做些什么来简化这个吗？我试图尽可能地遵循升级指南，为什么这不起作用？

4

1 回答 1

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);
    }
}
于 2018-08-14T08:26:43.107 回答