ui-router-core.js throws error for angular-hybrid.js

[Kamilius]

Trying to start a webpack-dev-server with hybrid angular application. It throws me a following error stack:

zone.js:661 Unhandled Promise rejection: Cannot read property 'when' of undefined ; Zone: <root> ; Task: Promise.then ; Value: TypeError: Cannot read property 'when' of undefined
    at new Resolvable (ui-router-core.js:2569)
    at Function.Resolvable.fromData (ui-router-core.js:2650)
    at angular-hybrid.js:192
    at Object.invoke (angular.js:5040)
    at angular.js:4842
    at forEach (angular.js:410)
    at createInjector (angular.js:4842)
    at doBootstrap (angular.js:1949)
    at Object.bootstrap (angular.js:1970)
    at bootstrap (static.es5.js:52) TypeError: Cannot read property 'when' of undefined
    at new Resolvable (http://localhost:9000/main-d436ea8eb6964eae583a.js:34507:55)
    at Function.Resolvable.fromData (http://localhost:9000/main-d436ea8eb6964eae583a.js:34588:16)
    at http://localhost:9000/main-d436ea8eb6964eae583a.js:260931:96
    at Object.invoke (http://localhost:9000/main-d436ea8eb6964eae583a.js:199264:19)
    at http://localhost:9000/main-d436ea8eb6964eae583a.js:199066:62
    at forEach (http://localhost:9000/main-d436ea8eb6964eae583a.js:194634:20)
    at createInjector (http://localhost:9000/main-d436ea8eb6964eae583a.js:199066:3)
    at doBootstrap (http://localhost:9000/main-d436ea8eb6964eae583a.js:196173:20)
    at Object.bootstrap (http://localhost:9000/main-d436ea8eb6964eae583a.js:196194:12)
    at bootstrap (http://localhost:9000/main-d436ea8eb6964eae583a.js:87731:20)

This is how ng2 module looks like:
ng2.module.ts

import { NgModuleFactoryLoader, SystemJsNgModuleLoader, NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { UpgradeModule} from '@angular/upgrade/static';

import { UIRouterUpgradeModule } from '@uirouter/angular-hybrid';
import { UIRouterModule } from '@uirouter/angular';

import { CommonModule } from './_common/common_ts.module';

@NgModule({
  imports: [
    BrowserModule,
    UpgradeModule,
    UIRouterModule,
    UIRouterUpgradeModule,
    CommonModule,
  ],
  providers: [
    { provide: NgModuleFactoryLoader, useClass: SystemJsNgModuleLoader },
  ]
})
export class ng2Module {
  ngDoBootstrap() {}
}

Any ideas on why this is happening?

[vanackere]

Same problem here. Explicitly downgrading to @uirouter/core 5.0.6 solves the problem for me. The problem appears in 5.0.7

[Kamilius]

@vanackere for me, removing @uirouter/core from package.json and then removing and reinstalling node_modules solved an issue.

[christopherthielen]

@uirouter/anbular-hybrid has a dependency on a specific version of @uirouter/core.
https://github.com/ui-router/angular-hybrid/blob/ae9b597902408438e2ebf933c331e3f06c1b309e/package.json#L15

You shouldn't be adding your own specific dependency on @uirouter/core in your application; only add a dependency to @uirouter/angular-hybrid. @vanackere how did you get 5.0.7 added to your app?

[vanackere]

The @uirouter/core dependency was already there as a dependency in the package.json from my angular 1 application. All dependencies of my application were upgraded to the latest available version before attempting to migrate with @uirouter/angular-hybrid so that's where I got the too-recent version of @uirouter/core.
It might be a good idea to have this hard dependency very explicitly documented in the readme and/or perhaps there should be a dynamic check for the right version. I took me almost 2 days to find the root cause of this runtime bug by reducing both my application and the sample angular-hybrid one to find what would cause the difference at runtime...

[christopherthielen]

It might be a good idea to have this hard dependency very explicitly documented in the readme and/or perhaps there should be a dynamic check for the right version.

I hear you. However, even in angular1 apps you shouldn't have a direct dependency on @uirouter/core (I'm surprised that you didn't have the same issue)

[christopherthielen]

(whoops, that commit is unrelated)

[ghost]

Hi, I'm facing the same issue... in my case, if I follow your advice and I don't include a direct dependency on @uirouter/core, then I'm not able to do "import { UrlService } from '@uirouter/core'" as you do in the usage example file. So I'm not sure what's the correct way of doing this!

[roychoo]

i am also facing this issue. @jarregui did you managed to resolve it?

[ghost]

Yes, by upgrading to latest versions of the library... anyway, I already finished my migration to Angular 4 so I'm not using the hybrid library anymore

[christopherthielen]

@roychoo if you have a dependency on @uirouter/angular-hybrid you should be able to import {UrlService} from '@uirouter/core' because angular-hybrid has a direct dependency on core in its package.json.

[karimaster]

@christopherthielen in the latest code, you have @uirouter/core in your package.json, how come?

[christopherthielen]

@karimaster these were changed to peerDependencies about 6 months ago ui-router/angular-hybrid@384e428 so the hybrid app should install them as top level dependencies now.