How to route via code in an Angular hybrid app

Question

I'm working on a Hybrid Angular/AngularJS app. The main AppModule is Angular module that uses AppRoutingModule that uses a given state. Something like that:

AppModule:

imports: [AModule, BModule, AppRoutingModule, ...]

AppRoutingModule:

imports: [UIRouterUpgradeModule.forRoot(states: some_state)]

States:

export const some_state: [
  {
    name: 'a',
    url: '/a'
    views: {
            main: {component: AComponent}
    }
  },
  {
    name: 'b',
    url: '/b'
    views: {
            main: {component: BComponent}
    }
  }
]

What I want to do - say I'm in a BComponent, I want to navigate to AComponent. In a pure angular component I would use the Router from the RouterModule (forRoot in AppModule and forChild in child modules). Something like router.navigateToURL('...')

Now I'm using UIRouterUpgradeModule and I could not find how to do it. Any help will be great thanks!

score 0 · Answer 1 · answered Oct 18 '20 at 10:47

0

In your component, first declare router in constructor like shown below :

import { Component } from '@angular/core';
import { Router } from '@angular/router';

@Component({
  // ...
})
export class AppComponent {

  constructor(private router: Router) {}

  // ...
}

Then create a function that will be used whenever route change is required, you can bind this function to any event like button click to see required changes :

changeRoute() {
  this.router.navigateByUrl('/b');
}

answered Oct 18 '20 at 10:47

Himanshu Singh

2,117
1
5
15

This wont work since I'm using the UIRouterUpgradeModule with states that are fitting for a hybrid solution. The Regular router requires a different states in the form of a Routers array. – elmekiesIsrael Oct 19 '20 at 19:18

score 0 · Answer 2 · answered Oct 19 '20 at 19:20

So the thing that worked for me is this: Imported the StateService from @uirouter/core in the constructor like so:

constructor(private stateService: StateService)

and in my method did the following:

stateService.go('URL_TO_GO_TO');

This worked for me and I was redirected as wanted.

How to route via code in an Angular hybrid app

2 Answers2