Question

我有HeaderComponent，FootComponent和客户组件。我创建了CustomerModule和CustomerRoutingModule

CustomerModule

declarations: [CustomerComponent]

CustomerRoutingModule

  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中的

HeaderComponent，FooterComponent

Answer 1

在各自的@NgModule({ imports: [CommonModule], declarations: [CustomerComponent], exports: [CustomerComponent], }) export class CustomerModule {}中导出页眉，页脚和客户组件。

喜欢这个。

在customer.module.ts

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

app.module.ts中的

@NgModule's

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

您只在一个@NgModule声明数组中声明一次组件。如果您想在另一个@NgModule's中使用此组件，您必须：

将组件放入exports @NgModule数组。
通过将该组件放入@NgModule @NgModule数组中，将imports声明组件声明为http .authorizeRequests() .antMatchers(GET, "/oauth/check_token") .access("isFullyAuthenticated() and (hasIpAddress('IP_OR_NETWORK_OF_RESOURCE_SERVER') or hasIpAddress('127.0.0.1/32'))") .antMatchers("/**").fullyAuthenticated();，并将其用于{{1}}。

详细了解feature modules

Answer 2

我认为您必须仅在app.module.ts中导入HeaderComponent和FootComponent，并将这两个嵌套组件放在app.component.html中。并且您不必在app模块中导入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>

和app.routes将是：

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

customer.routes

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

angular5懒加载多个组件

2 个答案: