Komponent nie jest częścią żadnego NgModule lub moduł nie został zaimportowany do Twojego modułu

Buduję aplikację kątową 4. Otrzymuję błąd

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

Stworzyłem HomeModule i HomeComponent. Którego muszę odwołać się do AppModule? Jestem trochę zmieszany. Czy muszę polecić HomeModule lub HomeComponent? Ostatecznie to, czego szukam, to kiedy użytkownik kliknie menu główne, powinien zostać skierowany do home.component.html, który zostanie wyrenderowany na stronie indeksu.

App.module to:

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

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

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

}

Jeśli nie używasz leniwego ładowania, musisz zaimportować swój HomeComponent do app.module i wspomnieć o nim w deklaracjach. Nie zapomnij też usunąć z importu

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

W moim przypadku muszę tylko zrestartować serwer (to znaczy, jeśli używasz ng serve ).

Zdarza mi się to za każdym razem, gdy dodam nowy moduł podczas pracy serwera.

W moim przypadku brakowało mojego nowego wygenerowanego komponentu w declarationsat app.module.ts:

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

Miałem ten sam problem. Powodem było to, że utworzyłem komponent, gdy mój serwer jeszcze działał. Rozwiązaniem jest wyjście z serwera i ponowne udostępnienie.

Typową przyczyną, JEŻELI używasz leniwego ładowania i importu formularzy funkcji, jest importowanie modułu routingu zamiast modułu strony . Więc:

Niepoprawnie :

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

Poprawnie :

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

Może ci się to udać przez jakiś czas, ale w końcu spowoduje to problemy.

W moim przypadku app.component.spec.tste komunikaty o błędach powodowały importowanie rzeczywistych tras . Rozwiązaniem był import 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();
  }));

});

Napotkałem ten komunikat o błędzie przy 2 różnych okazjach, z leniwym ładowaniem w Angular 7 i powyższe nie pomogło. Aby oba poniższe rozwiązania działały, MUSISZ zatrzymać i ponownie uruchomić ng, aby całkowicie zaktualizował się poprawnie.

1) Pierwszy raz w jakiś sposób niepoprawnie zaimportowałem mój AppModule do leniwego załadowanego modułu funkcji. Usunąłem ten import z leniwie ładowanego modułu i ponownie zaczął działać.

2) Za drugim razem miałem oddzielny moduł CoreModule, który importowałem do AppModule ORAZ ten sam leniwie ładowany moduł co # 1. Usunąłem ten import z leniwie ładowanego modułu i ponownie zaczął działać.

Zasadniczo sprawdź swoją hierarchię importów i zwróć szczególną uwagę na kolejność importów (jeśli są importowane tam, gdzie powinny). Leniwie ładowane moduły potrzebują tylko własnego komponentu / zależności trasy. Zależności aplikacji i nadrzędnych zostaną przekazane niezależnie od tego, czy zostaną zaimportowane do AppModule, czy zaimportowane z innego modułu funkcji, który NIE jest załadowany z opóźnieniem i już zaimportowany w module nadrzędnym.

Napotkałem ten sam problem i nic z tego, co tu widziałem, nie działało. Jeśli wymieniasz swój komponent w problemie app-routing.module, być może napotkasz ten sam problem, co ja.

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

Nie twierdzę, że rozumiem dokładnie, dlaczego tak jest, ale używając indeksowania do eksportowania komponentów (i zakładałbym to samo dla usług itp.), Kiedy odwołuje się do tego samego komponentu w oddzielnych modułach, musisz je zaimportować z ten sam plik, w tym przypadku indeks, aby uniknąć tego problemu.

Kątowe leniwe ładowanie

W moim przypadku zapomniałem i ponownie zaimportowałem komponent, który jest już częścią zaimportowanego modułu potomnego w routing.ts.

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

W moim przypadku, Angular 6, zmieniłem nazwy folderów i plików moich modułów z google.map.module.ts na google-map.module.ts. Aby skompilować bez nakładek ze starymi nazwami modułów i komponentów, kompilator ng został skompilowany bez błędów.

W app.routes.ts:

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

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

W google-map.module.ts:

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

Napotkałem ten sam problem. Utworzyłem inny komponent o tej samej nazwie w innym folderze. więc w moim module aplikacji musiałem zaimportować oba komponenty, ale ze sztuczką

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

Następnie w deklaracjach mógłbym zamiast tego dodać AdminDuplicateComponent.

Pomyślałem, że zostawię to na przyszłość.

Sprawdź swój moduł Lazy, zaimportowałem AppRoutingModule w module Lazy. Po usunięciu importu i importu AppRoutingModule, Mine zaczął działać.

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

W moim przypadku przenosiłem komponent UserComponentz jednego modułu appModuledo drugiego dashboardModulei zapomniałem usunąć definicję trasy z routingu poprzedniego modułu appModulew pliku AppRoutingModule.

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

Po usunięciu definicji trasy działało dobrze.

jeśli używasz leniwego ładowania, musisz załadować ten moduł w dowolnym module routera, na przykład w app-routing.module.ts {ścieżka: 'home', loadChildren: './ home.module # HomeModule'}

Mój przypadek jest taki sam jak wspomniany @ 7guyo. Używam lazyloadingu i robiłem to bezwiednie:

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

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

Zamiast:

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

Możesz to naprawić, wykonując dwa proste kroki:

Dodaj swój komponent (HomeComponent) do declarationstablicy entryComponentstablicowej.

Ponieważ ten komponent nie ma dostępu ani do selektora rzutów, ani do routera, dodanie go do tablicy entryComponnets jest ważne

zobacz, jak to zrobić:

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

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

W przypadku korzystania z leniwego ładowania należy usunąć moduł składnika i moduł routingu z modułu aplikacji. Jeśli tego nie zrobisz, spróbuje załadować je po uruchomieniu aplikacji i zgłosi ten błąd.

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

W moim przypadku źle zaimportowałem, w miejsce modułu zamiast importować moduł (DemoModule) zaimportowany moduł routingu (DemoRoutingModule)

Nieprawidłowy import:

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

Właściwy kod

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

Sprawdź, czy komponent jest poprawnie zaimportowany do pliku app-routing.module.ts. W moim przypadku to był powód

Wymagania wstępne: 1. Jeśli masz wiele modułów 2. I używasz komponentu (załóżmy, że DemoComponent) z innego modułu (załóżmy, że AModule), w innym module (załóżmy BModule)

Wtedy Twój AModule powinien być

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

a twój BModule powinien być

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

W niektórych przypadkach to samo może się zdarzyć, gdy utworzyłeś moduł dla HomeComponent iw module routingu aplikacji, podałeś bezpośrednio oba

komponent: HomeComponent, loadChildren: "./ modules /.../ HomeModule.module # HomeModule" w tablicy Routes.

kiedy próbujemy leniwe ładowanie, podajemy tylko atrybut loadChildren.

Otrzymałem ten błąd, ponieważ miałem tę samą nazwę komponentu w 2 różnych modułach. Jednym z rozwiązań jest wspólne wykorzystanie techniki eksportowania itp., Ale w moim przypadku oba musiały być nazwane tak samo, ale cel był inny.

Prawdziwy problem

Więc podczas importowania komponentu B, Intellisense zaimportował ścieżkę komponentu A, więc musiałem wybrać drugą opcję ścieżki komponentu z Intellisense i to rozwiązało mój problem.