구성 요소가 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: [
    ....

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

지연 로딩 및 함수 양식 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로 가져 오거나 지연되지 않고 이미 부모 모듈에서 가져온 다른 기능 모듈에서 가져 왔는지 여부에 관계없이 전달됩니다.

각도 지연 로딩

제 경우에는 routing.ts에서 이미 가져온 하위 모듈의 일부인 구성 요소를 잊어 버렸고 다시 가져 왔습니다.

....
...
 {
path: "clients",
component: ClientsComponent,
loadChildren: () =>
  import(`./components/users/users.module`).then(m => m.UsersModule)
}
.....
..

나는이 같은 문제에 부딪 쳤고 여기서 보았던 것 중 아무것도 작동하지 않았습니다. 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 { }

나는 이것이 왜 그런지 정확히 이해한다고 주장하지 않을 것이지만, 인덱싱을 사용하여 구성 요소를 내보낼 때 (서비스 등에 대해서도 동일하다고 가정) 별도의 모듈에서 동일한 구성 요소를 참조 할 때 해당 구성 요소를 이 문제를 방지하기 위해 동일한 파일 (이 경우 색인).

필자의 경우 Angular 6에서는 모듈의 폴더 및 파일 이름을 google.map.module.ts에서 google-map.module.ts로 변경했습니다. 이전 모듈 및 구성 요소 이름을 오버레이하지 않고 컴파일하려면 ng 컴파일러가 오류없이 컴파일되었습니다.

app.routes.ts에서 :

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

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

google-map.module.ts에서 :

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

나는 같은 문제에 부딪쳤다. 다른 폴더에 같은 이름으로 다른 구성 요소를 만들었습니다. 그래서 내 앱 모듈에서 두 구성 요소를 모두 가져와야했지만 트릭이 있습니다.

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

그런 다음 선언에서 AdminDuplicateComponent를 대신 추가 할 수 있습니다.

나중에 참고할 수 있도록 남겨 두겠다고 생각했습니다.

Lazy 모듈을 확인하십시오. lazy 모듈에서 AppRoutingModule을 가져 왔습니다. AppRoutingModule의 가져 오기 및 가져 오기를 제거한 후 Mine이 작동하기 시작했습니다.

import { AppRoutingModule } from '../app-routing.module'; 

필자의 경우 구성 요소 UserComponent를 한 모듈 appModule에서 다른 모듈 로 이동하고 AppRoutingModule 파일 dashboardModule의 이전 모듈 라우팅에서 경로 정의를 제거하는 것을 잊었습니다 appModule.

const routes = [
 { path: 'user', component: UserComponent, canActivate: [AuthGuard]},...]

경로 정의를 제거한 후 제대로 작동했습니다.

지연로드를 사용하는 경우 app-routing.module.ts {path : 'home', loadChildren : './ home.module # HomeModule'}과 같이 라우터 모듈에서 해당 모듈을로드해야합니다.

제 경우는 언급 한 @ 7guyo와 동일합니다. 나는 lazyloading을 사용하고 있으며이 작업을 부조리하게 수행했습니다.

import { component1Route } from './path/component1.route';

export const entityState: Routes = [
{
   path: 'home',
   children: component1Route
}]

대신에:

@NgModule({
imports: [
   RouterModule.forChild([
   {
     path: '',
     loadChildren: () => import('./component1/component1.module').then(m => m.ComponentOneModule)
  },
  {
    path: '',
    loadChildren: () => import('./component2/component2.module').then(m => m.ComponentTwoModule)
  }])
  ]})

  export class MainModule {}

이 문제는 간단한 두 단계로 해결할 수 있습니다.

componnet (HomeComponent)를 declarations배열 entryComponents배열에 추가하십시오 .

이 구성 요소는 throw 선택기 또는 라우터에 액세스하지 않으므로 entryComponnets 배열에 추가하는 것이 중요합니다.

방법보기 :

@NgModule({
  declarations: [
    AppComponent,
    ....
    HomeComponent
  ],
  imports: [
    BrowserModule,
    HttpModule,
    ...

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

지연로드를 사용하는 경우 앱 모듈에서 구성 요소의 모듈과 라우팅 모듈을 삭제해야합니다. 그렇지 않으면 앱이 시작될 때로드하려고 시도하고 해당 오류를 발생시킵니다.

@NgModule({
   declarations: [
      AppComponent
   ],
   imports: [
      BrowserModule,
      FormsModule,
      HttpClientModule,
      AppRoutingModule,
      // YourComponentModule,
      // YourComponentRoutingModule
   ],
   bootstrap: [
      AppComponent
   ]
})
export class AppModule { }

제 경우에는 모듈 (DemoModule)을 가져온 라우팅 모듈 (DemoRoutingModule)을 가져 오는 대신 모듈 위치에서 잘못 가져 왔습니다.

잘못된 가져 오기 :

const routes: Routes = [
  {
  path: '', component: ContentComponent,
  children: [
  { path: '', redirectTo: 'demo' },
  { path: 'demo', loadChildren : () => import('../content/demo/demo-routing.module').then(m => m.DemoRoutingModule)}]
  }
];

올바른 코드

const routes: Routes = [
  {
  path: '', component: ContentComponent,
  children: [
  { path: '', redirectTo: 'demo' },
  { path: 'demo', loadChildren : () => import('../content/demo/demo.module').then(m => m.DemoModule)}]
  }
];

구성 요소가 app-routing.module.ts에서 제대로 가져 왔는지 확인합니다. 제 경우에는 그게 이유였습니다

전제 조건 : 1. 여러 모듈이있는 경우 2. 그리고 다른 모듈 (예 : AModule)의 구성 요소 (예 : DemoComponent)를 다른 모듈 (예 : BModule)에서 사용하고 있습니다.

그러면 AModule은

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

BModule은

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

어떤 경우에는 HomeComponent에 대한 모듈을 생성하고 app-routing.module에서 두 가지 모두를 직접 제공했을 때 동일한 일이 발생할 수 있습니다.

component : Routes 배열의 HomeComponent, loadChildren : "./ modules /.../ HomeModule.module # HomeModule" .

지연로드를 시도 할 때 loadChildren 속성 만 제공합니다.

두 개의 다른 모듈에 동일한 이름의 구성 요소가 있기 때문에이 오류가 발생했습니다. 한 가지 해결책은 공유가 내보내기 기술 등을 사용하는 경우이지만 제 경우에는 둘 다 이름이 동일해야하지만 목적이 달랐습니다.

진짜 문제

따라서 구성 요소 B를 가져 오는 동안 intellisense가 Component A의 경로를 가져 왔으므로 intellisense에서 구성 요소 경로의 두 번째 옵션을 선택해야했고 내 문제가 해결되었습니다.