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

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

---

각도 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: [
    ....

---

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

---

제 경우에는 실제 경로를 가져 오면 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로 가져 오거나 지연되지 않고 이미 부모 모듈에서 가져온 다른 기능 모듈에서 가져 왔는지 여부에 관계없이 전달됩니다.

---

나는이 같은 문제에 부딪 쳤고 여기서 보았던 것 중 아무것도 작동하지 않았습니다. app-routing.module 문제에 구성 요소를 나열하는 경우 내가 겪었던 것과 동일한 문제가 발생할 수 있습니다.

app.module.ts

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

home / index.ts

export * from './';

app-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './components';

const routes: Routes = [
    { path: 'app/home', component: HomeComponent },
    { path: '', redirectTo: 'app/home', pathMatch: 'full' },
    { path: '**', redirectTo: 'app/home' }
];

@NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule]
})
export class AppRoutingModule { }

home/home.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
// import { HomeComponent } from './home.component'; This would cause app to break
import { HomeComponent } from './';
@NgModule({
  imports: [
    CommonModule
  ],
  exports: [HomeComponent],
  declarations: [HomeComponent]
})
export class HomeModule { }

I won't claim to understand exactly why this is the case, but when using indexing to export components (and I would assume the same for services, etc.), when referencing the same component in separate modules you need to import them from the same file, in this case the index, in order to avoid this issue.

---

In my case, Angular 6, I renamed folder and file names of my modules from google.map.module.ts to google-map.module.ts. In order to compile without overlay with old module and component names, ng compiler compiled with no error.

In app.routes.ts:

     {
        path: 'calendar', 
        loadChildren: './views/app-calendar/app-calendar.module#AppCalendarModule', 
        data: { title: 'Calendar', breadcrumb: 'CALENDAR'}
      },

In google-map.routing.ts

import { GoogleMapComponent } from './google-map.component';
const routes: Routes = [
  {
    path: '', component: GoogleMapComponent, data: { title: 'Coupon Map' }
  }
];
@NgModule({
    exports: [RouterModule],
    imports: [RouterModule.forChild(routes)]
})
export class GoogleMapRoutingModule { }

In google-map.module.ts:

import { GoogleMapRoutingModule } from './google-map.routing';
@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    CommonModule,
    GoogleMapRoutingModule,
  ],
  exports: [GoogleMapComponent],
  declarations: [GoogleMapComponent]
})
export class GoogleMapModule { }

---

I ran into the same issue. I had created another component with the same name under a different folder. so in my app module I had to import both components but with a trick

import {DuplicateComponent as AdminDuplicateComponent} from '/the/path/to/the/component';

Then in declarations I could add AdminDuplicateComponent instead.

Just thought that I would leave that there for future reference.

ReferenceURL : https://stackoverflow.com/questions/44827999/component-is-not-part-of-any-ngmodule-or-the-module-has-not-been-imported-into-y