Using Angular NgUpgrade to inject an AngularJS service into an Angular service results in an error message stating: Unhandled Promise rejection: Cannot read property 'get' of undefined; Zone:

Question

Using Angular NgUpgrade to inject an AngularJS service into an Angular service results in an error message stating: Unhandled Promise rejection: Cannot read property 'get' of undefined; Zone:

I have noticed several similar issues on this platform, but none of the solutions seem to work for me. My understanding is that because our Ng2App is bootstrapped first, it does not have a reference to $injector yet. Consequently, when I attempt to use it in my provider declaration (deps: ['$injector']), it throws an error.

What is extremely peculiar is that I can successfully utilize this service in an Angular COMPONENT, but encounter difficulties when trying to use it in an Angular SERVICE.

Here is the relevant code snippet:

import UserService from './user.service';
angular.module('app', [])
  .service('UserService', UserService)
  .config(/* config */)
  .run(/* run */);

 import './ng2app.module';

In the ng2app.module.ts file:

import { BrowserModule } from '@angular/platform-browser';
import { UpgradeModule } from '@angular/upgrade/static';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
@NgModule({
  imports: [
    BrowserModule,
    UpgradeModule,
  ], 
  declarations: [],
  entryComponents: [],
  providers: [
    // angularJS service:
    { 
     provide: 'UserService',
     useFactory: (i: any) => i.get('UserService'), // <---- this is the line all the errors point to.
     deps: ['$injector']
    },
  ]
})
export default class Ng2AppModule {
  constructor(){}
}


platformBrowserDynamic()
  .bootstrapModule(Ng2AppModule)
  .then(platformRef => {
    const upgrade = platformRef.injector.get(UpgradeModule) as UpgradeModule;
    upgrade.bootstrap(document.documentElement, ['app'], {strictDi: true});
});

Later... in a service (fails):

import {Injectable, Inject} from "@angular/core";
import UserService from 'app/login/user.service';

@Injectable()
export class AnAngularService{
  constructor(
    // causes the error if I uncomment it wtf: <--------------
    // @Inject('UserService') private userService: UserService
  ){}
}

Later... in a component (works properly):

import { Component } from '@angular/core';
import {Inject} from "@angular/core";
import UserService from 'app/login/user.service';
import template from 'tmpl.html';

@Component({
  selector: 'an-angular-component',
  template,
})
export class AnAngularComponent{
  constructor(

    @Inject('UserService') private userService: UserService
  ){
    console.log(userService) // works just fine. wtf <--------------
  }
}

Is anyone familiar with why this issue occurs and how it can be resolved?

A similar question has been asked before, but the suggested solutions did not work for me.

AngularJS version: 1.5.8
Angular/core etc version: 4.2.4

I have also raised this issue on Github in the Angular repository for further reference.

StackTrace:

zone.js:522 Unhandled Promise rejection: Cannot read property 'get' of undefined ; Zone: <root> ; Task: Promise.then ; Value: TypeError: Cannot read property 'get' of undefined
   ... (remaining stack trace details are omitted for brevity)

angularjs angular typescript ng-upgrade angular-upgrade

Answer 1

Answer №1

It appears to be a timming issue with the placement of @NgModule({ providers: [] }) and resolving upgrade.bootstrap.

The $injector is required here, but was not injected when requested.

According to the documentation, you should utilize the ngDoBootstrap hook.

export function userServiceFactory(i: any) {
  return i.get('UserService');
}

export const userServiceProvider = {
  provide: 'UserService',
  useFactory: userServiceFactory,
  deps: ['$injector']
};

import { BrowserModule } from '@angular/platform-browser';
import { UpgradeModule } from '@angular/upgrade/static';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
@NgModule({
  imports: [
    BrowserModule,
    UpgradeModule,
  ], 
  declarations: [],
  entryComponents: [],
  providers: [
     userServiceProvider
  ]
}) 


export default class Ng2AppModule {

   constructor(private upgrade: UpgradeModule) { }

   ngDoBootstrap() {
     this.upgrade.bootstrap(document.body, ['app'], { strictDi: true });
   }
}

platformBrowserDynamic().bootstrapModule(Ng2AppModule);

