![](/img/trans.png)
[英]Angular; Error: Component NewPharmacyComponent is not part of any NgModule or the module has not been imported into your module
[英]How to solve error Component is not part of any NgModule or not imported correctly in angular 6?
这是我得到的错误:-
<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 { }
延迟加载模块无法访问从 AppModule 声明的组件(这是为了保护延迟加载模块的封装不受外部组件依赖项的影响)。
要从延迟加载的模块访问EWDashboardComponent
,您需要:
- 从延迟加载的模块中声明组件
- 在小部件模块中声明该组件,然后由您的延迟加载模块导入该组件(确保该组件也被导出 - 这意味着它也在导出数组中)
如果EWDashboardComponent
是共享组件,我推荐选项 2,因为它遵循 Angular 的模块类型指南: https : //angular.io/guide/module-types (请参阅小部件模块部分)。
我有一个具有以下结构的项目:
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
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.