**[EDIT] I've created a demo repository with this error: <https://github.com/SamanthaAdrichem/hybrid-lazy-load-angularjs-injector-error>**

We've followed the instructions, and all runs fine on normal hybrid, but adding lazy loading fails with the strange error above, and always implemented ui router the way the docs say (as you can see in the code below).

When loading the app all is fine, but when then clicking onto a lazy-loaded route we get the error

> 
> Transition Rejection($id: 0 type: 6, message: The transition errored,
> detail: Error: Trying to get the AngularJS injector before it being
> set.)
> 
> 
> 

I've tried the solutions listed here

<https://github.com/ui-router/angular-hybrid/issues/93>

<https://github.com/ui-router/angular-hybrid/issues/150>

<https://github.com/ui-router/angular-hybrid/issues/395>

<https://github.com/ui-router/sample-app-angular-hybrid/issues/10>

But none of these solve it. We don't use ng serve because that crashes with random memory issues (probably also due to hybrid), and we need to proxy to a login page, but the login page and our project would be running on the same port, which isn't possible. So that needs some refactoring in the backend.

It does sometimes load a new chunk file depending on what page i'm going to. But mostly i get this error.

Funny part is, in the page i'm testing we're not using any hybrid code.
Basically we're are no longer upgrading any code, we're only downgrading some observers to open modals of the older pages.

These are the versions we're running

```
"@angular/cli": "9.1.7",
"@angular/animations": "9.0.7",
"@angular/common": "9.0.7",
"@angular/compiler": "9.0.7",
"@angular/core": "9.0.7",
"@angular/forms": "9.0.7",
"@angular/localize": "9.0.7",
"@angular/platform-browser": "9.0.7",
"@angular/platform-browser-dynamic": "9.0.7",
"@angular/router": "9.0.7",
"@angular/upgrade": "9.0.7",
"@uirouter/angular": "6.0.1",
"@uirouter/angular-hybrid": "10.0.1",
"@uirouter/angularjs": "1.0.26",
"@uirouter/core": "6.0.5",
"@uirouter/rx": "0.6.5",

```

Below the detailed error and some code, don't know what else to share or what i can safely share.

Any suggestions on how to debug this would be lovely!

detailed error

```
stateService.ts?8765:537 Transition Rejection($id: 0 type: 6, message: The transition errored, detail: Error: Trying to get the AngularJS injector before it being set.)
$defaultErrorHandler @ stateService.ts?8765:537
eval @ stateService.ts?8765:379
processQueue @ angular.js?21b1:17963
eval @ angular.js?21b1:18037
$digest @ angular.js?21b1:19176
eval @ upgrade_module.ts?423f:268
schedulerFn @ event_emitter.ts?938d:96
SafeSubscriber.__tryOrUnsub @ Subscriber.ts?face:266
SafeSubscriber.next @ Subscriber.ts?face:208
Subscriber._next @ Subscriber.ts?face:140
Subscriber.next @ Subscriber.ts?face:100
Subject.next @ Subject.ts?4a10:71
EventEmitter.emit @ event_emitter.ts?938d:86
checkStable @ ng_zone.ts?9664:224
onHasTask @ ng_zone.ts?9664:314
ZoneDelegate.hasTask @ zone.js?d135:440
ZoneDelegate._updateTaskCount @ zone.js?d135:462
Zone._updateTaskCount @ zone.js?d135:284
Zone.runTask @ zone.js?d135:205
drainMicroTaskQueue @ zone.js?d135:601
Promise.then (async)
scheduleMicroTask @ zone.js?d135:584
ZoneDelegate.scheduleTask @ zone.js?d135:410
onScheduleTask @ zone.js?d135:294
ZoneDelegate.scheduleTask @ zone.js?d135:400
Zone.scheduleTask @ zone.js?d135:231
Zone.scheduleMicroTask @ zone.js?d135:251
scheduleResolveOrReject @ zone.js?d135:881
resolvePromise @ zone.js?d135:819
eval @ zone.js?d135:739
webpackJsonpCallback @ app.js?v=1591962370205:26
(anonymous) @ 0.js?v=1591962370205:1
stateService.ts?8765:538 Error: Trying to get the AngularJS injector before it being set.
    at injectorFactory (angular1_providers.ts?397c:22)
    at _callFactory (ng_module.ts?c185:163)
    at _createProviderInstance (ng_module.ts?c185:74)
    at resolveNgModuleDep (ng_module.ts?c185:74)
    at _callFactory (ng_module.ts?c185:163)
    at _createProviderInstance (ng_module.ts?c185:74)
    at resolveNgModuleDep (ng_module.ts?c185:74)
    at _callFactory (ng_module.ts?c185:163)
    at _createProviderInstance (ng_module.ts?c185:74)
    at resolveNgModuleDep (ng_module.ts?c185:74)
    at NgModuleRef_.get (refs.ts?151c:134)
    at applyNgModule (lazyLoadNgModule.ts?7cfb:143)
    at applyModule (lazyLoadNgModule.ts?7cfb:79)
    at ZoneDelegate.invoke (zone.js?d135:384)
    at Object.onInvoke (ng_zone.ts?9664:224)
    at ZoneDelegate.invoke (zone.js?d135:384)
    at Zone.run (zone.js?d135:143)
    at eval (zone.js?d135:891)
    at ZoneDelegate.invokeTask (zone.js?d135:419)
    at Object.onInvokeTask (ng_zone.ts?9664:224)
    at ZoneDelegate.invokeTask (zone.js?d135:419)
    at Zone.runTask (zone.js?d135:188)
    at drainMicroTaskQueue (zone.js?d135:601)

```

