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

trouble encountered when attempting to integrate typeahead functionality in AngularJS using jQuery

Can you guide me on how to access an Angular route using a URL that includes query parameters?

The declaration of module 'DynamicTestModule' contains an unexpected value 'StateService'

Passing a service into a directive results in an undefined value

Issues with ng-model disappearing while using ng-include (AngularJS)

Learn how to create a clickable div that redirects to a URL in Angular JS

Applying a setvalidator to a FormControl doesn't automatically mark the form as invalid

Detecting Unflushed Requests in Jasmine and AngularJS

Is it possible to use TypeScript or Angular to disable or remove arrow key navigation from a PrimeNG Table programmatically?

Add CSS styling to a particular div element when a button is clicked

Awesomium crashes when attempting to open a website containing an ionic2 application

Tips for styling your Angular Material Card on mobile devices

Angular does not delay for promises to settle

Error message: In my router module, Angular's 'Subject' is not subscribed to

Importing a file using its absolute path in JavaScript

Exploring Angular 2 with Visual Studio 2015 Update 1 in the context of Type Script Configuration

TypeScript's robustly-typed rest parameters

Exploring Angular 5: Injecting a Service in Unconventional Places

Type the query into the search bar on the website, hit the submit button, and receive the search results

Having trouble with browser freezing when using array push in Angular 4? Looking for a solution to fix this issue?