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!

Answer 1

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