Our main.ts

```
// Bootstrapping
import {enableProdMode, NgModuleRef, NgZone, ViewEncapsulation} from '@angular/core';
import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
import {dom, library} from '@fortawesome/fontawesome-svg-core';
import {UIRouter, UrlService} from '@uirouter/core';
import {icons} from 'app/scripts/modules/app-layout/icons/icons';
import 'bootstrap/dist/js/bootstrap.js';
import 'expose-loader?jQuery!expose-loader?$!jquery';
import 'expose-loader?moment!moment';
import 'scripts/app.module';
import 'scripts/homer';
import 'scripts/static.assets';
import {AppModule} from 'src/app/app.module';
import {environment} from 'src/environments/environment';

library.add(...icons);
dom.watch();

// If ready
if (/comp|inter|loaded/.test(document.readyState)) {
    bootstrap();
} else {
    document.addEventListener('DOMContentLoaded', bootstrap);
}

function bootstrap(): void {

    if (true === environment.production) {
        enableProdMode();
    }

    platformBrowserDynamic().bootstrapModule(
        AppModule,
        [{
            defaultEncapsulation: ViewEncapsulation.None
        }]
    ).then((platformRef: NgModuleRef<AppModule>) => {
        // Initialize the Angular Module
        // get() the UIRouter instance from DI to initialize the router
        const urlService: UrlService = platformRef.injector.get(UIRouter).urlService;

        // Instruct UIRouter to listen to URL changes
        platformRef.injector.get<NgZone>(NgZone).run(() => {
            urlService.listen();
            urlService.sync();
        });
    });
}

```

Our app.module.ts

