Question

我正在构建CRM系统。我的一些客户希望个性化其版本，因此我想根据子域为路由模块加载不同的组件和模块。

类似这样的东西：

const routes: Routes = [
  {
    path: '',
    component: PageAuthContainerComponent,
    children: [
      {
        path: 'login',
// get custom component if needen for subdomain
        component: SubdomainsLoader.loadComponent('PageAuthLogowanieComponent') || PageAuthLogowanieComponent,
      },
      {path: '', redirectTo: 'login', pathMatch: 'full'},
    ],
  },
];

@NgModule({
  imports: [
    CommonModule,
    RouterModule.forChild(routes),
 // get additional modules for subdomain
    ...SubdomainsLoader.loadModules('AuthPagesRoutingModule'),
  ],
  declarations: [],
  exports: []
})
export class AuthPagesRoutingModule {
}

它在开发中有效，但是AOT存在问题。我不能在装饰器中使用函数。有没有办法处理这种情况？还是唯一的解决方案是不使用production就使用aot并等待Ivy并希望它能解决问题？

Answer 1

Angular提供模块的延迟加载。因此，您可以维护两个版本模块Version1Module和Version2Module，依此类推。根据路由，您可以加载任何一个模块。因此，您无需考虑模块的动态加载，而是由角度负责。

引用：Angular lazy modules

Version1Module

const routes: Routes = [
  {
    path: '',
    children: [
      {
        path: 'login',
        component: PageAuthContainerComponent,
      },
      { path: '', redirectTo: 'login', pathMatch: 'full' },
    ],
  },
];

@NgModule({
  imports: [
    CommonModule,
    RouterModule.forChild(routes),
  ],
  declarations: [],
  exports: []
})
export class Version1Module { }

Version2Module

const routes: Routes = [
  {
    path: '',
    children: [
      {
        path: 'login',
        component: PageAuthContainerComponent1,  // Or can be same component as of version 1
      },
      { path: '', redirectTo: 'login', pathMatch: 'full' },
    ],
  },
];

@NgModule({
  imports: [
    CommonModule,
    RouterModule.forChild(routes),
  ],
  declarations: [],
  exports: []
})
export class Version2Module { }

AppModule（主模块）

const versionToLoad = (window.location.hostname || "").includes('v1subdomain') ? './apps/v1/version1.module#Version1Module' : './apps/v2/version2.module#Version2Module';

const routes: Routes = [
  {
    path: 'app',
    loadChildren: versionToLoad
  }
];

@NgModule({
  imports: [
    CommonModule,
    RouterModule.forRoot(routes),
  ],
  declarations: [],
  exports: []
})
export class AppModule { }

在装饰器中动态加载模块/组件

1 个答案: