Angular app issue with class declaration, possible incorrect decorator use

user_14153044 0
Viewed 4330

I am getting the following errors regarding a class, UserAddComponent, declaration:

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

The two file is question are 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));
  }
}

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

I am very new to Angular (this is my first web app) so please forgive if this is a completely noob question, but for time being, I am stumped. I am using the decorator @NgModule correctly as far as I can tell. The errors seem to be circular so perhaps there is a reference error. I based this code on a template from this article: https://dzone.com/articles/angular-app-state-management-with-ngrx. It is fairly recent so I am not sure it is version incompatibility unless the author used an older version. Thanks.

ngrx angular
2 Answers

You missed the component decorator, for the class UserAddComponent. Just add @Component({}) above the class

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

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

export class UserAddComponent {
    ...
}

In the declarations array of a module, you should declare components, directives, pipes. Not the normal class.

Here the @Component({}) decorator marks a class as an Angular component and provides configuration metadata that determines how the component should be processed, instantiated, and used at runtime.

Angular Component

user_85939830

Executing the ng serve again fixes the issue in case the components are already added.

user_52791330
Related