Angular5使用模块中的组件

我是A5的noob，正在做我的第一个“组件重构到模块”。我试图使用一个组件，该组件是在一个模块中从另一个模块中定义的。我得到错误，

src/app/app routing.module.ts（9,10）中的错误：错误TS2305:module“xxx/src/app/admin/admin.module”没有导出的成员“AdminHomeComponent”。

我已经看了其他相关的问题，我只是错过了一些东西。希望你能帮忙

app-routing.module.ts：

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { CommonModule } from '@angular/common';
import { HomeComponent } from './home/home.component';
import { ArchitectureComponent } from './architecture/architecture.component';
import { DesignComponent } from './design/design.component';
import { HistoryComponent } from './history/history.component';
import { AdminHomeComponent } from './admin/admin.module';

const routes: Routes = [
  { path: '', redirectTo: '/home', pathMatch: 'full' },
  { path: 'home', component: HomeComponent },
  { path: 'architecture', component: ArchitectureComponent },
  { path: 'design', component: DesignComponent },
  { path: 'history', component: HistoryComponent }
];

@NgModule({
  exports: [ RouterModule ],
  imports: [ RouterModule.forRoot(routes)]
})

export class AppRoutingModule { }

src/app/admin/admin.module：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { AdminHomeComponent } from './admin-home/admin-home.component';

@NgModule({
  imports: [
    CommonModule
  ],
  exports: [
    AdminHomeComponent
  ],
  declarations: [
    AdminHomeComponent  // <-- Tried adding this based on comments, no help
  ]
})
export class AdminModule { }

如果有帮助的话

src/app/app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
import { MDBBootstrapModule } from 'angular-bootstrap-md';
import { TreeModule } from 'angular-tree-component';

import { AppComponent } from './app.component';
...
import { HomeComponent } from './home/home.component';
import { ComponentsModule } from './components/components.module';
import { AdminModule } from './admin/admin.module';

@NgModule({
  declarations: [
    AppComponent,
    ...
    HomeComponent,
    AdminModule   // <-- Tried adding this based on comments, but no help
  ],
  imports: [
    BrowserModule,
    MDBBootstrapModule.forRoot(),
    TreeModule,
    AppRoutingModule,
    AdminModule,
    ComponentsModule
  ],
  schemas: [ NO_ERRORS_SCHEMA ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

  import { AdminHomeComponent } from './admin-home/admin-home.component';
  export {AdminHomeComponent };

从'@angular/platform browser'导入{BrowserModule}；
从“@angular/core”导入{NgModule，无错误_SCHEMA}；
从'angular bootstrap md'导入{MDBBootstrapModule}；
从“角度树组件”导入{TreeModule}；
从“./app.component”导入{AppComponent}；
...
从“./home/home.component”导入{HomeComponent}；
从“./components/components.module”导入{ComponentsModule}；
从“./admin/admin.module”导入{AdminModule}；
@NGD模块({
声明：[
应用组件，
...
HomeComponent，
AdminModule/您从错误的文件导入

import { AdminHomeComponent } from './admin/admin.module';

将
模块
替换为文件名中的
组件
。
您忘记在模块中声明它了

试试这个

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { AdminHomeComponent } from './admin-home/admin-home.component';

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

我还发现在app routing.module.ts:中有
从'./admin/admin.module'导入{AdminHomeComponent}；
删除它

而是在src/app/admin/admin.module中这样做

import { NgModule } from '@angular/core';
import { RouterModule} from '@angular/router';
import { CommonModule } from '@angular/common';
import { AdminHomeComponent } from './admin-home/admin-home.component';

@NgModule({
  imports: [
    CommonModule,
    RouterModule.forRoot([
    { path: 'admin', component: AdminHomeComponent } 
  ])
  ],
  exports: [
    AdminHomeComponent
  ],
  declarations: [AdminHomeComponent]
})
export class AdminModule { }

如果从模块文件导入，则必须在admin.module.ts中以这种方式导出

import { BrowserModule } from '@angular/platform-browser';
import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
import { MDBBootstrapModule } from 'angular-bootstrap-md';
import { TreeModule } from 'angular-tree-component';

import { AppComponent } from './app.component';
...
import { HomeComponent } from './home/home.component';
import { ComponentsModule } from './components/components.module';
import { AdminModule } from './admin/admin.module';

@NgModule({
  declarations: [
    AppComponent,
    ...
    HomeComponent,
    AdminModule   // <-- Tried adding this based on comments, but no help
  ],
  imports: [
    BrowserModule,
    MDBBootstrapModule.forRoot(),
    TreeModule,
    AppRoutingModule,
    AdminModule,
    ComponentsModule
  ],
  schemas: [ NO_ERRORS_SCHEMA ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

  import { AdminHomeComponent } from './admin-home/admin-home.component';
  export {AdminHomeComponent };

Thx，Lazar，但是没有admin.component。这是一个模块。这正是您遇到的问题，但还好。Thx，Lazar，但是……我不（现在仍然不）理解如何将您所说的转化为我问题的解决方案。@Fateh的回答说我应该添加一个
导出{}
。这解决了我的问题。但我仍然不确定这是最好的方法。你能详细说明一下吗？谢谢，阿玛亚，但这没有帮助。将其声明为导出是否足够？是的，这不是因为每个组件都需要声明。Thx，阿玛亚，…是否需要声明所描述的组件？它似乎不需要声明从我到目前为止所做的尝试来看，情况更糟。请尝试重建您的应用程序错误来自
ng build
谢谢，Fateh！这确实起到了作用。但它让我困惑。您能否提供一个指向文档的指针，关于
导出
？我在任何示例中都没有看到。谢谢！在您的admin.module中，您没有任何名为Admi的导出类nHomeComponent，所以您必须以这种方式导出它，然后您可以导入它并将其用作组件，但最好的方式是从它的ts文件“admin home.component.ts”导入共享组件，但我建议您创建一个sharedModule，并将所有内容像（组件、服务、管道、指令…）一样共享当你需要的时候，你可以把它导入到另一个模块中，选中这个，谢谢，Fateh！我很欣赏这些例子，但是同样，它们不包括模块导出子组件的子组件。因此它们不导出{XxxComponent}；正如您所指出的，这是我的问题……应该如何使用共享模块中的组件？该模块应该如何导出组件？只有从模块文件导入组件时，这才有效，但最好是从其文件导入：）