Build errors about visualizer

[christopherthielen]

What steps did you take so far to include the visualizer?
npm install --save ui-router-visualizer?

What is your build setup? Webpack bundler?

How are you requireing the lib?
var visualizer = require("ui-router-visualizer");?

Any other details you can provide?

---

The errors you posted are related to the embedded CSS files, but I thought the bundled version (visualizer.js) would handle those automatically...

[NickBolles]

I am using npm to install like you had

I am using gulp to browserify my files. Using require('ui-router-visualization'); and then in my angular module
Angular.module('app', ['ui.router', 'ui.router.visualizer']);

Is the issue that I'm using browserify?

It looks like the visualization.js is trying to require the css-loader file, which is not installed in npm. And even if I do install it with npm install css-loader it still doesn't work.

[christopherthielen]

I think browserify is trying to process the hot module replacement code that webpack is generating. I removed that code from the built file and put it on a gist: https://rawgit.com/christopherthielen/ddd5e28f6a206a8812fae9b48c0ff2a2/raw/ca1a3c005393325ef8b347b7b6560ecfe05cba60/visualizer.js

Can you try downloading that file and replacing the one in node_modules with the one in my gist?

cd node_modules/ui-router-visualizer/release
rm visualizer.js
curl -O https://rawgit.com/christopherthielen/ddd5e28f6a206a8812fae9b48c0ff2a2/raw/ca1a3c005393325ef8b347b7b6560ecfe05cba60/visualizer.js

[NickBolles]

It builds now. But I am now getting the following error on the app boot

im not sure if doing if(s.$$state){ return s.$$state()} is going to achieve the desired result.

Uncaught TypeError: s.$$state is not a function(anonymous function) @ visualizer.js:310
statevis_module_1.app.service.pollStates @ visualizer.js:310
(anonymous function) @ visualizer.js:330
instantiate @ angular.js:4619
(anonymous function) @ angular.js:4459
invoke @ angular.js:4604
enforcedReturnValue @ angular.js:4443
invoke @ angular.js:4604
(anonymous function) @ angular.js:4403
getService @ angular.js:4550
injectionArgs @ angular.js:4574
invoke @ angular.js:4596
(anonymous function) @ angular.js:4412
forEach @ angular.js:321
createInjector @ angular.js:4412
doBootstrap @ angular.js:1691
angular.resumeBootstrap @ angular.js:1720
maybeBootstrap @ hint.js:569
setTimeout (async)
maybeBootstrap @ hint.js:565

[christopherthielen]

$$state() landed in version ui-router 1.0.0-alpha.1... are you using alpha.1 or later?

[NickBolles]

No i am using 0.2.17, but inspecting the $state.get() call, it looks like abstract states do not have the $$state function. Will using 1.0.0-alpha 1 or later fix that?

[christopherthielen]

I think only the unnamed root state "" is missing the $$state method (Also, if the root state is missing $$state, that's something I should fix in a later alpha)

The visualizer only works with 1.0.0 versions because it relies on the $transitions service

[NickBolles]

Gotcha. I see now that the right most state ("menu") is abstract and has the $$state.
I will migrate to 1.0.0 when I can. Thank you!