類聲明的 Angular 應用程序問題，可能不正確的裝飾器使用

Question

我收到有關類 UserAddComponent 聲明的以下錯誤：

    ERROR in src/app/user/user.module.ts:10:37 - error NG6001: The class 'UserAddComponent' is 
listed in the declarations of the NgModule 'UserModule', but is not a directive, a component, or a 
pipe. Either remove it from the NgModule's declarations, or add an appropriate Angular decorator.

10   declarations: [UserViewComponent, UserAddComponent],
                                       ~~~~~~~~~~~~~~~~

  src/app/user/user-add/user-add.component.ts:6:14
    6 export class UserAddComponent {
                   ~~~~~~~~~~~~~~~~
    'UserAddComponent' is declared here.
src/app/user/user-add/user-add.component.ts:6:14 - error NG6003: Appears in the NgModule.exports of 
UserModule, but could not be resolved to an NgModule, Component, Directive, or Pipe class.

Is it missing an Angular annotation?

6 export class UserAddComponent {
               ~~~~~~~~~~~~~~~~
src/app/user/user.module.ts:20:14 - error NG6002: Appears in the NgModule.imports of AppModule, but 
itself has errors

20 export class UserModule {
                ~~~~~~~~~~

有問題的兩個文件是user-add.components.ts：

import {User} from '../../models/user';
import {Store} from '@ngrx/store';
import {UserState} from '../store/reducer/user.reducer';
import {addUser} from '../../user.actions';

export class UserAddComponent {

  constructor(private store: Store<UserState>) {
  }

  addUser(userName: string): void {
    const user = new User();
    user.name = userName;
    this.store.dispatch(addUser(user));
  }
}

和 user.module.ts：

import {NgModule} from '@angular/core';
import {CommonModule} from '@angular/common';
import {UserViewComponent} from './user-view/user-view.component';
import {UserAddComponent} from './user-add/user-add.component';
import {StoreModule} from '@ngrx/store';
import {userFeatureKey, reducer} from './store/reducer/user.reducer';


@NgModule({
  declarations: [UserViewComponent, UserAddComponent],
  imports: [
    CommonModule,
    StoreModule.forFeature(userFeatureKey, reducer),
  ],
  exports: [
    UserViewComponent,
    UserAddComponent
  ]
})
export class UserModule {
}

我對 Angular 很陌生（這是我的第一個網絡應用程序）所以如果這是一個完全菜鳥的問題，請原諒，但暫時，我很難過。 據我所知，我正在正確使用裝飾器@NgModule。 錯誤似乎是循環的，因此可能存在參考錯誤。 我將此代碼基於本文中的模板： https : //dzone.com/articles/angular-app-state-management-with-ngrx 。 這是相當新的，所以我不確定它是否是版本不兼容，除非作者使用了舊版本。 謝謝。

Answer 1

您錯過了UserAddComponent類的組件裝飾器。 只需在類上方添加@Component({})

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

@Component({
  selector: 'selector-name',
  styleUrls: ['./selector-name.component.scss'],
  templateUrl: './selector-name.component.html',
})

export class UserAddComponent {
    ...
}

在模塊的聲明數組中，您應該聲明components, directives, pipes 。 不是普通班。

在這里， @Component({})裝飾器將一個類標記為 Angular 組件，並提供配置元數據，用於確定組件在運行時應如何處理、實例化和使用。

角度組件

Answer 2

如果組件已經添加，再次執行ng serve解決問題。