如何解决错误 Component is not part of any NgModule or imported correctly in 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 {




}

//这是我的应用-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，您需要：

Declare the component from the lazy loaded module

Declare the component inside a widgets module, which is then imported by your lazy-loaded module (make sure the component is also exported - meaning its also in the exports array)

如果 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 模块中的模块 class 名称，它只包含一个组件，即 angulargridComponent

如何解决错误 Component is not part of any NgModule or imported correctly in angular 6？

How to solve error Component is not part of any NgModule or not imported correctly in angular 6?

javascript

lazy-loading

angular

angular5

angular6