```
import {HTTP_INTERCEPTORS, HttpClientModule} from '@angular/common/http';
import {DoBootstrap, NgModule} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {setAngularJSGlobal, UpgradeModule} from '@angular/upgrade/static';
import {MissingTranslationHandler, TranslateModule, TranslateService} from '@ngx-translate/core';
import {UIRouterUpgradeModule} from '@uirouter/angular-hybrid';
import * as angular from 'angular';
import {AngularModalObserver} from 'hybrid/modal/modal.observer';
import {AdvertiserLastTransactionsModalObserver} from 'hybrid/modals/advertiser-last-transactions-modal.observer';
import {CampaignsModalObserver} from 'hybrid/modals/campaigns-modal.observer';
import {GoogleModalObserver} from 'hybrid/modals/google-modal.observer';
import {InvoiceModalObserver} from 'hybrid/modals/invoice-modal.observer';
import {PublisherLastTransactionsModalObserver} from 'hybrid/modals/publisher-last-transactions-modal.observer';
import {TicketsModalObserver} from 'hybrid/modals/tickets-modal.observer';
import {AngularTranslationsObserver} from 'hybrid/translations/translations.observer';
import {DatepickerModule} from 'ngx-bootstrap/datepicker';
import {ModalModule} from 'ngx-bootstrap/modal';
import {PagesAdminModule} from 'pages/admin/admin.a2.module';
import {GdprCleanupModule} from 'pages/publisher/account/gdpr-cleanup/gdpr-cleanup.module';
import {LayoutEventsObserver} from 'scripts/modules/app-layout/layout-events.observer';
import {ElementsExternalLinkModule} from 'scripts/modules/elements/external-link.a2/external-link.module';
import {ElementsPageHeaderModule} from 'scripts/modules/elements/page-header/page-header.module';
import {LocalizationMissingTranslationsService} from 'scripts/modules/localization/missing-translations.service';
import {AdminRoutingModule} from 'src/app/admin/admin-routing.module';
import {AdvertiserModule} from 'src/app/advertiser/advertiser.module';
import {AccountModel} from 'src/app/core/auth/account.model';
import {AuthObserver} from 'src/app/core/auth/auth.observer';
import {AuthService} from 'src/app/core/auth/auth.service';
import {IdentityService} from 'src/app/core/auth/identity.service';
import {TokenModel} from 'src/app/core/auth/token.model';
import {CoreModule} from 'src/app/core/core.module';
import {UserProfileModel} from 'src/app/core/data/backend/user/profile/user-profile.model';
import {AuthInterceptor} from 'src/app/core/interceptors/auth.interceptor';
import {CacheInterceptor} from 'src/app/core/interceptors/cache.interceptor';
import {GetAsPostInterceptor} from 'src/app/core/interceptors/get-as-post.interceptor';
import {GetMultiInterceptor} from 'src/app/core/interceptors/get-multi.interceptor';
import {LocalizationService} from 'src/app/core/localization/localization.service';
import {LeadgenerationModule} from 'src/app/leadgeneration/leadgeneration.module';
import {EnergyNlModule} from 'src/app/publisher/pages/widgets/widgets/energy/energy-nl/energy-nl.module';
import {PublisherModule} from 'src/app/publisher/publisher.module';

setAngularJSGlobal(angular);

@NgModule({
    exports: [
        TranslateModule
    ],
    imports: [
        AdminRoutingModule,
        AdvertiserModule,
        BrowserModule,
        BrowserAnimationsModule,
        CoreModule,
        DatepickerModule.forRoot(),
        ElementsExternalLinkModule,
        ElementsPageHeaderModule,
        GdprCleanupModule,
        HttpClientModule,
        LeadgenerationModule,
        ModalModule.forRoot(),
        PagesAdminModule,
        PublisherModule,
        TranslateModule.forRoot({
            missingTranslationHandler: {
                provide: MissingTranslationHandler,
                useClass: LocalizationMissingTranslationsService
            }
        }),
        UIRouterUpgradeModule.forRoot(),
        UpgradeModule,

        // These modules are needed here during hybrid
        EnergyNlModule, // This one can be removed once the entire widget pages has been migrated
    ],
    // All providers you need in AngularJS
    providers: [
        // These observers need to be here, it's required outside of it's own scope.
        // Angular creates a new instance based on the require module level
        AdvertiserLastTransactionsModalObserver,
        AngularModalObserver,
        AngularTranslationsObserver,
        AuthObserver,
        CampaignsModalObserver,
        GoogleModalObserver,
        InvoiceModalObserver,
        LayoutEventsObserver,
        PublisherLastTransactionsModalObserver,
        TicketsModalObserver,

        // Request interceptors, might be able to move them to the actual modules, but those are generated
        { provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true },
        { provide: HTTP_INTERCEPTORS, useClass: CacheInterceptor, multi: true },
        { provide: HTTP_INTERCEPTORS, useClass: GetAsPostInterceptor, multi: true },
        { provide: HTTP_INTERCEPTORS, useClass: GetMultiInterceptor, multi: true },
    ]
})
export class AppModule implements DoBootstrap {

    constructor(
        private angularTranslationsObserver: AngularTranslationsObserver,
        private identityService: IdentityService,
        private authObserver: AuthObserver,
        private authService: AuthService,
        private localizationService: LocalizationService,
        private translateService: TranslateService,
        private upgrade: UpgradeModule
    ) {}

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

        this.angularTranslationsObserver.languageChange$.subscribe(
            (language: string) => this.localizationService.setLanguage(language)
        );
        this.angularTranslationsObserver.translationsChange$.subscribe(
            (translations: object) => this.setTranslations(translations)
        );
        this.authObserver.accountChange$.subscribe(
            (account: AccountModel) => this.identityService.setAccount(account)
        );
        this.authObserver.tokenChange$.subscribe(
            (token: string) => {
                this.authService.setToken(token);
                let decryptedToken: TokenModel = this.authService.getDecryptedToken();
                this.identityService.setAdmin(Boolean(decryptedToken && decryptedToken.admin));
                this.identityService.setPermissions(decryptedToken.usg);
            }
        );
        this.authObserver.userChange$.subscribe(
            (user: UserProfileModel) => {
                this.identityService.setUser(user);
                this.localizationService.checkLanguageLocale();
            }
        );
    }

    setTranslations(translations: object): void {
        for (const language in translations) {
            if (translations.hasOwnProperty(language)) {
                this.translateService.setTranslation(language, translations[language], true);
            }
        }
    }

}

```

The admin-routing.module.ts

