Angular route to a URL outside the base href

Question

When a service in our Angular app performs a HTTP request, we want to direct a user to the login page.

Here's our setup:

https://foo.bar/ui <-- our angular app, at 'base-href=/ui'
https://foo.bar/login <-- our login page, different app entirely

Here's what we're trying:

@Injectable({
    providedIn: 'root'
})
export class ServiceHelper {
    constructor(private router: Router) {}

    public handleError<T>(result?: T): (error: any) => Observable<T> {
        {
            return (error: HttpErrorResponse): Observable<T> => {
                if (error.status === 401) {
                    // Direct the user to login
                    this.router.navigate(['/login']);
                }
                console.error(error);
                return of(result as T);
            };
        }
    }
}

The problem is that on 401, the browser gets directed to https://foo.bar/ui/login. We run the app with 'base-href=/ui' in our angular.json. Our login app is a different system, outside that base-href.

Is there any good way to tell Angular's router to redirect the user at an absolute URL on the same server, outside the base-href?

Thanks!

I think the router is for internal routes only. To navigate to an external route from the app, I would use the Window object. stackoverflow.com/a/1226718/7365461 — AliF50
@AliF50 I think you're right. I could get the browser's address bar to show the right URL by trying this.router.navigateByUrl('/../login');. But even that wouldn't work, seemingly b/c it was an external route. window.location.href = '/../login' seems to work. If you write an answer, I'll accept it — Cuga

AliF50 AliF50 · Accepted Answer · 2021-03-02T02:36:04

The Angular router is only for internal routes of the application. To navigate to an external route from the app, I would use the Window object. Check it out here

Angular route to a URL outside the base href

2 Answers