Can't bootstrap a hybrid application in Angular 8 due to commonservices being undefined

[adrian-heath]

I am trying to get a hybrid router application running using the latest Angular 8 (8.2.9) and am running into issue both in my own test app and in an upgraded version of the sample hybrid app that is running here

https://stackblitz.com/github/ui-router/sample-app-angular-hybrid/tree/angular-cli?file=package.json

When taking this code and upgrading all the dependencies to latest I end up getting this error during the angular bootstrap process

ERROR TypeError: Cannot read property 'when' of undefined
at new Resolvable (resolvable.js:43)
at Function.push../node_modules/@uirouter/core/lib-esm/resolve/resolvable.js.Resolvable.fromData (resolvable.js:109)
at uirouter-angular-hybrid.js:216
at Object.invoke (angular.js:5143)
at angular.js:4942
at forEach (angular.js:387)
at createInjector (angular.js:4942)
at doBootstrap (angular.js:1962)
at Object.bootstrap (angular.js:1983)
at bootstrap (static.js:73)

I have tracked this back to $q being undefined in this line of resolvable.js

this.promise = this.resolved ? services.$q.when(this.data) : undefined;

services is defined in coreservices.ts and services.$q is undefined. I have read through quite a few examples around setting up the hybrid router and given upgrading the existing sample gives me the same error I don't think I've done anything obviously wrong.

Below are the list of steps I did to get the example in stackblitz to compile after upgrading everything.

Removed @angular/http and core.js from the dependencies leaving the following

"@angular/animations": "8.2.14",
"@angular/common": "8.2.14",
"@angular/compiler": "8.2.14",
"@angular/core": "8.2.14",
"@angular/forms": "8.2.14",
"@angular/platform-browser": "8.2.14",
"@angular/platform-browser-dynamic": "8.2.14",
"@angular/router": "8.2.14",
"@angular/upgrade": "8.2.14",
"@types/jasmine": "2.8.6",
"@types/jasminewd2": "2.0.3",
"@types/node": "6.0.101",
"@uirouter/angular": "6.0.1",
"@uirouter/angular-hybrid": "10.0.1",
"@uirouter/angularjs": "1.0.24",
"@uirouter/core": "6.0.4",
"@uirouter/rx": "0.6.5",
"@uirouter/visualizer": "7.0.0",
"angular": "1.7.9",
"rxjs": "6.5.4",
"rxjs-compat": "^6.5.4",
"zone.js": "0.10.2"

commented out core-js in polyfills.ts
updated tsconfig.json & tsconfig.app.json to module: esnext
fixed loadChildren in app.module.ts
commented out { provide: NgModuleFactoryLoader, useClass: SystemJsNgModuleLoader }

I'm not sure if this is a bug or a missing bit of configuration but any guidance would be helpful at this point.

A similar issue was reported back in Nov 2019 here with no resolution

https://angularquestions.com/2019/11/27/unhandled-promise-rejection-using-uirouter-angular-hybrid/

[graemeenglish]

Suffering from the same problem, did you find a workaround?

[graemeenglish]

I added an ajs config as follows and that seems to get it going:
import { $injector, $q, services } from '@uirouter/core'; export function uirouterConfig() { services.$q = $q; services.$injector = $injector; }

[4typen]

Have the same issue using AngularJS/Angular 9.1 Hybrid.

[Pouja]

Did you try to remove the dependency "@uirouter/core": "6.0.4",.
We had a similar problem, and this fixed it for us.

[christopherthielen]

For anyone experiencing a similar issue, please make sure you don't have multiple copies of any of the @uirouter libraries in your node_modules.

You can determine if you have multiple copies using (yarn): yarn why @uirouter/core (npm): npm ls @uirouter/core

[christopherthielen]

closing. if this is still a problem, reopen.