```
import {NgModule} from '@angular/core';
import {NgHybridStateDeclaration, UIRouterUpgradeModule} from '@uirouter/angular-hybrid';

const states: NgHybridStateDeclaration[] = [{
    name: 'admin.**',
    url: '/admin',
    loadChildren: () => import('src/app/admin/admin.module')
        .then((result: {AdminModule: any}) => result.AdminModule)
}];

@NgModule({
    imports: [
        UIRouterUpgradeModule.forChild({states: states})
    ],
    exports: [
        UIRouterUpgradeModule
    ],
})
export class AdminRoutingModule {}

```

And then the admin module

```
import {CommonModule} from '@angular/common';
import {NgModule} from '@angular/core';
import {MessageCenterModule} from 'src/app/admin/pages/message-center/message-center.module';
import {NewsModule} from 'src/app/admin/pages/news/news.module';
import {SearchModule} from 'src/app/admin/pages/search/search.module';

@NgModule({
    declarations: [],
    imports: [
        CommonModule,
        MessageCenterModule,
        NewsModule,
        SearchModule
    ]
})
export class AdminModule {}

```

and for example search.module

```
import {CommonModule} from '@angular/common';
import {NgModule} from '@angular/core';
import {TranslateModule} from '@ngx-translate/core';
import {ElementsMessagesModule} from 'scripts/modules/elements/messages.a2/messages.module';
import {ElementsNoResultsModule} from 'scripts/modules/elements/no-results.a2/no-results.module';
import {ElementsPageHeaderModule} from 'scripts/modules/elements/page-header/page-header.module';
import {BackendModule} from 'src/app/admin/data/backend/backend.module';
import {ItemModule} from 'src/app/admin/pages/search/item/item.module';
import {SearchRoutingModule} from 'src/app/admin/pages/search/search-routing.module';
import {SearchComponent} from 'src/app/admin/pages/search/search.component';
import {FilterModule} from 'src/app/core/components/filter/filter.module';
import {InputModule} from 'src/app/core/components/filter/input/input.module';
import {PanelModule} from 'src/app/core/components/panel/panel.module';

@NgModule({
    declarations: [SearchComponent],
    imports: [
        BackendModule,
        CommonModule,
        ElementsMessagesModule,
        ElementsNoResultsModule,
        ElementsPageHeaderModule,
        InputModule,
        ItemModule,
        PanelModule,
        SearchRoutingModule,
        TranslateModule,
        FilterModule,
    ],
    exports: [SearchComponent]
})
export class SearchModule { }

```

with search routing module as you can see not yet lazy loaded, when that will be introduced we would include search-routing module inside the admin module and refer to the search module in the routing module

```
import {NgModule} from '@angular/core';
import {UIRouterUpgradeModule} from '@uirouter/angular-hybrid';
import {StateDeclaration} from 'hybrid/state.declaration';
import {SearchComponent} from 'src/app/admin/pages/search/search.component';
import {BASIC} from 'src/app/core/auth/permissions/admin.constant';

const states: StateDeclaration[] = [{
    name: 'admin.search',
    url: '/admin/search',
    component: SearchComponent,
    permissions: [BASIC],
    requiresAuth: true
}];

@NgModule({
    imports: [
        UIRouterUpgradeModule.forChild({states: states})
    ],
    exports: [
        UIRouterUpgradeModule
    ],
})
export class SearchRoutingModule {}

```

Our angularjs module

```
'use strict';

import angular from 'angular';
// Enable this line and the .run line to enable uiRouter visualizer
// import { visualizer } from '@uirouter/visualizer';

angular.module('dcApp', [
    'dcApp.config', // this needs to be the very first dependency
    'dcApp.publisher.campaigns.modal',

    'dcLayout',
    'dcLibRedirect',
    'dcLibUniqueId',

    /* Pages */
    'dcApp.admin',
    'dcApp.advertiser',
    'dcApp.common',
    'dcApp.leadgeneration',
    'dcApp.publisher'
]);
// Enable this line and the import line to enable uiRouter visualizer
// angular.module('dcApp').run(['$uiRouter', ($uiRouter) => visualizer($uiRouter) ]);

/* Config files */
require('scripts/app-config/app-config.module');
require('scripts/helper/downloadfix');
require('scripts/helper/helper');

/* main module files */
require('scripts/app.controller');
require('hybrid/modal/modal.downgrade');
require('hybrid/cache-service.downgrade');
require('hybrid/modals/campaigns-modal.downgrade');
require('hybrid/modals/invoice-modal.downgrade');
require('hybrid/modals/tickets-modal.downgrade');
require('hybrid/modals/google-modal.downgrade');
require('hybrid/modals/advertiser-last-transactions-modal.downgrade');
require('hybrid/modals/publisher-last-transactions-modal.downgrade');

/* Other main modules */
require('pages/admin/admin.module');
require('pages/advertiser/advertiser.module');
require('pages/common.module');
require('pages/leadgeneration/leadgeneration.module');
require('pages/publisher/publisher.module');
```

