angular-ui/ui-router

The de-facto solution to flexible routing with nested views

Tom McKearney

@tommck

Hey all, @christopherthielen - any chance you can take a look at this problem on SO? https://stackoverflow.com/questions/55579916/uirouter-angular-error-staticinjectorerrorappmodulefooservice-stateservi
We've been having this issue on and off and can't figure out what's causing it

tommck @tommck thinks it's time to move away from ui-router

Enl0ve

@Enl0ve

rencently, I find below content on the source code of ui-router, other dom events, You can also customize which DOM events to respond to (instead ofclick) by providing aneventsarray in theui-sref-optsattribute, such as ui-sref-opts="{ events: ['change', 'blur'] }", I try, but failed, anybody who can help me? Thank you

Jakobinec

@Jakobinec

Hi! Can I ask a question about @uirouter/angular-hybrid? Am I in the right place?
I have a hybrid application (Angular+AngularJS). It was created by tutorials from your official sight https://github.com/ui-router/angular-hybrid
And now I want to navigate to url from Angular component TypeScript code.
Could you tell me please the proper way how can I do it (like "this.router.navigate('/dashboard')") and what class I should import.
Thanks!

Chris Thielen

@christopherthielen

Inject UIRouter then use UIRouter.stateService.go('dashboard')

https://ui-router.github.io/ng2/docs/latest/classes/state.stateservice.html#go

Jakobinec

@Jakobinec

Hello! How can I inject Transition into service. This code works well in component, but does not work in service:
const rootScope = this.transition.injector().get('$rootScope');
rootScope.menuItem = 'documentsUpg';
I use hybrid routing (Angular + AngularJS)

Chris Thielen

@christopherthielen

you can not inject $transition$ into a service because it’s not a global object

Gabe

@gabrielmiller_gitlab

I'm working on an AngularJS app that uses an older version of ui-router, 0.4.3. I'd like to some day port the app into Angular2+ and https://github.com/ui-router/angular-hybrid looks like a promising path to upgrade parts of the application piecemeal. That said, I'm trying to get a grasp on router upgrade path.

It's not clear to me what the minimum starting version of ui-router is before implementing angular-hybrid. Should I upgrade ui-router from 0.4.3 to 1.x as a step before implementing angular-hybrid?

I was intending to follow the ui-router upgrade here https://ui-router.github.io/guide/ng1/migrate-to-1_0#breaking-changes, but I wanted a sanity check to see if this is fact necessary before implementing angular-hybrid.

Princeton Collins

@princetoncollins

@Gabe I'm currently in the process of migrating an AngularJS app to Angular. I can share my package.json that shows the current versions I'm using for all ui-router and angular packages if you'd like.

Gabe

@gabrielmiller_gitlab

@princetoncollins that would be appreciated, thank you

Princeton Collins

@princetoncollins

@gabrielmiller_gitlab

"dependencies": {
    "@angular/animations": "^8.2.9",
    "@angular/cdk": "^8.2.3",
    "@angular/common": "^8.2.9",
    "@angular/compiler": "^8.2.9",
    "@angular/compiler-cli": "^8.2.9",
    "@angular/core": "^8.2.9",
    "@angular/forms": "^8.2.9",
    "@angular/material": "^8.2.3",
    "@angular/platform-browser": "^8.2.9",
    "@angular/platform-browser-dynamic": "^8.2.9",
    "@angular/platform-server": "^8.2.9",
    "@angular/router": "8.2.9",
    "@angular/upgrade": "^8.2.9",
    "@uirouter/angular": "6.0.1",
    "@uirouter/angular-hybrid": "9.0.0",
    "@uirouter/core": "6.0.1",
    "@uirouter/rx": "^0.6.5",
    "core-js": "^2.5.4",
    "zone.js": "^0.10.2",
    "rxjs": "^6.5.5",
    "rxjs-compat": "^6.5.5",
}

Don't think you'll need @angular/cdk or @angular/animations and @angular/material.

Gabe

@gabrielmiller_gitlab

Do you know offhand what version of ui-router you were using when you were on AngularJS 1.x?

angular-ui-router, specifically

Princeton Collins

@princetoncollins

@gabrielmiller_gitlab 0.4.2

@Gabe So all my state configurations look something like this:

config.$inject = ['$stateProvider', '$provide'];

function config($stateProvider, $provide) {

  $stateProvider
    .state('engagements', {
      url: '/engagements',
      redirectTo: 'engagements.home',
      template: '<engagement-app />'
    })
    .state('engagements.home', {
      url: '/home',
      views: {
        'main@engagements': {
          template: '<parent-engagement-list />'
        }
      }
    })

If that helps clarify things.

Gabe

@gabrielmiller_gitlab

Nice. Thanks! That's super useful.

Princeton Collins

@princetoncollins

@gabrielmiller_gitlab Np. Glad that helped. :)

Chris Thielen

@christopherthielen

@gabrielmiller_gitlab you should upgrade to 1.x before trying to do the hybrid router thing.