edited by andrew luhring for posterity Regrettably, despite following the exact guidance from angular docs, the suggested solution did not work. The initial answer provided was:

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

useFactory: (forwardRef(() => '$injector')i: any) => i.get('UserService')

Which seemed closer to a resolution than the current one. However, it turned out that TypeScript was having issues with the syntax.

Update:

We were preoccupied with the useFactory aspect, overlooking the simple fix of adding forwardRef to the service.

@Injectable()
export class AnAngularService{
  constructor(@Inject(forwardRef(() => 'UserService')) private userService: UserService
  ){}
}

Answer 2

It appears to be a timming issue with the placement of @NgModule({ providers: [] }) and resolving upgrade.bootstrap.

The $injector is required here, but was not injected when requested.

According to the documentation, you should utilize the ngDoBootstrap hook.

export function userServiceFactory(i: any) {
  return i.get('UserService');
}

export const userServiceProvider = {
  provide: 'UserService',
  useFactory: userServiceFactory,
  deps: ['$injector']
};

import { BrowserModule } from '@angular/platform-browser';
import { UpgradeModule } from '@angular/upgrade/static';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
@NgModule({
  imports: [
    BrowserModule,
    UpgradeModule,
  ], 
  declarations: [],
  entryComponents: [],
  providers: [
     userServiceProvider
  ]
}) 


export default class Ng2AppModule {

   constructor(private upgrade: UpgradeModule) { }

   ngDoBootstrap() {
     this.upgrade.bootstrap(document.body, ['app'], { strictDi: true });
   }
}

platformBrowserDynamic().bootstrapModule(Ng2AppModule);

edited by andrew luhring for posterity Regrettably, despite following the exact guidance from angular docs, the suggested solution did not work. The initial answer provided was:

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

useFactory: (forwardRef(() => '$injector')i: any) => i.get('UserService')

Which seemed closer to a resolution than the current one. However, it turned out that TypeScript was having issues with the syntax.

Update:

We were preoccupied with the useFactory aspect, overlooking the simple fix of adding forwardRef to the service.

@Injectable()
export class AnAngularService{
  constructor(@Inject(forwardRef(() => 'UserService')) private userService: UserService
  ){}
}

Answer 3

Answer №2

After some experimentation, I managed to find a workaround that might not be the most elegant solution, but it does get the job done. However, I believe there must be a more efficient approach out there. Therefore, I won't mark this as resolved, and whoever comes up with a smoother solution will still receive the bounty.

import { BrowserModule } from '@angular/platform-browser';
import { UpgradeModule } from '@angular/upgrade/static';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
@NgModule({
  imports: [
    BrowserModule,
    UpgradeModule,
  ], 
  declarations: [],
  entryComponents: [],
  providers: [
    // AngularJS service:
    {
      provide: 'UserService',
      useFactory: () => {
        return new Promise((resolve) => {
          setTimeout(function(){
            resolve(angular.element(document)
                .injector().get('UserService'))
          },1);
        })
      },
      deps: []
    },

  ]
})
export default class Ng2AppModule {
  constructor(){}
}

^ The trick here is to return a promise and utilize setTimeout to wait for the next tick before resolving the AngularJS injector.

Within your service:

import {Injectable, Inject} from "@angular/core";
import UserService from 'app/login/user.service';

@Injectable()
export class AnAngularService{
  constructor(
    @Inject('UserService') private userService: any,
  ){

    userService.then(function(_userService){
       _userService.doAThing();
    });
    }
}

As for your component:

import { Component } from '@angular/core';
import {Inject} from "@angular/core";
import UserService from 'app/login/user.service';
import template from 'tmpl.html';

@Component({
  selector: 'an-angular-component',
  template,
})
export class AnAngularComponent{
  constructor(
    @Inject('UserService') private userService: any,
  ){
    userService.then((us)=>{ console.log(us); })
  }
}

So, indeed, this method works, even though it can be considered somewhat of a hack. There must be a cleaner way to achieve the same result. Any suggestions on how to improve this process?

Answer 4

After some experimentation, I managed to find a workaround that might not be the most elegant solution, but it does get the job done. However, I believe there must be a more efficient approach out there. Therefore, I won't mark this as resolved, and whoever comes up with a smoother solution will still receive the bounty.