and main app.controller
```
'use strict';
import angular               from 'angular';
import $                     from 'jquery';

require('scripts/modules/app-layout/layout.module');

angular.module('dcApp')
    .controller( 'MainController', MainController );

MainController.$inject = [
    '$location',
    '$transitions',
    '$window',
    'AdvertiserFinancialInvoicesInvoiceDetailModal',
    'AdvertiserLastTransactionsModalObserver',
    'AdvertiserTransactionsOverviewDetailModal',
    'AngularModalObserver',
    'AppConfig',
    'AppLayout',
    'AuthAuthenticator',
    'AuthAuthenticatorHelper',
    'AuthIdentity',
    'AuthObserver',
    'CampaignInformationModal',
    'ConnectionsGoogleLoginModal',
    'ElementsMessagesHelper',
    'GoogleModalObserver',
    'InvoiceModalObserver',
    'MediaVerificationModal',
    'PublisherLastTransactionsModalObserver',
    'TicketDetailModal',
    'TicketsModalObserver',
    'TransactionModal'
];

function MainController(
    $location,
    $transitions,
    $window,
    AdvertiserFinancialInvoicesInvoiceDetailModal,
    AdvertiserLastTransactionsModalObserver,
    AdvertiserTransactionsOverviewDetailModal,
    AngularModalObserver,
    AppConfig,
    AppLayout,
    AuthAuthenticator,
    AuthAuthenticatorHelper,
    AuthIdentity,
    AuthObserver,
    CampaignInformationModal,
    ConnectionsGoogleLoginModal,
    ElementsMessagesHelper,
    GoogleModalObserver,
    InvoiceModalObserver,
    MediaVerificationModal,
    PublisherLastTransactionsModalObserver,
    TicketDetailModal,
    TicketsModalObserver,
    TransactionModal
) {

    let $ctrl = this;

    $ctrl.layout = AppLayout;

    $ctrl.$onInit = onInit;

    function onInit() {

        initPage(true);

        $transitions.onError( {}, function( transition ) {
            let transitionError = transition.error();
            if ([4,6].indexOf(transitionError.type) !== -1)
            {
                ElementsMessagesHelper.getInstance('generalError').addMessage( transition.error(), 'error', 'primaryError' );
                AppLayout.hideSplashPage();
                $location.path( '/error' );
            }
        } );

        $transitions.onSuccess({}, function(transition) {
            initPage(transition.from().name !== transition.to().name);
            if ($window.ga) {
                $window.ga('send', 'pageview', { page: $location.url() });
            }
        });

        // No on destroy since the entire app is then gone
        AuthObserver.loginAsChange$.subscribe(function __loginAs(loginAsModel) {
            AuthAuthenticatorHelper.loginAs(
                {
                    id: loginAsModel.account_id,
                    type: loginAsModel.account_type
                },
                loginAsModel.user_id || null,
                loginAsModel.destination || null,
                loginAsModel.sameWindow || null
            );
        });

        AuthObserver.activityChange$.subscribe(AuthAuthenticator.updateLastActivity);
        AuthObserver.logoutExpire$.subscribe(AuthAuthenticator.logoutExpire);
        AuthObserver.updateAccount$.subscribe((account) => AuthIdentity.initAccount(AuthIdentity.getAccountType(), account));

        AngularModalObserver.showMediaVerification$.subscribe((event) => MediaVerificationModal.show(event.mediaId));
        InvoiceModalObserver.openModal$.subscribe(AdvertiserFinancialInvoicesInvoiceDetailModal.show);
        PublisherLastTransactionsModalObserver.openModal$.subscribe((affiliatemarketingId) => TransactionModal.show(affiliatemarketingId));
        AdvertiserLastTransactionsModalObserver.openModal$.subscribe((affiliatemarketingId) => AdvertiserTransactionsOverviewDetailModal.show(affiliatemarketingId));
        TicketsModalObserver.openModal$.subscribe((ticketId) => TicketDetailModal.show(ticketId, false));
        GoogleModalObserver.openModal$.subscribe(() => ConnectionsGoogleLoginModal.show())
    }

    function initPage(pageChange) {
        if (pageChange) {
            $(window).scrollTop(0);
        }

        $ctrl.currentPage = $location.path();
        AppLayout.hideSplashPage();
    }

}

```