Git Product home page Git Product logo

Comments (8)

christopherthielen avatar christopherthielen commented on July 16, 2024

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...

from visualizer.

NickBolles avatar NickBolles commented on July 16, 2024

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.

from visualizer.

christopherthielen avatar christopherthielen commented on July 16, 2024

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

from visualizer.

NickBolles avatar NickBolles commented on July 16, 2024

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

from visualizer.

christopherthielen avatar christopherthielen commented on July 16, 2024

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

from visualizer.

NickBolles avatar NickBolles commented on July 16, 2024

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?
ui-visualization debug

from visualizer.

christopherthielen avatar christopherthielen commented on July 16, 2024

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

from visualizer.

NickBolles avatar NickBolles commented on July 16, 2024

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!

from visualizer.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.