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

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

저는 각진 4개의 애플리케이션을 구축하고 있습니다.오류가 발생하고 있습니다.

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

Home Module과 Home Component를 만들었습니다.앱 모듈을 참조하려면 어떤 것이 필요합니까?저는 조금 혼란스럽습니다.홈 모듈 또는 홈 구성 요소를 참조해야 합니까?궁극적으로 제가 찾고 있는 것은 사용자가 홈 메뉴를 클릭하면 인덱스 페이지에 렌더링될 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 { }

홈 모듈:

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

홈 구성 요소:

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로 가져와 선언문 아래에 언급해야 합니다.또한, 수입품에서 제거하는 것을 잊지 마세요.

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

시작하면 즉 제경우, (우, 사중인용하다작시를즉경우▁in)를 사용하는 경우입니다.ng serve).

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

경우에는 인 저의경생구성요없다습니소가성된우에서 되었습니다.declarationsapp.module.ts:

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

저도 같은 문제가 있었습니다.그 이유는 서버가 실행 중인 상태에서 구성요소를 생성했기 때문입니다.해결책은 서버를 종료하고 ng serve를 다시 하는 것입니다.

laid loading 및 function form import 문을 사용하는 경우 일반적인 원인은 페이지 모듈 대신 라우팅 모듈을 가져오는 것입니다.그래서:

올바르지 않음:

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

정답:

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

당신은 이것을 잠시 모면할 수도 있지만, 결국 문제를 일으킬 것입니다.

저는 Angular 7에서 로딩이 느려서 이 에러 메시지를 두 번이나 마주쳤는데 위의 것들은 도움이 되지 않았습니다.아래의 두 가지 기능이 모두 작동하려면 서비스를 중지하고 다시 시작해야 완전히 업데이트할 수 있습니다.

처음에는 앱 모듈을 로드가 느린 기능 모듈로 잘못 가져왔습니다.laid loaded 모듈에서 이 가져오기를 제거했고 다시 작동하기 시작했습니다.

두 번째에는 AppModule로 가져오던 별도의 CoreModule과 #1과 동일한 Loaded 모듈이 있었습니다.laid loaded 모듈에서 이 가져오기를 제거했고 다시 작동하기 시작했습니다.

기본적으로 가져오기 계층을 확인하고 가져오기 순서에 주의를 기울입니다(필요한 위치에서 가져오기되는 경우).로드가 느린 모듈에는 자체 경로 구성 요소/의존성만 필요합니다.App 및 부모 종속성은 AppModule로 가져오거나 느리지 않고 로드되어 부모 모듈에 이미 가져온 다른 기능 모듈에서 가져오더라도 전달됩니다.

내 경우에는 실제 경로의 수입.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();
  }));

});

각도가 느린 하중

저의 경우 routing.ts에서 이미 가져온 자식 모듈의 일부인 구성 요소를 잊어버리고 다시 가져왔습니다.

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

저는 같은 문제에 부딪혔지만 여기서 본 것들 중 아무 것도 작동하지 않았습니다.만약 당신이 app-routing.module 이슈에 당신의 구성요소를 나열한다면, 당신은 내가 가지고 있던 것과 같은 문제에 부딪혔을 것입니다.

app.s.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 { }

홈/인덱스

export * from './';

app-vlan.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 { }

가정/가정

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

정확한 이유를 이해한다고는 할 수 없지만 인덱싱을 사용하여 구성 요소를 내보낼 때(서비스 등에 대해서도 동일하다고 가정함) 별도의 모듈에서 동일한 구성 요소를 참조할 때는 이 문제를 방지하기 위해 동일한 파일(이 경우 인덱스)에서 해당 구성 요소를 가져와야 합니다.

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

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

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를 대신 추가할 수 있습니다.

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

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

을 (는 (HomeComponent) 입니다.declarations 배entryComponentsvmdk

이 구성 요소는 스로우 선택기나 라우터에 액세스할 수 없기 때문에 엔트리에 이를 추가하는 것이 중요합니다.

방법 보기:

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

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

제 경우에는 부품을 옮기고 있었습니다.UserComponent appModule 곳으로dashboardModule 이전 .appModuleAppRouting Module 파일입니다.

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

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

두 개의 모듈에 동일한 구성 요소 이름이 있어서 이 오류가 발생했습니다.한 가지 해결책은 수출 기술 등을 공유하여 사용하는 경우인데, 저의 경우 둘 다 이름이 같아야 하는데 목적이 달랐습니다.

리얼 이슈

그래서 컴포넌트 B를 가져오는 동안 인텔리센스가 컴포넌트 A의 경로를 가져왔고, 그래서 나는 컴포넌트 경로의 두 번째 옵션을 인텔리센스에서 선택해야 했고, 그것이 나의 문제를 해결했습니다.

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

제 경우는 @7guyo가 언급한 것과 같습니다.나는 게으른 로딩을 사용하고 있고 무의식적으로 이것을 하고 있었습니다.

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

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

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

제 경우 잘못 가져왔습니다. 모듈(DemoModule)을(를) 가져온 라우팅 모듈(DemoRoutingModule)을(를) 가져오는 대신 In module place를(를) 가져왔습니다.

잘못된 가져오기:

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에서 제대로 가져왔는지 확인합니다.나의 경우에는 그것이 이유였습니다.

경우에 따라 HomeComponent와 app-routing.module에 대한 모듈을 직접 만들었을 때 동일한 현상이 발생할 수 있습니다.

구성 요소: HomeComponent, loadChildren:"./modules/.../HomeModule.module#경로 배열에 "홈 모듈"이 있습니다.

loadChildren 속성만 제공합니다.

필수 조건: 1.모듈 2가 여러 개인 경우.또한 다른 모듈(A 모듈)의 구성 요소(DemoComponent로 가정)를 다른 모듈(B 모듈로 가정)에서 사용하고 있습니다.

그러면 당신의 A 모듈은

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

그리고 당신의 B 모듈은.

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

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