如何解决错误组件不是任何 NgModule 的一部分或未在 Angular 6 中正确导入？

Question

这是我得到的错误：-

<b>Error: Component Component is not part of any NgModule or the module has not been imported into your module.
Error: Component Component is not part of any NgModule or the module has not been imported into your module.</b>

我希望我的设置模块延迟加载，但出现错误，例如组件不是模块的一部分或模块尚未导入到您的模块中

//This is my app.module.ts
import { BrowserModule, Title } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { ReactiveFormsModule } from '@angular/forms';
import { LeaveService } from './EW_Leave/leave.service';
import { UtilsModule } from './EW_Utils/utils.module';
import { JobReferenceComponent } from '../app/EW_Utils/job-reference/job-reference.component'
import { CommonModule } from '@angular/common';
import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { EWDashboardComponent } from './EW_Dashboard/ew-dashboard.component';
import { EWLoginComponent } from './EW_Login/ew-login.component';


@NgModule({
  imports: [
    StorageServiceModule,
    CommonModule,
    BrowserModule,
    FormsModule, ReactiveFormsModule,
    AppRoutingModule,
    UtilsModule, LeaveModule, 
  ],
  declarations: [
    AppComponent, JobReferenceComponent, EWDashboardComponent, EWLoginComponent
  ],
  exports: [],
  providers: [LeaveService, Title],
  bootstrap: [AppComponent]
})
export class AppModule {




}

//这是我的app-routing.module.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { EWDashboardComponent } from './EW_Dashboard/ew-dashboard.component';
import { EWLoginComponent } from './EW_Login/ew-login.component';
import { SetupDashboardComponent } from './EW_Setup/setup-dashboard/setup-dashboard.component';
import {CompaniesSetupComponent} from './EW_Setup/companies-setup/companies-setup.component';
const appRoutes: Routes = [
  { path: 'login', component: EWLoginComponent },
  { path: 'dashboard', component: EWDashboardComponent },
  { path: '', redirectTo: 'login', pathMatch: 'full' },
  { path: 'setup',

   loadChildren: './EW_Setup/setup.module#CustomersModule'

  },



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

export class AppRoutingModule {


}

我想延迟加载的以下设置模块

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { CompaniesSetupComponent } from './companies-setup/companies-setup.component';
import { SetupDashboardComponent } from './setup-dashboard/setup-dashboard.component';
import { BusinessUnitSetupComponent } from './business-unit-setup/business-unit-setup.component';

const appRoutes: Routes = [

  { path: '', component: SetupDashboardComponent},
]
@NgModule({
  imports: [RouterModule.forChild(appRoutes)],
  exports: [],
  declarations: []
})

export class SetupRoutingModule {


}

//这是我的 SETUP.MODULE.TS 文件

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { UtilsModule } from '../EW_Utils/utils.module';
import { FormsModule } from '@angular/forms';
import { ReactiveFormsModule } from '@angular/forms';
import { SetupDashboardComponent } from './setup-dashboard/setup-dashboard.component';
@NgModule({
  imports: [
    CommonModule,UtilsModule,FormsModule,ReactiveFormsModule,NgxSpinnerModule,SharedModule,SetupRoutingModule,Ng2SearchPipeModule,GrowlerModule,TextareaAutosizeModule
  ],
  declarations: [ SetupDashboardComponent, SidebarMenuComponent, CompaniesSetupComponent, BusinessUnitSetupComponent],
  providers:[CompaniesSetupService,GrowlerService,CommonApiService],
  entryComponents:[]
})
export class SetupModule { }

Answer 1

从 AppModule 声明的组件不能被延迟加载模块访问（这是为了保护延迟加载模块的封装不受外部组件依赖的影响）。

要从延迟加载的模块访问EWDashboardComponent，您需要：

1. 从延迟加载的模块中声明组件
2. 在小部件模块中声明组件，然后由您的延迟加载模块导入（确保该组件也是 导出 - 表示它也在导出数组中）

如果EWDashboardComponent 是共享组件，我推荐选项 2，因为它遵循 Angular 的模块类型指南：https://angular.io/guide/module-types（请参阅小部件模块部分）。

Answer 2

我有一个结构如下的项目：

• gridster 模块包含 @app/modules/gridster/angular-grid/angulargridComponent

• analytics 模块包含 @app/modules/analytics/components/analytics-one/AnalyticsOneComponent

注意： 我的gridster 模块已经通过导入使用analytics 模块。

由于路径和父子嵌套不同，当我尝试访问 analytics 模块内的 angulargridComponent 时遇到上述问题。

之前我的分析路由是：

{ path: 'gross-profit', component: angulargridComponent}

我没有使用导入，而是改成这个并且它起作用了：

{ path: 'gross-profit', loadChildren: '@app/modules/gridster/gridster.module#angulargridModule' }

其中angulargridModule是gridster模块内的模块类名，它只包含一个组件，即angulargridComponent