Angular upgrade - How to navigate to a state defined in Angularjs from Angular template?

Question

Currently i am upgrading an Angularjs 1.6 app into Angular 7. As part of this migration i have to navigate to a state defined in Angularjs from Angular template. How can i achieve this?

I have tried angular-hybrid router approach, but it didn't help.

This is the state defined under recipes module in Angularjs

$stateProvider.state('recipes', { url: '/recipes', component: 'recipes', onEnter: ['$state', 'authService', ($state, authService) => { if(!authService.isLoggedIn()){ $state.go('login') } }] })

And i want to navigate to above state from Angular 7 template as shown below using angular-hybrid-router

  <a class="list-group-item"
     style="cursor: pointer;"
     ui-sref="recipes"
     *ngFor="let recipe of recipes; let i = index;">
    {{recipe.name}}
  </a>
</ul>

Expected is to navigate to /recipes url. But it doesn't and even doesn't thrown any error.

Not enough information to answer. You're using ui-router in the angular-js example, but I see no routing logic in the second example, just an anchor tag with an ng-for directive. — AlexMA
– AlexMA, Commented Jun 4, 2019 at 19:11

Mark Clark · Accepted Answer · 2019-06-04 19:12:27Z

0

I am unfamiliar with angular-hybrid; though from a cursory glance, it is probable the routing module registering the state was not imported in a module that is chained to the app's root module. uiSref directive can only resolve a registered state, IIRC ui-sref wont give an error if your ui-sref value is 'invalid'(read: unregistered).

answered Jun 4, 2019 at 19:12

Mark Clark

5434 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular upgrade - How to navigate to a state defined in Angularjs from Angular template?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related