@uirouter/angular-hybrid brings 1.x along for the ride, but it's best to do the 1.x upgrade while still your project is still pure angularjs

Gabe

@gabrielmiller_gitlab

@christopherthielen thanks for the info. I forgot to circle back here and drop a note, but yeah shortly after I started digging into this the other day I noticed even the older releases of angular-hybrid have 1.x as a dependency in package.json :+1:

next up: wrangling build processes :feelsgood:

Zac Brownell

@motleycrujones_twitter

I'm wondering why the StateRegistry.get() method doesn't allow for a more specific/constrained search. I have a situation where our application is trying to decide whether or not a state has already been registered, but it's getting a match on a parent future state declaration - which, is kind of throwing a wrench in our logic. There doesn't appear to be a way to ask the StateRegistry if a specific state is present or not, without accidentally matching this future state.

Maybe I'm not so much wondering "why" the .get() method matches 'example.**' when trying to fetch 'example.specific-child' - I mean, it makes sense; the wildcard state would match at runtime. It's just inconvenient for my needs, since I need to make sure that 'example.specific-child' actually exists or not during configuration and there doesn't seem to be a way to query the StateRegistry in this manner.

(something like an exactMatch or ignoreWildcards param added to the method signature would be ideal)

Zac Brownell

@motleycrujones_twitter

