'downgradeInjectable and the . run block - Trying to get the Angular injector before bootstrapping the corresponding Angular module

I'm currently working on upgrading a AngularJS application to Angular. So far everything is going well I have created a downgraded bootstrap component in Angular to emit when the Angular App is loaded and we can show the AngularJS view.

<!—- downgraded Angular component to emit when loaded -->
<ng-bootstrapper (initialized)="$ctrl.onInit()"></ng-bootstrapper>
<div class="container" ng-if="$ctrl.isLoaded">
    <div class="ui-view-container">
      <div class="main-content" ui-view></div>
    </div>
</div>

This is the AnguarJS controller associated with the view above

class bootstrapController {
  constructor($rootScope) {
    this.$rootScope = $rootScope;
    this.isLoaded = false;
    onInit() {
      this.isLoaded = true;
    }
    // some other stuff here with $rootScope
}

Now I need to downgrade an Angular Service to AngularJS and then access it in the AngularJS module .run block.

So, in my AngularJS app I have I downgrade my Angular Service like so (I have omitted a lot of code for simplicity)

export default angular
    .module('myAngularJSApp', [])
    .controller('bootstrapController', ['$rootScope', bootstrapController])
    // lots of .component, .directive, etc, below is the service I wish to access in the .run block
    .factory('angularCarService', downgradeInjectable(CarService))
    // now access the angularCarService in the run block
    .run(['angularCarService', (angularCarService) => {
        console.log(angularCarService);
    }]);

Sadly I get the following error in the console:

Uncaught Error: Error while instantiating injectable 'angularCarService': Trying to get the Angular injector before bootstrapping the corresponding Angular module

I then thought I would try and access the downgraded service using $injector like so...

export default angular
    .module('myAngularJSApp', [])
    .controller('bootstrapController', ['$rootScope', bootstrapController])
     // lots of .component, .directive, etc, below is the service I wish to access in the .run block
    .factory('angularCarService', downgradeInjectable(CarService))
    // now access the angularCarService in the run block
    .run(['$injector', ($injector) => {
        const service = $injector.get('angularCarService');
        console.log(service);
    }]);

Sadly this gives the same error. I'm not sure what I am doing wrong or why the downgraded service is not available? Can I access the downgraded service in the .run block? I tried to pass the downgraded service to the bootstrapControllerbut that wasn't successful either. Any advice or help on how I can access the downgraded service would be great and appreciated. If the above makes no sense or is badly worded please say and I will rephrase the question and add or remove code.



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source