Carlos Cifuentes
AngularJS → Angular reference

$state.go in modern Angular

$state.go becomes Router.navigate, which takes an array of path segments, or Router.navigateByUrl, which takes a full URL.

Before · AngularJS
vm.open = function (user) {
  $state.go('userDetail', { id: user.id });
};
vm.goToPage = function (page) {
  $state.go('users', { page: page }, { location: 'replace' });
};
vm.showTab = function (tab) {
  $state.go('.', { tab: tab });
};
After · Angular
private router = inject(Router);
private route = inject(ActivatedRoute);

open(user: User) {
  this.router.navigate(['/users', user.id]);
}

goToPage(page: number) {
  this.router.navigate(['/users'], { queryParams: { page }, replaceUrl: true });
}

showTab(tab: string) {
  this.router.navigate([], {
    relativeTo: this.route, queryParams: { tab }, queryParamsHandling: 'merge',
  });
}

What changes

  • navigate builds the URL from segments and extras such as queryParams; navigateByUrl takes a complete URL string or a UrlTree.
  • Relative navigation is explicit: pass relativeTo with the current ActivatedRoute.
  • Both methods return a Promise<boolean> that tells you whether the navigation succeeded.

Migration tip. $state.reload has no direct equivalent. In most cases the screen only needs fresh data, so call the service that loads it again instead of reloading the route.

Related

Planning a migration or a micro-frontend platform?

In a 20-minute call you describe your situation and I tell you how I'd approach it. If it isn't worth doing yet, I'll say so.

Message me on LinkedIn