(basically, something that would surface the matchGlob param in the underlying StateMatcher.find() call would be great - if it's easy/not concerning enough)

Chris Thielen

@christopherthielen

@motleycrujones_twitter can't you just do stateRegistry.get().find(s => s.name === 'example.specific-child')?

kapilpipaliya

@kapilpipaliya

hello, i want to use this router in solidjs. how to integrate it with solidjs?

Chris Thielen

@christopherthielen

Is solidjs a component framework/library?

Cody Mikol

@codymikol

I believe so Chris

Sajan

@woodsongem

Hi All,
please help me to unit test transitions.onStart in angularjs? please share if you have any sample application

Chris Thielen

@christopherthielen

this should get you started @woodsongem :

    it(
      'should call my transition hook',
      mock.inject(($uiRouter, $rootScope) => {
        $uiRouter.stateRegistry.register({ name: 'foo' });
        $uiRouter.stateRegistry.register({ name: 'bar' });

        const spy = jasmine.createSpy('hookFn');
        $uiRouter.transitionService.onStart({ to: 'foo' }, spy);

        $uiRouter.stateService.go('foo');
        $rootScope.$digest();

        expect(spy).toHaveBeenCalled();
      }),
    );

    it(
      'should not call my transition hook',
      mock.inject(($uiRouter, $rootScope) => {
        $uiRouter.stateRegistry.register({ name: 'foo' });
        $uiRouter.stateRegistry.register({ name: 'bar' });

        const spy = jasmine.createSpy('hookFn');
        $uiRouter.transitionService.onStart({ to: 'foo' }, spy);

        $uiRouter.stateService.go('bar');
        $rootScope.$digest();

        expect(spy).not.toHaveBeenCalled();
      }),
    );

pavel-blagodov

@pavel-blagodov

Hello folks, could you please help me to figure out.

I'm using the following uirouter versions:
"@uirouter/angular": "6.0.1",
"@uirouter/angular-hybrid": "10.0.1",
"@uirouter/angularjs": "1.0.25",
"@uirouter/core": "6.0.4",
All main states are lazyloaded

The application gets stuck in one of the pages when I quickly (very quickly) switch between pages that use lazy loading. After this, when I click at the application tabs, I see that the transitions are processed correctly but ui-view is not updated. It always shows page that got stuck.

Here is trace

trace.js:172 Transition #2-0: <- Rejected "Transition#2( 'app.admin.logs.list'{"enableInternalSettings":"null","disablePoorMansAlerts":"null","commonBucket":"null","commonScope":"null","commonCollection":"null","scenarioZoom":"minute","scenario":"t27nj82mk","openedGroups":[]} -> 'app.admin.settings.**'{"enableInternalSettings":"null","disablePoorMansAlerts":"null","commonBucket":"null","commonScope":"null","commonCollection":"null","scenarioZoom":"minute","scenario":"t27nj82mk","openedGroups":[],"remainder":"undefined"} )", reason: Transition Rejection($id: 1 type: 2, message: The transition has been superseded by a different transition, detail: 'app.admin.settings.cluster'{})
trace.js:135 Transition #3-0: Started  -> "Transition#3( 'app.admin.logs.list'{"enableInternalSettings":"null","disablePoorMansAlerts":"null","commonBucket":"null","commonScope":"null","commonCollection":"null","scenarioZoom":"minute","scenario":"t27nj82mk","openedGroups":[]} -> 'app.admin.settings.cluster'{"enableInternalSettings":"null","disablePoorMansAlerts":"null","commonBucket":"null","commonScope":"null","commonCollection":"null","scenarioZoom":"minute","scenario":"t27nj82mk","openedGroups":[]} )"
trace.js:178 Transition #3-0: <- Success  "Transition#3( 'app.admin.logs.list'{"enableInternalSettings":"null","disablePoorMansAlerts":"null","commonBucket":"null","commonScope":"null","commonCollection":"null","scenarioZoom":"minute","scenario":"t27nj82mk","openedGroups":[]} -> 'app.admin.settings.cluster'{"enableInternalSettings":"null","disablePoorMansAlerts":"null","commonBucket":"null","commonScope":"null","commonCollection":"null","scenarioZoom":"minute","scenario":"t27nj82mk","openedGroups":[]} )", final state: app.admin.settings.cluster
trace.js:172 Transition #5-0: <- Rejected "Transition#5( 'app.admin.settings.cluster'{"enableInternalSettings":"null","disablePoorMansAlerts":"null","commonBucket":"null","commonScope":"null","commonCollection":"null","scenarioZoom":"minute","scenario":"t27nj82mk","openedGroups":[]} -> 'app.admin.replications.**'{"enableInternalSettings":"null","disablePoorMansAlerts":"null","commonBucket":"null","commonScope":"null","commonCollection":"null","scenarioZoom":"minute","scenario":"t27nj82mk","openedGroups":[],"remainder":"undefined"} )", reason: Transition Rejection($id: 2 type: 2, message: The transition has been superseded by a different transition, detail: 'app.admin.replications'{})
trace.js:135 Transition #6-0: Started  -> "Transition#6( 'app.admin.settings.cluster'{"enableInternalSettings":"null","disablePoorMansAlerts":"null","commonBucket":"null","commonScope":"null","commonCollection":"null","scenarioZoom":"minute","scenario":"t27nj82mk","openedGroups":[]} -> 'app.admin.replications'{"enableInternalSettings":"null","disablePoorMansAlerts":"null","commonBucket":"null","commonScope":"null","commonCollection":"null","scenarioZoom":"minute","scenario":"t27nj82mk","openedGroups":[],"xdcrDetails":"undefined"} )"
trace.js:178 Transition #6-0: <- Success  "Transition#6( 'app.admin.settings.cluster'{"enableInternalSettings":"null","disablePoorMansAlerts":"null","commonBucket":"null","commonScope":"null","commonCollection":"null","scenarioZoom":"minute","scenario":"t27nj82mk","openedGroups":[]} -> 'app.admin.replications'{"enableInternalSettings":"null","disablePoorMansAlerts":"null","commonBucket":"null","commonScope":"null","commonCollection":"null","scenarioZoom":"minute","scenario":"t27nj82mk","openedGroups":[],"xdcrDetails":"undefined"} )", final state: app.admin.replications
trace.js:172 Transition #4-0: <- Rejected "Transition#4( 'app.admin.settings.cluster'{"enableInternalSettings":"null","disablePoorMansAlerts":"null","commonBucket":"null","commonScope":"null","commonCollection":"null","scenarioZoom":"minute","scenario":"t27nj82mk","openedGroups":[]} -> 'app.admin.security.**'{"enableInternalSettings":"null","disablePoorMansAlerts":"null","commonBucket":"null","commonScope":"null","commonCollection":"null","scenarioZoom":"minute","scenario":"t27

pavel-blagodov

@pavel-blagodov


trace.js:135 Transition #7-0: Started  -> "Transition#7( 'app.admin.settings.cluster'{"enableInternalSettings":"null","disablePoorMansAlerts":"null","commonBucket":"null","commonScope":"null","commonCollection":"null","scenarioZoom":"minute","scenario":"t27nj82mk","openedGroups":[]} -> 'app.admin.security.roles.user'{"enableInternalSettings":"null","disablePoorMansAlerts":"null","commonBucket":"null","commonScope":"null","commonCollection":"null","scenarioZoom":"minute","scenario":"t27nj82mk","openedGroups":[],"openedUsers":"undefined","startFrom":"null","startFromDomain":"null","sortBy":"id","order":"asc","substr":"","pageSize":20} )"
trace.js:178 Transition #7-0: <- Success  "Transition#7( 'app.admin.settings.cluster'{"enableInternalSettings":"null","disablePoorMansAlerts":"null","commonBucket":"null","commonScope":"null","commonCollection":"null","scenarioZoom":"minute","scenario":"t27nj82mk","openedGroups":[]} -> 'app.admin.security.roles.user'{"enableInternalSettings":"null","disablePoorMansAlerts":"null","commonBucket":"null","commonScope":"null","commonCollection":"null","scenarioZoom":"minute","scenario":"t27nj82mk","openedGroups":[],"openedUsers":"undefined","startFrom":"null","startFromDomain":"null","sortBy":"id","order":"asc","substr":"","pageSize":20} )", final state: app.admin.security.roles.user

pavel-blagodov

@pavel-blagodov

I noticed that Rejected Transition #4-0 arrives after #5-0 and #6-0 transitions. And the page from transition #6-0 is the one that is always displayed

pavel-blagodov

@pavel-blagodov

I have tried to apply supersede: false option but it doesn't help