How do I inject an AngularJS service in an Angular 5 component?

Question

I'm migrating an AngularJS project to Angular 5 using ngUpgrade but I'm running into a problem when trying to inject an AngularJS service in one of my new components.

I followed Angular's upgrade guide and created a serviceProvider that uses the $injector (see code below) but I keep getting this error:

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

I suspect I need to use forwardRef somewhere to fix this, but I'm unable to find out how and where (and why).

Following the example of the upgrade guide I created a serviceProvider as follows:

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

Then I provide that to the app's NgModule:

app.module.ts:

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

I bootstrap that module using 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']);
    });

If I understand correctly, this should allow me to directly inject the AngularJS service into my component like so:

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

Can I do anything to simplify this even more? I tried to follow the upgrade guide as closely as possible, so why doesn't this work?

have you tried to define in your constructor? and define it in angular app.module — bhaumik shah, May 17 '18 at 13:59
As explained I followed this instruction: https://angular.io/guide/upgrade#making-angularjs-dependencies-injectable-to-angular. That means I don't provide `AuthenticationService` directly, but I created a serviceProvider for it that is provided in `app.module.ts` — Stephan Muller, May 17 '18 at 14:09

score 1 · Accepted Answer · answered Aug 14 '18 at 08:26

You need to add

providers: [AuthenticationService]

in Component declaration, like this:

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

How do I inject an AngularJS service in an Angular 5 component?

1 Answers1