Creating dynamically generated routes in Angular or Angular 9 before initialization

Question

Creating dynamically generated routes in Angular or Angular 9 before initialization

I'm currently working on a project where I am in the process of converting an AngularJS application to Angular. The main challenge that I am facing at the moment revolves around routing.

To sum it up: My requirement is to define routes based on an API response prior to utilizing the routing module.

In the functioning scenario with AngularJS: (More or less pseudo code provided below)

There are some basic routes that are universally available, these are set in the standard AngularJS manner:

/home
/settings
...and so on

Additionally, there are dynamic routes generated depending on the API response

/purchase-requests
/invoices
/godzilla
...and more. The actual content isn't significant, essentially, it's a dynamic list of routes obtained from an existing API in the form of an array of strings

The fundamental procedure followed by the existing AngularJS app:

The AngularJS app is NOT immediately associated with an element using ng-app as commonly done.
A pure (or jQuery) response is fetched from the API upon page loading.
The initialization of the AngularJS app occurs through:

 angular.bootstrap(document.getElementById('mainElementId'),['appName']);

This method functions due to AngularJS's behavior of delaying the .config() execution until the Angular app is bootstrapped, which we defer until after receiving the API response.

Here is an example of functional AngularJS code used today:

<script>

  let appList = [];
  const mainApp = angular.module('mainApp', ['ngRoute']);


  // Controllers
  mainApp.controller('mainController', mainController);
  mainApp.controller('homeController', homeController);
  mainApp.controller('appListController', appListController);
  mainApp.controller('appSingleController', appSingleController);
  mainApp.controller('errorController', errorController);

  // config will not be called until the app is bootstrapped
  mainApp.config(function($routeProvider) {

    // Default routes for all users
    $routeProvider.when('/', { templateUrl: 'views/home.html', controller: 'homeController'});
    $routeProvider.when('/home', { templateUrl: 'views/home.html', controller: 'homeController'});

    // Incorporate the dynamic routes received from the API
    for (let appName in appList) {
      $routeProvider.when(`/${appName}`, { templateUrl: 'views/app-list.html', controller: 'appListController'});
      $routeProvider.when(`/${appName}/new`, { templateUrl: 'views/app-single.html', controller: 'appSingleController'});
      $routeProvider.when(`/${appName}/view/:itemNumber`, { templateUrl: 'views/app-single.html', controller: 'appSingleController'});
    }

    $routeProvider.otherwise({ templateUrl: 'views/error.html', controller: 'errorController'});
  });



  $(document).ready(function() {
    const options = {
      type: 'GET',
      url: '/api/apps/getAvailableApps',
      success: onAppSuccess,
    };
    $.ajax(options);
  });

  function onAppSuccess(response) {
    appList = response.appList;
    angular.bootstrap(document.getElementById('mainApp'), ['mainApp']);
  }

</script>

<!-- Typically, you bind to the app using ng-app="mainApp" -->
<div id="mainApp" class="hidden" ng-controller="mainController">

  <!-- Route views -->
  <div ng-view></div>

</div>

In Angular 9 (or seemingly any recent version of Angular), routes are defined within the routing module before initializing the main component:

const routes: Routes = [
  { path: 'login', component: LoginComponent },
  { path: '', component: DashboardComponent },
  { path: 'home', component: DashboardComponent },
  { path: 'settings', component: SettingsComponent },
];

Using router.resetConfig doesn't provide a solution

If I have the main module load the API configuration first and then employ resetConfig based on the response, everything works fine if the user initially navigates to /, /home, or one of the other predetermined routes: The new dynamic routes are formed and navigation to them proceeds smoothly.

However, if a user directly navigates to a route that isn't predefined (for instance, /godzilla), the router prevents the page from loading altogether (or) if the wildcard route is set, presents the 404 error. The ngOnInit() function in the main component (which I intended to use to fetch the API response) never gets executed.

The question remains: How can I establish routes based on the API response before executing or even initializing the router navigation?

javascript angular typescript angular-router angular9

Answer 1

Answer №1

To create dynamic routes, I utilize predefined route url templates with parameters.

const routes: Routes = [
  { path: 'login', component: LoginComponent },
  { path: '', component: DashboardComponent },
  { path: 'home', component: DashboardComponent },
  { path: 'settings', component: SettingsComponent },
  { path: ':appName', canActivate: AppGuard, children: [
    { path: '', component: AppListComponent },
    { path: 'new', component: 'NewAppComponent' },
    { path: 'view/:itemNumber', component: AppSingleComponent }
  ] },
  { path: '**', component: ErrorComponent }
];

