如何动态导入角度组件?

时间:2019-03-26 07:47:25

标签: angular import components

我正在开发一个由一个主要项目,十二个子项目和十二个全局组件组成的有角度的项目。该项目将部署在多个客户端上。客户将不会实际拥有所有子项目。有些是,有些则只有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'; // <- Conditionnally ignore this
import {SubProject2Component} from '../../projects/sub2/sub2/src/app/sub2.component'; // <- Conditionnally ignore this
import {SubProject3Component} from '../../projects/sub3/sub3/src/app/sub3.component'; // <- Conditionnally 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 {}

Angular CLI:7.0.7

角度:7.0.4

1 个答案:

答案 0 :(得分:0)

您是否选中了此solution

您还可以使用配置文件为不同的客户端加载不同的配置(组件)。