El componente no es parte de ningún NgModule o el módulo no se ha importado a su módulo

Estoy construyendo una aplicación angular 4. Estoy recibiendo un error

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

He creado HomeModule y HomeComponent. ¿Cuál necesito para referirme al AppModule? Estoy un poco confundido. ¿Necesito recomendar HomeModule o HomeComponent? En última instancia, lo que estoy buscando es cuando el usuario hace clic en el menú Inicio, debe ser dirigido al home.component.html que se mostrará en la página de índice.

El módulo de aplicación 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';

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

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

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

HomeModule es:

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 es:

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

}

Si no está utilizando la carga diferida, debe importar su HomeComponent en app.module y mencionarlo en declaraciones. Además, no olvide eliminar de las importaciones

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

En mi caso, solo necesito reiniciar el servidor (es decir, si lo estás usando ng serve).

Me pasa cada vez que agrego un nuevo módulo mientras el servidor está funcionando.

En mi caso, me faltaba mi nuevo componente generado en el declarationsat app.module.ts:

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

Yo tuve el mismo problema. La razón fue porque creé un componente mientras mi servidor aún estaba funcionando. La solución es salir del servidor y volver a servir.

La causa habitual SI está utilizando la carga diferida y las declaraciones de importación de formularios de función es importar el módulo de enrutamiento en lugar del módulo de página . Entonces:

Incorrecto :

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

Correcto :

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

Es posible que se salga con la suya por un tiempo, pero eventualmente causará problemas.

En mi caso las importaciones de rutas reales en app.component.spec.tsestaban causando estos mensajes de error. La solución fue importar en su RouterTestingModulelugar.

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

});

Me encontré con este mensaje de error en 2 ocasiones distintas, con carga diferida en Angular 7 y lo anterior no ayudó. Para que ambos de los siguientes funcionen, DEBE detener y reiniciar el servicio para que se actualice completamente correctamente.

1) La primera vez que de alguna manera importé incorrectamente mi AppModule en el módulo de funciones de carga diferida. Eliminé esta importación del módulo de carga diferida y comenzó a funcionar nuevamente.

2) La segunda vez tuve un CoreModule separado que estaba importando en el AppModule Y el mismo módulo de carga diferida que el # 1. Eliminé esta importación del módulo de carga diferida y comenzó a funcionar nuevamente.

Básicamente, verifique su jerarquía de importaciones y preste mucha atención al orden de las importaciones (si se importan donde deberían estar). Los módulos de carga diferida solo necesitan sus propios componentes / dependencias de ruta. Las dependencias de aplicaciones y padres se transmitirán ya sea que se importen a AppModule o se importen desde otro módulo de funciones que NO esté cargado de forma diferida y ya se haya importado en un módulo principal.

Carga diferida angular

En mi caso, olvidé y reimporté un componente que ya es parte del módulo hijo importado en routing.ts.

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

Me encontré con el mismo problema y nada de lo que estaba viendo aquí funcionaba. Si está enumerando su componente en el problema app-routing.module, es posible que se haya encontrado con el mismo problema que yo tenía.

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

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

No pretenderé entender exactamente por qué este es el caso, pero al usar la indexación para exportar componentes (y supondría lo mismo para los servicios, etc.), al hacer referencia al mismo componente en módulos separados, debe importarlos desde el mismo archivo, en este caso el índice, para evitar este problema.

En mi caso, Angular 6, cambié el nombre de las carpetas y archivos de mis módulos de google.map.module.ts a google-map.module.ts. Para compilar sin superposición con los nombres de módulos y componentes antiguos, el compilador ng se compiló sin errores.

En app.routes.ts:

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

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

En google-map.module.ts:

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

Me encontré con el mismo problema. Había creado otro componente con el mismo nombre en una carpeta diferente. así que en mi módulo de aplicación tuve que importar ambos componentes pero con un truco

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

Luego, en declaraciones, podría agregar AdminDuplicateComponent en su lugar.

Solo pensé que lo dejaría allí para referencia futura.

Verifique su módulo Lazy, he importado AppRoutingModule en el módulo Lazy. Después de eliminar la importación y las importaciones de AppRoutingModule, Mine comenzó a funcionar.

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

En mi caso, estaba moviendo el componente UserComponentde un módulo appModulea otro dashboardModuley olvidé eliminar la definición de ruta del enrutamiento del módulo anterior appModuleen el archivo AppRoutingModule.

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

Después de eliminar la definición de ruta, funcionó bien.

si está utilizando la carga diferida, debe cargar ese módulo en cualquier módulo de enrutador, como en app-routing.module.ts {ruta: 'home', loadChildren: './ home.module # HomeModule'}

Mi caso es el mismo que mencionó @ 7guyo. Estoy usando lazyloading y estaba haciendo esto inconscientemente:

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

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

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

Puede solucionar esto con dos simples pasos:

Agregue su componnet (HomeComponent) a declarationsarray entryComponentsarray.

Como este componente no accede ni al selector de lanzamiento ni al enrutador, es importante agregarlo a la matriz de entryComponnets

ver cómo hacer:

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

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

Cuando usa la carga diferida, debe eliminar el módulo de su componente y el módulo de enrutamiento del módulo de la aplicación. Si no lo hace, intentará cargarlos cuando se inicie la aplicación y arrojará ese error.

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

En mi caso, importé mal, en el lugar del módulo en lugar de importar el módulo (DemoModule) el módulo de enrutamiento importado (DemoRoutingModule)

Importación incorrecta:

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 correcto

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

Verifique que su componente se haya importado correctamente en app-routing.module.ts. En mi caso esa fue la razón

Requisitos previos: 1. Si tiene varios módulos 2. Y está utilizando un componente (suponga DemoComponent) de un módulo diferente (suponga AModule), en un módulo diferente (suponga BModule)

Entonces tu AModule debería ser

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

y su BModule debe ser

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

En algunos casos, puede suceder lo mismo cuando ha creado un módulo para HomeComponent y en el módulo de enrutamiento de la aplicación le dio directamente ambos

componente: HomeComponent, loadChildren: "./ modules /.../ HomeModule.module # HomeModule" en la matriz de rutas.

cuando intentamos la carga diferida, solo damos el atributo loadChildren.

Recibí este error porque tenía el mismo nombre de componente en 2 módulos diferentes. Una solución es si se comparte el uso de la técnica de exportación, etc., pero en mi caso, ambos debían tener el mismo nombre, pero el propósito era diferente.

El problema real

Entonces, al importar el componente B, intellisense importó la ruta del Componente A, así que tuve que elegir la segunda opción de la ruta del componente de intellisense y eso resolvió mi problema.