Я получаю сообщение об ошибке: -
<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 { }
@pixelbits: Декларация EWDashbardComponent, похоже, присутствует в app.module.ts.
ох ... тогда я думаю, вы пытаетесь получить к нему доступ из ленивого загруженного модуля. Добавьте его в массив объявлений ленивых загруженных модулей вместо AppModule
Также эта ошибка возникает, когда я нажимаю кнопку ленивого модуля



![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)


Компоненты, объявленные из 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 (см. Раздел о модулях виджетов).
Это означает, что где-то в модуле настройки есть ссылка на EWDashboardComponent, возможно, в одном из шаблонов его компонентов, но EWDashboardComponent не объявлен и не импортирован в модуль настройки.
Правильно, решить должно быть просто. Просто добавьте компонент в нужное место.
@pixelbits, если я определяю EWDashboardComponent внутри моего ленивого загруженного модуля, я получил ошибку определения компонента в двух модулях module.app и настройке, одна вещь, которую я хочу сказать, что я использую компонент настройки, определенный в ленивом загружаемом модуле, чтобы быть родителями, который расширен другими компонентами в том же ленивом модуле (Setup Module).
Вы должны объявить компонент в одном модуле и импортировать модуль во все места, где вы хотите использовать компонент.
Я решил ошибку, ошибка связана с тем, что компоненты в моем ленивом загруженном модуле не были определены должным образом. спасибо, ребята, за вашу помощь.
Это было так забавно, что я искал решения в течение нескольких минут. Я просто забыл объявить компонент. Спасибо за это хаха
У меня есть проект следующей структуры:
Модуль gridster содержит @app/modules/gridster/angular-grid/angulargridComponent
Модуль analytics содержит @app/modules/analytics/components/analytics-one/AnalyticsOneComponent
Примечание: Где мой модуль gridster уже использует модуль analytics, импортировав его.
У меня возникла вышеуказанная проблема, когда я попытался получить доступ к angulargridComponent внутри модуля analytics из-за различного пути и вложенности родитель-потомок.
Ранее моя маршрутизация аналитики была:
{ path: 'gross-profit', component: angulargridComponent}
Вместо импортированного использования я перешел на это, и это сработало:
{ path: 'gross-profit', loadChildren: '@app/modules/gridster/gridster.module#angulargridModule' }
Где angulargridModule - это имя класса модуля внутри модуля gridster, и он содержит только один компонент, то есть angulargridComponent.
Вы забыли добавить EWDashbardComponent в массив объявлений NgModule. Попробуйте добавить его в AppModule