Routes are prioritized based on order, so it's important to list "known" routes first. If a URL has a single segment that doesn't match any of the "known" routes, it will then be matched against :appName. A guard can be implemented to validate the :appName parameter. In case of invalid parameter, the '**' route will be triggered.

The guard implementation would resemble:

@Injectable({ providedIn: 'root' })
export class AppGuard implements CanActivate {
  constructor(private appService: AppService) {
  }

  canActivate(route: ActivatedRouteSnapshot): Observable<boolean> {
    const appName = route.params.appName;
    return this.appService.isValidAppName(appName);
  }
}

The function appService.isValidAppName is responsible for validating the app name.

Answer 2

To create dynamic routes, I utilize predefined route url templates with parameters.

const routes: Routes = [
  { path: 'login', component: LoginComponent },
  { path: '', component: DashboardComponent },
  { path: 'home', component: DashboardComponent },
  { path: 'settings', component: SettingsComponent },
  { path: ':appName', canActivate: AppGuard, children: [
    { path: '', component: AppListComponent },
    { path: 'new', component: 'NewAppComponent' },
    { path: 'view/:itemNumber', component: AppSingleComponent }
  ] },
  { path: '**', component: ErrorComponent }
];

Routes are prioritized based on order, so it's important to list "known" routes first. If a URL has a single segment that doesn't match any of the "known" routes, it will then be matched against :appName. A guard can be implemented to validate the :appName parameter. In case of invalid parameter, the '**' route will be triggered.

The guard implementation would resemble:

@Injectable({ providedIn: 'root' })
export class AppGuard implements CanActivate {
  constructor(private appService: AppService) {
  }

  canActivate(route: ActivatedRouteSnapshot): Observable<boolean> {
    const appName = route.params.appName;
    return this.appService.isValidAppName(appName);
  }
}

The function appService.isValidAppName is responsible for validating the app name.

Answer 3

Answer №2

Is there a way to generate routes based on the API response before the router navigation takes place or is even initialized?

There are two approaches to achieve this.

The first approach involves using Components to handle dynamic routes. Static routes are defined initially, and dynamic routes are directed to the DynamicComponent with the routing parameter id. Within the DynamicComponent, ActivatedRoute is used to retrieve the routing parameter, and Router is utilized to navigate to the 404 route in case of failure.

In the app-routing.module.ts

const routes: Routes = [
  { path: '', redirectTo: 'home', pathMatch: "prefix" },
  { path: 'login', component: LoginComponent },
  { path: 'home', component: DashboardComponent },
  { path: 'settings', component: SettingsComponent },
  { path: '404', component: PageNotFoundComponent },
  { path: ':id', component: DynamicComponent },
];

In the DynamicComponent

constructor(private aroute: ActivatedRoute, private router: Router) { }

ngOnInit(): void {

  this.aroute.params.pipe(first()).subscribe((param) => {
    console.log(param.id)

    ...   // perform any necessary API call with param.id and obtain a response as a promise

    .then( (response) => {

       ...    // implement desired actions upon successful response

    })
    .catch( (error) => {

       console.error(error);
       this.router.navigate(['404']);    // redirect to 404 page if unsuccessful

    })


  }
}

The second approach entails utilizing Services to filter out unknown routes. Similar to the first method, static routes are established first followed by dynamic routes routed to the DynamicComponent and filtered through the DynamicRouteService which implements CanActivate. In the DynamicRouteService, we map the next.params to return an Observable<boolean> to the Router module, which will hold the routing until the observable is fulfilled.

In the app-routing.module.ts

const routes: Routes = [
  { path: '', redirectTo: 'home', pathMatch: "prefix" },
  { path: 'login', component: LoginComponent },
  { path: 'home', component: DashboardComponent },
  { path: 'settings', component: SettingsComponent },
  { path: '404', component: PageNotFoundComponent },
  { path: ':id', component: DynamicComponent, canActivate: [DynamicRouteService] },
];

Note: Ensure to add DynamicRouteService to providers in app.module.ts

In the dynamic-route.service.ts

export class DynamicRouteService implements CanActivate {

  constructor(private router: Router) { }

  canActivate(next: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {

    return next.params.pipe(first()).pipe(map(param) => {
      console.log(param.id)

      return ...   // make any API call with param.id and get a response as promise

      .then( (response) => {

         ...    // do whatever you want to do on success
         return true;

      })
      .catch( (error) => {

         console.error(error);
         this.router.navigate(['404']);    // route to 404 on failure
         return false;

      }))

    }
  }
}

Answer 4

Is there a way to generate routes based on the API response before the router navigation takes place or is even initialized?

There are two approaches to achieve this.

The first approach involves using Components to handle dynamic routes. Static routes are defined initially, and dynamic routes are directed to the DynamicComponent with the routing parameter id. Within the DynamicComponent, ActivatedRoute is used to retrieve the routing parameter, and Router is utilized to navigate to the 404 route in case of failure.

In the app-routing.module.ts

const routes: Routes = [
  { path: '', redirectTo: 'home', pathMatch: "prefix" },
  { path: 'login', component: LoginComponent },
  { path: 'home', component: DashboardComponent },
  { path: 'settings', component: SettingsComponent },
  { path: '404', component: PageNotFoundComponent },
  { path: ':id', component: DynamicComponent },
];

In the DynamicComponent

constructor(private aroute: ActivatedRoute, private router: Router) { }

ngOnInit(): void {

  this.aroute.params.pipe(first()).subscribe((param) => {
    console.log(param.id)

    ...   // perform any necessary API call with param.id and obtain a response as a promise

    .then( (response) => {

       ...    // implement desired actions upon successful response

    })
    .catch( (error) => {

       console.error(error);
       this.router.navigate(['404']);    // redirect to 404 page if unsuccessful

    })


  }
}

The second approach entails utilizing Services to filter out unknown routes. Similar to the first method, static routes are established first followed by dynamic routes routed to the DynamicComponent and filtered through the DynamicRouteService which implements CanActivate. In the DynamicRouteService, we map the next.params to return an Observable<boolean> to the Router module, which will hold the routing until the observable is fulfilled.

In the app-routing.module.ts

const routes: Routes = [
  { path: '', redirectTo: 'home', pathMatch: "prefix" },
  { path: 'login', component: LoginComponent },
  { path: 'home', component: DashboardComponent },
  { path: 'settings', component: SettingsComponent },
  { path: '404', component: PageNotFoundComponent },
  { path: ':id', component: DynamicComponent, canActivate: [DynamicRouteService] },
];

Note: Ensure to add DynamicRouteService to providers in app.module.ts

In the dynamic-route.service.ts

export class DynamicRouteService implements CanActivate {

  constructor(private router: Router) { }

  canActivate(next: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {

    return next.params.pipe(first()).pipe(map(param) => {
      console.log(param.id)

      return ...   // make any API call with param.id and get a response as promise

      .then( (response) => {

         ...    // do whatever you want to do on success
         return true;

      })
      .catch( (error) => {

         console.error(error);
         this.router.navigate(['404']);    // route to 404 on failure
         return false;

      }))

    }
  }
}

Answer 5

Answer №3

Appreciate the helpful responses.

I was able to resolve this issue in a different manner.

Initially, I was considering implementing a "DynamicRouter" component, but eventually discovered a more straightforward solution using APP_INITIALIZER.

You can find my detailed explanation here: Angular load routing from REST service before initialization

Answer 6

Appreciate the helpful responses.

I was able to resolve this issue in a different manner.

Initially, I was considering implementing a "DynamicRouter" component, but eventually discovered a more straightforward solution using APP_INITIALIZER.

You can find my detailed explanation here: Angular load routing from REST service before initialization

Creating dynamically generated routes in Angular or Angular 9 before initialization

Answer №1

Answer №2

Answer №3

Similar questions

Navigating Bootstrap: Refreshing a full-screen modal with a swipe gesture on mobile devices

Issue with publishing npm package using yarn package manager

Creating a dataset for D3 in JavaScript: A step-by-step guide

Ensuring the validity of float and non-empty values in JavaScript

Managing memory and CPU resources in NodeJS while utilizing MongoJS Stream

Using AngularJS to toggle between two select dropdowns

Dividing a select option

What causes the timer to pause, and what steps can be taken to avoid it? (Using Javascript with Iframe)

When running the test, the message "Unable to resolve all parameters for BackendService" is displayed

JavaScript - Display all comments

Example of a chat server code using NodeJS

Updating parent scope data from within a directive without relying on isolated scope bindings

How can I pass arguments from a Python command line program (compiled to an EXE) to a JavaScript file?

Extend the row of the table according to the drop-down menu choice

The onProgress event of the XMLHttpRequest is triggered exclusively upon completion of the file upload

Display or conceal elements using the unique identifier selected from a dropdown menu in JavaScript

Is it possible to prevent a webpage from being refreshed?

Leveraging JavaScript Functionality with ASP.NET Identity Roles

Is it possible for me to connect an npm run command as a task in a Gruntfile?

The @Prop property decorator in Vue cannot be utilized as it is not compatible