[angular] 구성 요소가 NgModule의 일부가 아니거나 모듈을 모듈로 가져 오지 않았습니다.

Program / 글쓴이

각도 4 응용 프로그램을 만들고 있습니다. 오류가 발생합니다

Error:Component HomeComponent is not part of any NgModule or the module has not been imported into your module.

HomeModule과 HomeComponent를 만들었습니다. AppModule을 참조하려면 어느 것이 필요합니까? 나는 약간 혼란 스럽습니다. HomeModule 또는 HomeComponent를 참조해야합니까? 궁극적으로 내가 찾고있는 것은 사용자가 홈 메뉴를 클릭하면 색인 페이지에 렌더링 될 home.component.html로 이동해야한다는 것입니다.

App.module은 다음과 같습니다.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http'

import { AppComponent } from './app.component';
import { NavbarComponent } from './navbar/navbar.component';
import { TopbarComponent } from './topbar/topbar.component';
import { FooterbarComponent } from './footerbar/footerbar.component';
import { MRDBGlobalConstants } from './shared/mrdb.global.constants';
import { AppRoutingModule } from './app.routing';
import { HomeModule } from './Home/home.module';

@NgModule({
  declarations: [
    AppComponent,
    FooterbarComponent,
    TopbarComponent,
    NavbarComponent

  ],
  imports: [
    BrowserModule,
    HttpModule,
    AppRoutingModule,
    HomeModule

  ],
  providers: [MRDBGlobalConstants],
  bootstrap: [AppComponent]
})
export class AppModule { }

HomeModule은 다음과 같습니다.

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { HomeComponent } from './home.component';

@NgModule({
  imports: [
    CommonModule
  ],
  exports: [HomeComponent],
  declarations: [HomeComponent]
})
export class HomeModule { }

HomeComponent는 다음과 같습니다.

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

답변

지연 로딩을 사용하지 않는 경우 app.module에서 HomeComponent를 가져 와서 선언 아래에 언급해야합니다. 또한 가져 오기에서 제거하는 것을 잊지 마십시오

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import {FormsModule} from '@angular/forms';
import {HttpModule} from '@angular/http'

import { AppComponent } from './app.component';
import { NavbarComponent } from './navbar/navbar.component';
import { TopbarComponent } from './topbar/topbar.component';
import { FooterbarComponent } from './footerbar/footerbar.component';
import { MRDBGlobalConstants } from './shared/mrdb.global.constants';
import {AppRoutingModule} from './app.routing';
import {HomeModule} from './Home/home.module';
// import HomeComponent here

@NgModule({
  declarations: [
    AppComponent,
    FooterbarComponent,
    TopbarComponent,
    NavbarComponent,
    // add HomeComponent here
  ],
  imports: [
    BrowserModule,
    HttpModule,
    AppRoutingModule,
    HomeModule  // remove this

  ],
  providers: [MRDBGlobalConstants],
  bootstrap: [AppComponent]
})
export class AppModule { }

답변

제 경우에는 서버를 다시 시작하기 만하면됩니다 (즉을 사용하는 경우 ng serve).

서버가 실행되는 동안 새 모듈을 추가 할 때마다 발생합니다.

답변

제 경우에는 declarationsat 에 새로 생성 된 구성 요소가 누락되었습니다 app.module.ts.

@NgModule({
  declarations: [
    AppComponent,
    ....
    NewGeneratedComponent, //this was missing
    ....
  ],
  imports: [
    ....

답변

나는 같은 문제가 있었다. 그 이유는 서버가 실행되는 동안 구성 요소를 만들었 기 때문입니다. 해결책은 서버를 종료하고 다시 서비스하는 것입니다.

답변

지연 로딩 및 함수 양식 import 문을 사용하는 경우 일반적인 원인 은 페이지 모듈 대신 라우팅 모듈을 가져 오는 것입니다 . 그래서:

틀림 :

loadChildren: () => import('./../home-routing.module').then(m => m.HomePageRoutingModule)

정답 :

loadChildren: () => import('./../home.module').then(m => m.HomePageModule)

잠시 동안이 문제를 피할 수 있지만 결국 문제가 발생할 것입니다.

답변

제 경우에는 실제 경로를 가져 오면 app.component.spec.ts이러한 오류 메시지가 발생했습니다. 해결책은 RouterTestingModule대신 가져 오는 것이 었습니다 .

import { TestBed, async } from '@angular/core/testing';
import { AppComponent } from './app.component';
import { RouterTestingModule } from '@angular/router/testing';

describe('AppComponent', () => {
  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [
        AppComponent
      ],
      imports: [RouterTestingModule]
    }).compileComponents();
  }));

  it('should create the app', async(() => {
    const fixture = TestBed.createComponent(AppComponent);
    console.log(fixture);
    const app = fixture.debugElement.componentInstance;
    expect(app).toBeTruthy();
  }));

});

답변

나는 Angular 7에서 지연 로딩으로 두 번의 별도의 경우 에이 오류 메시지를 만났으며 위의 내용은 도움이되지 않았습니다. 아래 두 가지가 모두 작동하려면 제대로 업데이트하려면 서비스를 중지하고 다시 시작해야합니다.

1) 처음으로 AppModule을 지연로드 기능 모듈로 잘못 가져 왔습니다. 지연로드 된 모듈에서이 가져 오기를 제거하고 다시 작동하기 시작했습니다.

2) 두 번째로 AppModule 및 # 1과 동일한 지연로드 된 모듈로 가져 오는 별도의 CoreModule이 있습니다. 지연로드 된 모듈에서이 가져 오기를 제거하고 다시 작동하기 시작했습니다.

기본적으로 수입품의 계층을 확인하고 수입품의 순서에주의를 기울이십시오 (수입해야하는 곳에 수입 한 경우). 지연로드 된 모듈은 자체 경로 구성 요소 / 종속성 만 필요합니다. 앱 및 부모 종속성은 AppModule로 가져 오거나 지연되지 않고 이미 부모 모듈에서 가져온 다른 기능 모듈에서 가져 왔는지 여부에 관계없이 전달됩니다.