Как решить ошибку. Компонент не является частью какого-либо NgModule или неправильно импортирован в 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>

Как решить ошибку. Компонент не является частью какого-либо NgModule или неправильно импортирован в angular 6?

Я хочу, чтобы мой модуль настройки загружался лениво, но при этом возникала ошибка, например, компонент не является частью модуля или модуль не был импортирован в ваш модуль.

//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 { }

Вы забыли добавить EWDashbardComponent в массив объявлений NgModule. Попробуйте добавить его в AppModule

pixelbits 04.01.2019 04:20

@pixelbits: Декларация EWDashbardComponent, похоже, присутствует в app.module.ts.

Hero Wanders 04.01.2019 04:21

ох ... тогда я думаю, вы пытаетесь получить к нему доступ из ленивого загруженного модуля. Добавьте его в массив объявлений ленивых загруженных модулей вместо AppModule

pixelbits 04.01.2019 04:22

Также эта ошибка возникает, когда я нажимаю кнопку ленивого модуля

ankit chauhan 04.01.2019 08:49
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
4
8 045
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Компоненты, объявленные из AppModule, недоступны для модулей с отложенной загрузкой (это сделано для защиты инкапсуляции модулей с отложенной загрузкой от внешних зависимостей компонентов).

Чтобы получить доступ к EWDashboardComponent из модуля с отложенной загрузкой, вам необходимо:

  1. Declare the component from the lazy loaded module
  2. 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 не объявлен и не импортирован в модуль настройки.

Hero Wanders 04.01.2019 04:37

Правильно, решить должно быть просто. Просто добавьте компонент в нужное место.

pixelbits 04.01.2019 04:38

@pixelbits, если я определяю EWDashboardComponent внутри моего ленивого загруженного модуля, я получил ошибку определения компонента в двух модулях module.app и настройке, одна вещь, которую я хочу сказать, что я использую компонент настройки, определенный в ленивом загружаемом модуле, чтобы быть родителями, который расширен другими компонентами в том же ленивом модуле (Setup Module).

ankit chauhan 04.01.2019 06:06

Вы должны объявить компонент в одном модуле и импортировать модуль во все места, где вы хотите использовать компонент.

Sachin Gupta 04.01.2019 06:31

Я решил ошибку, ошибка связана с тем, что компоненты в моем ленивом загруженном модуле не были определены должным образом. спасибо, ребята, за вашу помощь.

ankit chauhan 04.01.2019 14:01

Это было так забавно, что я искал решения в течение нескольких минут. Я просто забыл объявить компонент. Спасибо за это хаха

Char 16.10.2019 07:01

У меня есть проект следующей структуры:

  • Модуль 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.

Другие вопросы по теме