CODEWITHSUNDEEP
angularjsangular-hybrid
CrazyMac
CrazyMac

Reputation: 462

How to inject AngularJS dependencies while calling from Angular module

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

Upvotes: 0

Views: 435

Answers (1)

Kevin Zhang
Kevin Zhang

Reputation: 1072

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.

Upvotes: 1

Related Questions