Angular 5组件不是任何NgModule的一部分

发布时间：2020-12-17 17:37:01 所属栏目：安全来源：网络整理

导读：我创建了一个名为“player-create”的新组件,并将其添加到app.module中的声明中.但是,当我尝试加载页面时,它会出现以下错误：组件PlayerCreateComponent不是任何NgModule的一部分,或者模块尚未导入到您的模块中. PlayerCreateModule.ts import { NgModule }

我创建了一个名为“player-create”的新组件,并将其添加到app.module中的声明中.但是,当我尝试加载页面时,它会出现以下错误：

组件PlayerCreateComponent不是任何NgModule的一部分,或者模块尚未导入到您的模块中.

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

解决方法

由于您在另一个模块中声明了组件,因此需要将PlayerCreateComponent添加到PlayerCreateModule的导出中

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

并在您的主模块中,导入PlayerCreateModule(不仅仅是组件)

//app.module.ts
@NgModule({
    declarations: [
        AppComponent,//PlayerCreateComponent <== not needed if it's declared in another module
    ],NgbModule.forRoot(),PlayerCreateModule //<==== add that
    ],bootstrap: [AppComponent]
})
export class AppModule { }

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!