How to inject AngularJS dependencies while calling from Angular module

Question

I am trying to host a simple hybrid application (AngularJS + Angular 7). I was able to set the basic and bootstrap both the modules based on the guidelines. I was able to establish the communication from AngularJS to Angular.

I followed the guidelines for injecting AngularJS service in the Angular module ( https://angular.io/guide/upgrade ). However, I see there are few issues that I am stuck with which could be a basic set up which I am trying to understand.

Here is the real issue, When I try to call the AngularJS service from Angular, it fails during the run time stating the dependency injected in AngularJS service is undefined. For ex: $http is not defined.

My question is, do I need to inject this dependency through a provider in the Angular module, I have a provider which injects the service itself to the Angular module. Any help with the guidelines or standards would be helpful.

Here is the format of my AngularJS service. At present, I am modifying this to class and trying to invoke from Angular

function GetUsers( $http, OtherDependency) {

return {
  getUsers: getUsers
}

function getUsers(userID, key, phrase) {
//$http is used inside this method 
}

In angular, I am injecting this service through a provider and trying to use this service by instantiating through its constructor

try to use `@Inject` in your Angular component's constructor, `constructor(@Inject('$http') public $http: any) { }` — Kevin Zhang, Jan 07 '21 at 14:11
@KevinZhang Do you mean I have to inject all the 3rd party AngularJS dependencies inside the Angular service as well ? Whenever I do this I end up getting an error 'Error: Trying to get the AngularJS injector before it being set.' Hence removed that — CrazyMac, Jan 07 '21 at 14:19
Could you write a simplify demo in stackbliz, thus I can look into that. — Kevin Zhang, Jan 07 '21 at 14:23
@KevinZhang I have tried to capture the minimal details https://stackblitz.com/edit/angular-ivy-ku8u2w — CrazyMac, Jan 07 '21 at 14:41
@KevinZhang I have the same code as you have mentioned in angular module. Will there be any change in AngularJS service to make the dependency injected in a different way because its complaining about the dependency missing in that file — CrazyMac, Jan 07 '21 at 18:44

score 1 · Answer 1 · answered Jan 07 '21 at 15:37

Since your stackbliz demo is not runnable, from my project, I just create a Angular SharedModule and inject angularjs services to provider like below:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';


export function getToastrService($injector: any) {
    return $injector.get('toastr');
}

export function getLoadingService($injector: any) {
    return $injector.get('loadingService');
}

@NgModule({
    imports: [
        CommonModule
    ],
    exports: [
        NgxComponentsModule
    ],
    providers: [
        { provide: 'toastr', deps: ['$injector'], useFactory: getToastrService },
        { provide: 'loadingService', deps: ['$injector'], useFactory: getLoadingService }
    ]
})
export class NgxSharedModule { }

And then in my Angular business module, import SharedModule, and then only need to use DI in constructor:

constructor(@Inject('toastr') public toastr: any,
        private notifyService: NotifyService) { }

Hope it will work for you.

Thanks for your response. I have pretty much the same code. except that I have the export function in a separate provider file and including the providers under 'NgModule providers: []'. I inject the same way as you have mentioned in the constructor but it still bounces back with this error 'Error: Trying to get the AngularJS injector before it being set.' — CrazyMac, Jan 07 '21 at 16:31
I am injecting the dependencies in AngularJS through the *.$inject = ['http']. When this is called from Angular module, this is being complained stating http is undefined — CrazyMac, Jan 07 '21 at 20:55

How to inject AngularJS dependencies while calling from Angular module

1 Answers1