No provider for UIRouter

[lyonzy]

After a clean clone, npm install and npm start I'm seeing the visualiser (and can click states) but the following error appears in the console:

zone.js:654 Unhandled Promise rejection: No provider for UIRouter! ; Zone: <root> ; Task: Promise.then ; Value: Error: No provider for UIRouter!
    at injectionError (core.es5.js:1169)
    at noProviderError (core.es5.js:1207)
    at ReflectiveInjector_._throwOrNull (core.es5.js:2649)
    at ReflectiveInjector_._getByKeyDefault (core.es5.js:2688)
    at ReflectiveInjector_._getByKey (core.es5.js:2620)
    at ReflectiveInjector_.get (core.es5.js:2489)
    at resolveNgModuleDep (core.es5.js:9475)
    at NgModuleRef_.get (core.es5.js:10557)
    at main.ts:51
    at ZoneDelegate.invoke (zone.js:391) Error: No provider for UIRouter!
    at injectionError (http://localhost:8080/_bundles/vendor.bundle.js:1592:90)
    at noProviderError (http://localhost:8080/_bundles/vendor.bundle.js:1630:12)
    at ReflectiveInjector_._throwOrNull (http://localhost:8080/_bundles/vendor.bundle.js:3072:19)
    at ReflectiveInjector_._getByKeyDefault (http://localhost:8080/_bundles/vendor.bundle.js:3111:25)
    at ReflectiveInjector_._getByKey (http://localhost:8080/_bundles/vendor.bundle.js:3043:25)
    at ReflectiveInjector_.get (http://localhost:8080/_bundles/vendor.bundle.js:2912:21)
    at resolveNgModuleDep (http://localhost:8080/_bundles/vendor.bundle.js:9898:25)
    at NgModuleRef_.get (http://localhost:8080/_bundles/vendor.bundle.js:10980:16)
    at http://localhost:8080/_bundles/sampleapp.js:6762:24
    at ZoneDelegate.invoke (http://localhost:8080/_bundles/vendor.bundle.js:58515:26)

It seems this is occurring in this line:

const url: UrlService = injector.get(UIRouter).urlService

And is therefore preventing it from calling url.listen(); url.sync(); and is causing it to show a blank page (apart from the visualizer).

Any ideas what might be wrong? This is happening in a personal project of mine as well.

[lyonzy]

Ah ok, looks like this can be fixed with:

import { getUIRouter } from '@uirouter/angular-hybrid'
const url: UrlService = getUIRouter(injector).urlService;

Perhaps the doco needs updating?

[leosun1221]

Remove angular-ui-router (or @uirouter/angularjs) from your package.json and replace it with @uirouter/angular-hybrid. Add the @angular/* dependencies.

remove 'uirouter/angular' and 'uirouter/angularjs' in your package.json file,
only use 'uirouter/angular-hybrid'

[christopherthielen]

Closing old issues...

The sample app is working for me. Is this still a problem for anyone? Let me know if so.

[Js4Life]

its still not working and im afraid theres no fix