Angular 5报错：PlayerCreateComponent不属于任何NgModule问题求助

Hey there, let's work through this frustrating Angular error together—I've hit this exact issue more times than I can count, so here are the most common fixes to get your PlayerCreateComponent working properly:

1. Double-check your component's decorator setup #

First, make sure your PlayerCreateComponent has a valid @Component decorator with no typos or path mistakes. A tiny error here can throw off the whole module registration:

import { Component } from '@angular/core';

@Component({
  selector: 'app-player-create',
  templateUrl: './player-create.component.html', // Confirm this path matches your file structure
  styleUrls: ['./player-create.component.css']
})
export class PlayerCreateComponent {
  // Your component logic here
}

2. Verify your AppModule imports and declarations #

It sounds like you added the component to app.module.ts's declarations, but let's confirm everything is correctly typed and imported:

• Ensure you're importing the component with the exact file path (watch for folder hierarchy and capitalization—Angular is case-sensitive on some OSes)
• Make sure the component is listed only once in the declarations array (no duplicates!)

Example correct app.module.ts:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
// Double-check this path matches where your PlayerCreateComponent lives
import { PlayerCreateComponent } from './player-create/player-create.component';

@NgModule({
  declarations: [
    AppComponent,
    PlayerCreateComponent // Must be here, no typos!
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

3. Fix conflicts with PlayerCreateModule.ts #

You mentioned having a PlayerCreateModule.ts file—if this is a feature module for your component, you need to structure things differently:

• Declare the component inside PlayerCreateModule, not AppModule
• Export the component if you plan to use it outside the feature module
• Import PlayerCreateModule into AppModule

Here's how PlayerCreateModule.ts should look:

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

@NgModule({
  declarations: [
    PlayerCreateComponent // Component lives here now
  ],
  imports: [
    CommonModule
  ],
  exports: [
    PlayerCreateComponent // Export if you need to use this component in other modules
  ]
})
export class PlayerCreateModule { }

Then update AppModule to import the feature module (remove the component from declarations!):

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { PlayerCreateModule } from './player-create/player-create.module'; // Import the module

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    PlayerCreateModule // Add the module here
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

4. Clear Angular's cache and restart the dev server #

Sometimes cached build files cause weird registration issues. Run these commands to reset things:

ng clean
ng serve

5. Check for filename/path capitalization issues #

If you're on Linux or macOS, Angular treats file paths as case-sensitive. For example, if your component file is PlayerCreateComponent.ts but you imported it as player-create.component.ts, this will break the module registration. Double-check all paths match exactly.

内容的提问来源于stack exchange，提问作者jordibenck