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.

Answer 1

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