Angular 2 多次声明错误

Question

我的应用程序中有三个功能模块（包括共享）

1) CustomerModule
2) SiteModule
3) SharedModule

Customer 和 Site module 导入 shared module 和 Site module 在 application 启动时急切加载customer module 配置为 lazy load.

我的代码如下所示

app.routing.ts

const appRoutes: Routes = [
    {
        path: '',
        redirectTo: '/sites',
        pathMatch: 'full'
    },
    {
        path: 'customers',
        loadChildren: 'app/customers/customers.module'
    },
]

export const routing = RouterModule.forRoot(appRoutes);

app.module.ts

@NgModule({
   imports:[routing, SiteModule],
   declarations:[AppComponent]
   bootstrap:[AppComponent]
})
export class AppModule{}

这是我的功能模块的样子

站点模块

site.routing.ts

const routes: Routes = [
  { path: 'sites', component: SiteListComponent }
]
export const routing = RouterModule.forChild(routes);

site.module.ts

@NgModule({
   imports: [routing, SharedModule], 
   declarations: [SiteListComponent, EditCustomerComponent]
})
export class SiteModule{}

客户模块

customer.routing.ts

const routes: Routes = [
  { path: '', component: CustomerListComponent}
]
export const routing = RouterModule.forChild(routes);

customer.module.ts

@NgModule({
   imports: [routing, SharedModule], 
   declarations: [CustomerListComponent, EditCustomerComponent]
})
export default class CustomerModule{}

SiteModule 和 CustomerModule 在 declaration 列表中都有 EditCustomerComponent，当我导航到 customers route 时，我得到了多个declaration error EditCustomerComponent 在 SiteModule 和 CustomerModule 中。

我知道这可以通过将 EditCustomerComponent 移动到共享 module 来解决，但这不是我想要的，因为 component 驻留在 [=25= 中更有意义].

另一种解决方法是从 CustomerModule 导出 EditCustomerComponent，然后导入到 SiteModule，但这要求 CustomerModule 不是 lazy loaded我又不想了。

我想知道是否有其他好的方法来处理这个问题。

Answer 1

指令（和组件）只能在一个模块的声明中列出。

您需要将 EditCustomerComponent 移动到它自己的 NgModule（或任何其他具有共享指令的），然后将其添加到 CustomerModule 和 SiteModule 的 imports: [] `

Angular 2 多次声明错误

Angular 2 Multiple declaration error

lazy-loading

angular