angular5延迟加载多个组件

我有

HeaderComponent

，

FootComponent

和Customer组件。我创建了

CustomerModule

和

CustomerRoutingModule

客户模块

declarations: [CustomerComponent]

自定义例程模块

  const routes: Routes = [
  {
    path: '',
    component: CustbasicdetailsComponent
  }
];

App.routing

{ 
  path: 'custbasicdetails' ,
  loadChildren: 'app/customer/customer.module#CustomerModule' 
},

但我犯了一个错误

  'header' is not a known element:
     1. If 'header' is an Angular component, then verify that it is part of this module.

编辑：

---

app.module.ts中的

标题组件

，

页脚组件

在各自的

@NgModules

中导出页眉、页脚和客户组件

@NgModule({
  imports: [CommonModule],
  declarations: [CustomerComponent],
  exports: [CustomerComponent],
})
export class CustomerModule {}

@NgModule({
  imports: [BrowserModule, CustomerModule],
  declarations: [AppComponent]
  exports: [],
  bootstrap: [AppComponent],
})
export class CustomerModule {}

像这样

在customer.module.ts中

@NgModule({
  imports: [CommonModule],
  declarations: [CustomerComponent],
  exports: [CustomerComponent],
})
export class CustomerModule {}

@NgModule({
  imports: [BrowserModule, CustomerModule],
  declarations: [AppComponent]
  exports: [],
  bootstrap: [AppComponent],
})
export class CustomerModule {}

在app.module.ts中

@NgModule({
  imports: [CommonModule],
  declarations: [CustomerComponent],
  exports: [CustomerComponent],
})
export class CustomerModule {}

@NgModule({
  imports: [BrowserModule, CustomerModule],
  declarations: [AppComponent]
  exports: [],
  bootstrap: [AppComponent],
})
export class CustomerModule {}

对页眉和页脚执行相同的操作

在单个

@NgModule的

声明数组中只声明一次组件。如果要在另一个

@NgModule

中使用此组件，必须：

通过将组件放入

@NgModule的
导出
阵列中导出组件

将声明组件的

@NgModule

导入要使用该组件的

@NgModule

，方法是将其放置在

@NgModule

导入的

数组中

---

阅读更多有关

的信息，我认为您必须仅在app.module.ts中导入HeaderComponent和FootComponent，并将这两个嵌套组件放入app.component.html中。而且，您不必将CustomerModule导入应用程序模块中，因为它是一个懒散加载的模块。 您的app.module.ts将如下所示：

@NgModule({
  imports: [BrowserModule],
  declarations: [AppComponent, HeaderComponent,  FootComponent ]
  exports: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

您的app.component.html将是：

<app-header></app-header>
<router-outlet></router-outlet>
<app-footer><app-footer>

const routes: Routes = [
{ path: '', redirectTo: '/custbasicdetails', pathMatch: 'full' },
{ path: 'custbasicdetails' , loadChildren: 'app/customer/customer.module#CustomerModule' 
}
]

顾客路线

const routes: Routes = [
{ path: '', component: 'CustbasicdetailsComponent ', pathMatch: 'full' }
}
]

---

您是否在模块中导入（在声明中定义）头组件？它必须导入到所有要使用它的模块中。是的。app.module.ts中的HeaderComponent和FooterComponent，但是您也在CustomerModule中使用这些组件吗？然后你也必须在那里导入它们。这不起作用。我发现一个错误：Type HeaderComponent是两个模块声明的一部分：AppModule和CustomerModule！请考虑将HealE元器件移动到导入AppMead和CuuleMead模块的更高模块。您还可以创建一个新的NgModule，导出并包含HeaderComponent，然后在AppModule和CustomerModule中导入该NgModule。请简要解释一下。如果您给出完整的示例，我将感谢您根据上面的评论，您需要从

AppModule

或

CustomerModule

中删除

HeaderComponent

。它必须是单个

@NgModule

的一部分。您一次只能声明一次组件

@NgModule

。谢谢。但我无法获取任何customer.module.bundle.js文件谢谢。但是我无法获取任何customer.module.bundle.js文件for loadChildren请尝试到您的相对路径app.module，loadChildren:'./customer/customer.module#customermodule无错误兄弟。。我添加了常量路由：routes=[{path:''，component:CustbasicdetailsComponent}]；在CustomerRoutingModulei中，没有为customertry创建任何块文件，[{path:''，组件：CustbasicdetailsComponent，路径匹配：'full'}]