Encountering an error message stating "Unable to access property 'injector' as null when attempting to downgrade Angular 2 service."

Question

Encountering an error message stating "Unable to access property 'injector' as null when attempting to downgrade Angular 2 service."

Hello everyone, I could use some assistance with a particular issue I'm facing.

Below is the code snippet from my angular 1.x app.js:

angular.module('app', []);

angular.module('app.test', ['app'])
    .config(($stateProvider) => 
        $stateProvider.state('base', {
                url: '/',
                controller: 'TestStateCtrl',
                resolve: {
                    authenticationCheck: ['angularNg1Service', angularNg1Service=> {
                        angularNg1Service.test1();
                    }]
                }
            })
        })
    .run((angularNg1Service) => {
        angularNg1Service.test2();

    });

Here is the code for my angularNg1Service:

    angular.module('app')
    .service('angularNg1Service',
        function (angularNg2Service} {
            //some code here 
}

The angularNg2Service is downgraded before the .run function of the angular 1.x module is executed:

window['angular']
        .module('app')
        .factory(
            'angularNg2Service',
            upgradeAdapter.downgradeNg2Provider(AngularNg2Service)
        );

However, I am encountering an error message:

Cannot read property 'injector' of null

This error occurs when the .run function of the angular 1.x module starts.

Below is my main.ts file:

import { upgradeAdapter } from './upgradeAdapter';
import { bootstrapNg1Components } from './app/ng1Components';    
bootstrapNg1Components(upgradeAdapter);// this function downgrades my AngularNg2Service

upgradeAdapter.bootstrap(document.querySelector('html'), ['app.start']);

I have searched for similar issues, but haven't been able to find a solution.

I have several Angular2 Services that are successfully downgraded. The problem seems to be isolated to one specific service that is injected into an Angular1 service used in the .run function.

angularjs angular typescript upgrade downgrade

Answer 1

Answer №1

If you encounter an issue, you can try this workaround explained in detail at https://github.com/angular/angular/issues/10992: insert your run code within a setTimeout function.

angular.module('app.test', ['app'])
...
    .run(($injector) => {
        setTimeout(function() {
           var angularNg1Service = $injector.get('angularNg1Service');
           angularNg1Service.doSmth();
           // downgraded angularNg2Service is available here
           // inside of async function that will run after module.run method
           var angularNg2Service = $injector.get('angularNg2Service');
        },0);
    });

To ensure the application state is not started before the application is configured (performed in the run method), you can add a resolve for every state.

angular.module('app.test', ['app'])
    .config(($stateProvider) => 
        $stateProvider.state('base', {
            url: '/',
            controller: 'TestStateCtrl',
            resolve: {
                appBootstrapped: ['appBootstrapStateService', () => {
                    return appBootstrapStateService.statePromise;
                ]},
                authenticationCheck: ['angularNg1Service', 'appBootstrapped', (angularNg1Service, appBootstrapped) => {
                    angularNg1Service.test1();
                }]
            }
        })
    })

To ensure it functions correctly, you need to change the bootstrapped state at the end of the module.run method.

angular.module('app.test', ['app'])
    ...
    .run(($injector) => {
        setTimeout(function() {
            ...
            var appBootstrapStateService = $injector.get('appBootstrapStateService');
            appBootstrapStateService.complete(); // allow state to work
        },0);
    });

appBootstrapStateService is an angularJS service similar to:

angular.module('app')
    .service('appBootstrapStateService', function () {
        const stateSubject = new Rx.Subject();
        this.statePromise = stateSubject.asObservable().toPromise();

        this.complete = () => {
            stateSubject.complete();
        };
    });

Answer 2

If you encounter an issue, you can try this workaround explained in detail at https://github.com/angular/angular/issues/10992: insert your run code within a setTimeout function.

angular.module('app.test', ['app'])
...
    .run(($injector) => {
        setTimeout(function() {
           var angularNg1Service = $injector.get('angularNg1Service');
           angularNg1Service.doSmth();
           // downgraded angularNg2Service is available here
           // inside of async function that will run after module.run method
           var angularNg2Service = $injector.get('angularNg2Service');
        },0);
    });

To ensure the application state is not started before the application is configured (performed in the run method), you can add a resolve for every state.

angular.module('app.test', ['app'])
    .config(($stateProvider) => 
        $stateProvider.state('base', {
            url: '/',
            controller: 'TestStateCtrl',
            resolve: {
                appBootstrapped: ['appBootstrapStateService', () => {
                    return appBootstrapStateService.statePromise;
                ]},
                authenticationCheck: ['angularNg1Service', 'appBootstrapped', (angularNg1Service, appBootstrapped) => {
                    angularNg1Service.test1();
                }]
            }
        })
    })

To ensure it functions correctly, you need to change the bootstrapped state at the end of the module.run method.

angular.module('app.test', ['app'])
    ...
    .run(($injector) => {
        setTimeout(function() {
            ...
            var appBootstrapStateService = $injector.get('appBootstrapStateService');
            appBootstrapStateService.complete(); // allow state to work
        },0);
    });

appBootstrapStateService is an angularJS service similar to:

angular.module('app')
    .service('appBootstrapStateService', function () {
        const stateSubject = new Rx.Subject();
        this.statePromise = stateSubject.asObservable().toPromise();

        this.complete = () => {
            stateSubject.complete();
        };
    });

Encountering an error message stating "Unable to access property 'injector' as null when attempting to downgrade Angular 2 service."

Answer №1

Similar questions

Encountered an issue while resolving symbol values statically within my exclusive set of modules

Order of execution for Angular 2 components

AngularJS does not allow data to be deleted in mongodb

Unable to append item to document object model

Utilizing RxJs Observables in a service across various pages necessitates manual triggering of change detection

Tips for limiting users to inputting only alphanumeric characters and excluding special characters in an input field using Angular 8

What could be causing the Angular imports to not function properly?

Using Angular and Typescript to Submit a Post Request

Issue with displaying value in AngularJS $scope

Exploring the implementation of if/else statements in Sass/HTML

Utilizing the Yelp API and/or the Google Places API for project development

What is the best way to provide a parameter to the query function in an Angular service class?

Exploring Angular 9: Experimenting with iterating over a collection of objects and performing validations

Tips for recognizing hyperlinks within a block of text and converting them to clickable links in Angular 2

Adding an ellipsis (...) at the end of a specific number of characters within AngularJS

Sharing models between AngularJS controllers

Slider component designed for selecting ranges of letters in the alphabet using

Accessing the parent scope from a directive within a nested ng-repeat in AngularJs

Navigating through Angular Material table elements

Issue with AngularJs Autocomplete: this.source is not being recognized as a function