如何在 Angular 中動態導入組件？

Question

我正在開發一個由一個主項目、十幾個子項目和十幾個全局組件組成的角度項目。 該項目將部署在多個客戶端。 客戶不會實際擁有所有子項目。 有些是，有些則只有 3-4 個。

我正在尋找一種方法來確保每個人都擁有相同的代碼，可能會使用配置文件來管理細微之處。 我現在對一位沒有一個子項目的客戶感到困惑。

這個組件導入到我的app-routing.module.ts，當然我有一個錯誤告訴我沒有找到子項目。 我正在尋找一種方法來進行條件導入，或者如果您知道，可能還有另一種方式，我唯一的條件是為每個人保持相同的代碼。

app-routing.module.ts

import {NgModule} from '@angular/core';
import {RouterModule, Routes} from '@angular/router';
import {AuthGuard} from './core/guards/auth.guard';

// Global components
import {HomeComponent} from './core/home/home.component';
import {LoginComponent} from './core/login/login.component';

// Sub projects
import {SubProject1Component} from '../../projects/sub1/sub1/src/app/sub1.component'; // <- Conditionally ignore this
import {SubProject2Component} from '../../projects/sub2/sub2/src/app/sub2.component'; // <- Conditionally ignore this
import {SubProject3Component} from '../../projects/sub3/sub3/src/app/sub3.component'; // <- Conditionally ignore this

const appRoutes: Routes = [
  { path: 'login', component: LoginComponent, canActivate: [AuthGuard] },
  { path: 'home', component: HomeComponent, canActivate: [AuthGuard], children: [
      { path: 'sub1', component: SubProject1Component },
      { path: 'sub2', component: SubProject2Component },
      { path: 'sub3', component: SubProject3Component },
    ]},
  { path: '', redirectTo: 'home', pathMatch: 'full'},
];

@NgModule({
  declarations: [],
  imports: [
    RouterModule.forRoot(appRoutes)
  ],
  exports: [
    RouterModule
  ]
})
export class AppRoutingModule {}

角 CLI：7.0.7

角度：7.0.4

Answer 1

你檢查過這個解決方案嗎？

您還可以使用配置文件為不同的客戶端加載不同的配置（組件）。