Angular 14 routes, add Dynamic loadComponent import url with variable

Question

USing angular 14 standalone concept I am looking to implement dynamic routing which will load component for respective customer from path

loadComponent: () => {
const abc:string = 'customer1';
return import('@app/shared/components/'+${abc}+'/x/x.component').then(x => x.XComponent)
        },

looking for a way to implement variable string in import URL to load component from respective customer path

Answer 1

import requires a string literal, so you cannot pass a concatenated string or even a variable that contains a string. However, you could achieve with something like this:

export const ROUTES: Routes = [
  { 
    path: '', 
    loadComponent: () => CUSTOMER_TYPE === 'a'
      ? import('./customer-a/customer-a.component').then(mod => mod.CustomerAComponent) 
      : import('./customer-b/customer-b.component').then(mod => mod.CustomerBComponent) 
  }
];

If you have more than two components, you could use a switch:

export const ROUTES: Routes = [
  { 
    path: '', 
    loadComponent: () => {
      switch(CUSTOMER_TYPE) {
        case 'a': return import('./customer-a/customer-a.component').then(mod => mod.CustomerAComponent);
        case 'b': return import('./customer-b/customer-b.component').then(mod => mod.CustomerBComponent);
        case 'c': return import('./customer-c/customer-c.component').then(mod => mod.CustomerCComponent);
        default : return import('./customer-a/customer-a.component').then(mod => mod.CustomerAComponent);
      }
    }
  }
];

Here's a StackBlitz example.