Routing in Angular Applications

This page covers the Angular-specific routing guidelines. See Routing for the shared routing requirements and reasons behind them.

General Routing Guidelines

Routing Inside the Application

When routing inside the application, it is important to use relative paths instead of absolute paths. This ensures that the application can handle routing correctly regardless of the workspace configuration.

Navigate to sub page

Application is currently at https://shell_deployment_path/employees-workspace/client-management and needs to navigate to a client with ID 123, it should use a relative path.

this.router.navigate(['client', 123]);

Application is currently at https://shell_deployment_path/employees-workspace/client-management/client/123 and needs to navigate back to the client list, it should use a relative path.

this.router.navigate(['../'], { relativeTo: this.route });

Routing Using Absolute Paths

Sometimes, it might be necessary to use absolute paths for routing. In such cases, it is crucial to construct the absolute path dynamically based on the current workspace configuration. This can be achieved by using the AppStateService to get the currentMfe$, which contains the current workspace and application information.

Navigate to details page using absolute path

Application is currently at https://shell_deployment_path/employees-workspace/client-management and needs to navigate to a client with ID 123 using an absolute path. It should construct the absolute path dynamically.

import { firstValueFrom } from 'rxjs';
...

appStateService: AppStateService; // Injected via constructor

async routeOnClick() {
    const mfeInfo = await firstValueFrom(this.appStateService.currentMfe$);
    this.router.navigateByUrl(`/${mfeInfo.baseHref}/client/123`);
}
If you are using ngrx, you can use the AppStateService directly in your effects to construct the absolute path dynamically.

Navigate to details page using absolute path in an ngrx effect

The same navigation can be triggered from an ngrx effect by combining the dispatched action with currentMfe$ before calling the router.

import { Injectable } from '@angular/core';
import { Actions, createEffect, ofType } from '@ngrx/effects';
import { Router } from '@angular/router';
import { switchMap, tap } from 'rxjs/operators';
import { AppStateService } from '@onecx/angular-integration-interface';

import { navigateToClientDetails } from './client.actions';

@Injectable()
export class ClientEffects {
    navigateToClientDetails$ = createEffect(
        () =>
            this.actions$.pipe(
                ofType(navigateToClientDetails),
                switchMap((action) =>
                    this.appStateService.currentMfe$.pipe(
                        tap((mfeInfo) =>
                            this.router.navigateByUrl(`/${mfeInfo.baseHref}/client/${action.clientId}`)
                        )
                    )
                )
            ),
        { dispatch: false }
    );

    constructor(
        private actions$: Actions,
        private appStateService: AppStateService,
        private router: Router
    ) {}
}

Routing Between Applications

If it is necessary to route between different applications or to specific endpoints, it is recommended to use the WorkspaceService.

The WorkspaceService provides methods to:

  • Dynamically construct URLs for applications and endpoints based on the current workspace.

  • Validate whether a route or endpoint exists before navigating.

  • Resolve endpoint aliases and inject parameters into endpoint paths.

This approach ensures that applications remain decoupled from static configurations and are fully integrated into the OneCX workspace model.