Carlos Cifuentes
AngularJS → Angular reference

$location in modern Angular

$location splits in two: the Router for navigation and route parameters, and the Location service for low-level URL and history operations.

Before · AngularJS
vm.page = $location.search().page || 1;

vm.goToUser = function (id) {
  $location.path('/users/' + id).search({ tab: 'orders' });
};

vm.back = function () { $window.history.back(); };
After · Angular
private router = inject(Router);
private location = inject(Location);
private route = inject(ActivatedRoute);

page = toSignal(
  this.route.queryParamMap.pipe(map(p => Number(p.get('page') ?? 1))),
  { initialValue: 1 },
);

goToUser(id: number) {
  this.router.navigate(['/users', id], { queryParams: { tab: 'orders' } });
}

back() { this.location.back(); }

What changes

  • $location.path() and $location.url() as setters become Router.navigate or Router.navigateByUrl.
  • $location.search() becomes ActivatedRoute.queryParamMap, or component inputs when the router uses withComponentInputBinding().
  • html5Mode(true) is the default behavior; hash URLs need withHashLocation() in provideRouter.

Migration tip. In a hybrid app both frameworks watch the URL. The @angular/common/upgrade package provides a $location replacement backed by Angular's Location, which keeps the two in sync.

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