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

que es un componente en angular

Question

Estoy construyendo una aplicación angular 4. Recibo el error Component HomeComponent no forma parte de ningún NgModule o el módulo no se ha importado a su módulo. He creado HomeModule y HomeComponent. ¿Cuál necesito para referirme en el Módulo de Aplicación? Estoy un poco confundido. ¿Necesito referir HomeModule o HomeComponent? En última instancia, lo que busco es que cuando el usuario haga clic en el menú Inicio, se lo debe dirigir a home.component.html, que se procesará en la 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 { }

InicioComponente

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

}

Answer 1

En mi caso, Angular 6, renombré los nombres de carpetas y archivos de mis módulos de google.map.module.ts a google-map.module.ts. Para compilar sin superposición con los antiguos módulos y nombres de componentes, compile ng sin ningún error.

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

Answer 2

En mi caso, las importaciones de rutas reales en app.component.spec.ts causaban estos mensajes de error. La solución fue importar RouterTestingModule en RouterTestingModule lugar.

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

});

Answer 3

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

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

Answer 4

Me encontré con este mismo problema y nada de lo que estaba viendo aquí estaba funcionando. Si está enumerando su componente en el problema app-routing.module, es posible que tenga el mismo problema que estaba teniendo.

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 pretendo entender exactamente por qué este es el caso, pero cuando use la indexación para exportar componentes (y asumirí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.

Answer 5

Si no está utilizando la carga diferida, debe importar su HomeComponent en app.module y mencionarlo en las declaraciones. Además, no olvides 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 { }

Answer 6

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