import { BrowserModule } from '@angular/platform-browser';
import { UpgradeModule } from '@angular/upgrade/static';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
@NgModule({
  imports: [
    BrowserModule,
    UpgradeModule,
  ], 
  declarations: [],
  entryComponents: [],
  providers: [
    // AngularJS service:
    {
      provide: 'UserService',
      useFactory: () => {
        return new Promise((resolve) => {
          setTimeout(function(){
            resolve(angular.element(document)
                .injector().get('UserService'))
          },1);
        })
      },
      deps: []
    },

  ]
})
export default class Ng2AppModule {
  constructor(){}
}

^ The trick here is to return a promise and utilize setTimeout to wait for the next tick before resolving the AngularJS injector.

Within your service:

import {Injectable, Inject} from "@angular/core";
import UserService from 'app/login/user.service';

@Injectable()
export class AnAngularService{
  constructor(
    @Inject('UserService') private userService: any,
  ){

    userService.then(function(_userService){
       _userService.doAThing();
    });
    }
}

As for your component:

import { Component } from '@angular/core';
import {Inject} from "@angular/core";
import UserService from 'app/login/user.service';
import template from 'tmpl.html';

@Component({
  selector: 'an-angular-component',
  template,
})
export class AnAngularComponent{
  constructor(
    @Inject('UserService') private userService: any,
  ){
    userService.then((us)=>{ console.log(us); })
  }
}

So, indeed, this method works, even though it can be considered somewhat of a hack. There must be a cleaner way to achieve the same result. Any suggestions on how to improve this process?

Answer 5

Answer №3

To work around this issue, I decided to utilize the Angular Core Injector class in order to access the upgraded AngularJs service as needed, rather than directly injecting it into the constructor.

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

@Injectable()
class MyAngularService {
  constructor(private injector: Injector) {
    //
  }

  myMethodUsingUpgradedService() {
    const myAngularJsUpgradedService = this.injector('MyAngularJsUpgradedService');

    // Accessing myAngularJsUpgradedService now
  }
}

Answer 6

To work around this issue, I decided to utilize the Angular Core Injector class in order to access the upgraded AngularJs service as needed, rather than directly injecting it into the constructor.

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

@Injectable()
class MyAngularService {
  constructor(private injector: Injector) {
    //
  }

  myMethodUsingUpgradedService() {
    const myAngularJsUpgradedService = this.injector('MyAngularJsUpgradedService');

    // Accessing myAngularJsUpgradedService now
  }
}

Using Angular NgUpgrade to inject an AngularJS service into an Angular service results in an error message stating: Unhandled Promise rejection: Cannot read property 'get' of undefined; Zone:

Later... in a service (fails):

Later... in a component (works properly):

Is anyone familiar with why this issue occurs and how it can be resolved?

I have also raised this issue on Github in the Angular repository for further reference.

Answer №1

Answer №2

Within your service:

As for your component:

Answer №3

Similar questions

"Jest test.each is throwing errors due to improper data types

Tips for retrieving a server-set cookie in your Angular 2 application, and guidelines for including the same cookie in requests made by your Angular 2 application

The ng-controller directive fails to function on the content of Kendo tabstrip tabs

Introduction to Angular initial rendering

Is it possible to configure npm to publish to an organization different from the one automatically detected from package.json?

Is it possible to utilize Webpack 5's ChunkGroup API with several entries?

Transpiler failed to load

Guide: Building a Dropdown Form in Angular 2

Tips for accurately implementing the onHoverIn TS type in the React Native Web Pressable component

prepend a string to the start of ng-model

Angular Reactive Forms - Adding Values Dynamically

Reassigning Key Names and Types Based on Conditions

Using Ionic 2 to fetch JSON data and display it using ngFor

Error: The iOS 14.2 system is unable to locate the variable "webkit."

Managing clicks outside of the render function

SheetJS excel-cell customization

Issue with NGRX: component does not reflect state changes

Converting dates in JavaScript to the format (d MMMMM yyyy HH:mm am) without using moment.js

How can I detect the shift key press when an array key is pressed in Angular 2?

Angular - delay execution until the variable has a value