Angular 5 component is not part of any NgModule

Question

I created a new component called "player-create" and added it to the declariations in app.module. However when I try to load a page it gives the following error:

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

PlayerCreateModule.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import {PlayerCreateComponent} from './player-create.component';


@NgModule({
  imports: [
    CommonModule
  ],
  declarations: [
    PlayerCreateComponent
  ]
})
export class PlayerCreateModule { }

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { AppRoutingModule } from './app-routing.module';
import { SharedModule } from "./shared/shared.module";
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';

import { AppComponent } from './app.component';
import { ContentLayoutComponent } from "./layouts/content/content-layout.component";
import { FullLayoutComponent } from "./layouts/full/full-layout.component";

import { AuthService } from './shared/auth/auth.service';
import { AuthGuard } from './shared/auth/auth-guard.service';

import * as $ from 'jquery';
import {HomeLayoutComponent} from './layouts/home/home-layout.component';
import {PlayersLayoutComponent} from './layouts/players/players-layout.component';
import {HttpClientModule} from '@angular/common/http';
import {ModalModule} from 'ngx-bootstrap';
import { PlayerCreateComponent } from './pages/player-create/player-create.component';
import { PlayerEditComponent } from './pages/player-edit/player-edit.component';

@NgModule({
    declarations: [
        AppComponent,
        FullLayoutComponent,
        ContentLayoutComponent,
        HomeLayoutComponent,
        PlayersLayoutComponent,
        PlayerCreateComponent
    ],
    imports: [
        BrowserAnimationsModule,
        AppRoutingModule,
        SharedModule,
        HttpClientModule,
        ModalModule.forRoot(),
        NgbModule.forRoot()
    ],
    providers: [
        AuthService,
        AuthGuard
    ],
    bootstrap: [AppComponent]
})
export class AppModule { }

Answer 1

Since you declared your component in another module, you need to add PlayerCreateComponent to the exports of your PlayerCreateModule

//PlayerCreateModule.ts 
@NgModule({
  imports: [
    CommonModule
  ],
  declarations: [
    PlayerCreateComponent
  ],
  exports: [
    PlayerCreateComponent
  ]
})
export class PlayerCreateModule { }    

and in your main module, import PlayerCreateModule (not just the component)

//app.module.ts
@NgModule({
    declarations: [
        AppComponent,
        FullLayoutComponent,
        ContentLayoutComponent,
        HomeLayoutComponent,
        PlayersLayoutComponent,
        //PlayerCreateComponent <== not needed if it's declared in another module
    ],
    imports: [
        BrowserAnimationsModule,
        AppRoutingModule,
        SharedModule,
        HttpClientModule,
        ModalModule.forRoot(),
        NgbModule.forRoot(),
        PlayerCreateModule //<==== add that
    ],
    providers: [
        AuthService,
        AuthGuard
    ],
    bootstrap: [AppComponent]
})
export class AppModule { }

Answer 2

You need to add PlayerCreateModule under imports in app.module.ts , no need to add the components again in app.module.ts

  imports: [
    PlayerCreateModule
  ]