Angular 14独立组件动态路由：带变量的组件导入路径实现

1. 修复动态导入的语法错误 #

你现有代码的字符串拼接写法有误，ES6模板字符串需要用反引号（）包裹，变量直接用${变量名}`嵌入即可，正确写法如下：

loadComponent: () => {
  const abc: string = 'customer1';
  // 使用模板字符串正确拼接路径
  return import(`@app/shared/components/${abc}/x/x.component`).then(x => x.XComponent);
},

2. 从路由参数动态获取客户标识（生产场景推荐） #

如果要根据URL路径里的参数（比如/customer/customer1中的customer1）自动加载对应组件，可以通过路由快照获取参数，再动态拼接路径，同时添加错误降级处理：

import { ActivatedRouteSnapshot } from '@angular/router';

// 路由配置项
{
  path: 'customer/:customerId',
  loadComponent: (route: ActivatedRouteSnapshot) => {
    // 从路由参数中获取客户ID，默认值设为default避免空值
    const customerId = route.paramMap.get('customerId') || 'default';
    
    return import(`@app/shared/components/${customerId}/x/x.component`)
      .then(module => module.XComponent)
      .catch(() => {
        // 组件加载失败时，加载默认客户组件作为降级
        return import('@app/shared/components/default/x/x.component').then(m => m.XComponent);
      });
  },
  // 独立组件路由需声明standalone: true
  standalone: true
}

3. 关键注意事项 #

• TypeScript配置：确保tsconfig.json中compilerOptions.module设置为ESNext或更高版本，支持动态导入语法。
• 组件独立性：目标组件必须标注@Component({ standalone: true })，无需依赖NgModule即可被路由加载。
• 错误处理：务必添加catch逻辑，防止因客户组件不存在导致路由崩溃。

内容的提问来源于stack exchange，提问作者Seema Hemani