O componente não faz parte de nenhum NgModule ou o módulo não foi importado para o seu módulo

Estou construindo um aplicativo angular 4. Estou recebendo um erro

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

Eu criei HomeModule e HomeComponent. Qual deles eu preciso consultar para o AppModule? Eu estou um pouco confuso. Eu preciso referir o HomeModule ou o HomeComponent? Em última análise, o que estou procurando é quando o usuário clica no menu inicial, ele deve ser direcionado para o home.component.html que será processado na página de índice.

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

}

Se você não estiver usando o carregamento lento, será necessário importar seu HomeComponent em app.module e mencioná-lo nas declarações. Além disso, não se esqueça de remover das importações

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

No meu caso, só preciso reiniciar o servidor (isto é, se você estiver usando ng serve).

Isso acontece comigo sempre que adiciono um novo módulo enquanto o servidor está em execução.

No meu caso, estava faltando meu novo componente gerado no declarationsem app.module.ts:

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

Eu tive o mesmo problema. O motivo foi porque criei um componente enquanto meu servidor ainda estava em execução. A solução é sair do servidor e voltar a servir.

A causa comum SE você estiver usando carregamento lento e instruções de importação de formulário de função é importar o módulo de roteamento em vez do módulo de página . Assim:

Incorreto :

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

Correto :

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

Você pode se safar por um tempo, mas eventualmente causará problemas.

Encontrei essa mensagem de erro em 2 ocasiões diferentes, com carregamento lento no Angular 7 e o procedimento acima não ajudou. Para que ambos os itens abaixo funcionem, você DEVE parar e reiniciar o servidor para que ele seja completamente atualizado corretamente.

1) Primeira vez que importei incorretamente meu AppModule para o módulo de recurso carregado lentamente. Removi esta importação do módulo de carregamento lento e ele começou a funcionar novamente.

2) Na segunda vez, tive um CoreModule separado que estava importando para o AppModule E o mesmo módulo de carregamento lento do # 1. Removi esta importação do módulo de carregamento lento e ele começou a funcionar novamente.

Basicamente, verifique sua hierarquia de importações e preste muita atenção na ordem das importações (se são importadas onde deveriam estar). Módulos com carregamento lento precisam apenas de seus próprios componentes / dependências de rota. As dependências do aplicativo e do pai serão transmitidas independentemente de serem importadas para o AppModule ou importadas de outro módulo de recurso que NÃO seja carregado lentamente e já importado em um módulo pai.

No meu caso, as importações de rotas reais app.component.spec.tsestavam causando essas mensagens de erro. A solução foi importar em RouterTestingModulevez disso.

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();
  }));

});

Carregamento lento angular

No meu caso, esqueci e reimportei um componente que já faz parte do módulo filho importado em routing.ts.

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

Eu encontrei o mesmo problema e nada do que eu estava vendo aqui estava funcionando. Se você está listando seu componente no problema app-routing.module, você pode ter encontrado o mesmo problema que eu.

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

Não pretendo entender exatamente por que esse é o caso, mas ao usar indexação para exportar componentes (e eu assumiria o mesmo para serviços, etc.), ao fazer referência ao mesmo componente em módulos separados, você precisa importá-los do mesmo arquivo, neste caso o índice, para evitar esse problema.

No meu caso, Angular 6, renomeei os nomes das pastas e arquivos dos meus módulos de google.map.module.ts para google-map.module.ts. Para compilar sem sobreposição com nomes de módulos e componentes antigos, ng compilador compilado sem erros.

Em app.routes.ts:

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

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

Em google-map.module.ts:

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

Eu tive o mesmo problema. Criei outro componente com o mesmo nome em uma pasta diferente. então, no meu módulo de app, tive que importar os dois componentes, mas com um truque

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

Então, nas declarações, eu poderia adicionar AdminDuplicateComponent.

Pensei apenas em deixar isso lá para referência futura.

Verifique seu módulo Lazy, importei o AppRoutingModule para o módulo lazy. Depois de remover a importação e importações de AppRoutingModule, o Mine começou a funcionar.

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

No meu caso, eu estava movendo o componente UserComponentde um módulo appModulepara outro dashboardModulee esqueci de remover a definição de rota do roteamento do módulo anterior appModuleno arquivo AppRoutingModule.

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

Depois de remover a definição de rota, funcionou bem.

se você estiver usando o carregamento lento, deve carregar esse módulo em qualquer módulo do roteador, como em app-routing.module.ts {path: 'home', loadChildren: './ home.module # HomeModule'}

Meu caso é o mesmo que @ 7guyo mencionou. Estou usando lazyloading e estava inconscientemente fazendo isso:

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

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

Ao invés de:

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

Você pode corrigir isso por meio de duas etapas simples:

Adicione seu componnet (HomeComponent) ao declarationsarray entryComponentsarray.

Como esse componente não acessa nem o seletor de lançamento nem o roteador, adicioná-lo ao array entryComponnets é importante

veja como fazer:

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

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

Ao usar o carregamento lento, você precisa excluir o módulo do seu componente e o módulo de roteamento do módulo do app. Caso contrário, ele tentará carregá-los quando o aplicativo for iniciado e exibirá o erro.

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

No meu caso, importei errado, no lugar do módulo em vez de importar o módulo (DemoModule), o módulo de roteamento importado (DemoRoutingModule)

Importação errada:

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

Código Certo

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

Verifique se o seu componente foi importado corretamente em app-routing.module.ts. No meu caso, esse foi o motivo

Pré-requisitos: 1. Se você tem vários Módulos 2. E você está usando um componente (suponha que DemoComponent) de um módulo diferente (suponha AModule), em um módulo diferente (suponha BModule)

Então seu AModule deve ser

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

e seu BModule deve ser

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

Em alguns casos, o mesmo pode acontecer quando você cria um módulo para HomeComponent e em app-routing.module você fornece ambos diretamente

componente: HomeComponent, loadChildren: "./ modules /.../ HomeModule.module # HomeModule" no array Routes.

quando tentamos o carregamento lento, fornecemos apenas o atributo loadChildren.

Recebi este erro porque tinha o mesmo nome de componente em 2 módulos diferentes. Uma solução é se for compartilhado usar a técnica de exportação etc, mas no meu caso ambos tiveram que ter o mesmo nome, mas o propósito era diferente.

A verdadeira questão

Então, enquanto importava o componente B, o intellisense importou o caminho do Componente A então eu tive que escolher a 2ª opção do caminho do componente do intellisense e isso resolveu meu problema.