Angular：加载动态组件

Question

I have to load components in the routes dynamically.

There is an environment variable in the env file and depending upon the value of that env variable I need to define component used in a route.

Example:

const mydashboard= env.value==='EnvA'?'dashboardA':'dashboardB;

const routes: Routes = [
    { path: '/dashboard', component: myDashboard }
];

Please let me know how can I make some of my routes dynamic as shown in the above examples which depend on some env variable value.

Answer 1

Try this:

import { DashboardAComponent } from './dashboard-a/dashboard-a.component';
import { DashboardBComponent } from './dashboard-b/dashboard-b.component';

.
.
.

const routes: Routes = [
];

if (env.value === 'EnvA') {
  routes.push({ path: 'dashboard', component: DashboardAComponent });
} else if (env.value === 'EnvB') {
  routes.push({ path: 'dashboard', component: DashboardBComponent });
}

Basically you add new route object into routes array depending on your env.value.