[英]Angular app issue with class declaration, possible incorrect decorator use
I am getting the following errors regarding a class, UserAddComponent, declaration:我收到有关类 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 {
~~~~~~~~~~
The two file is question are user-add.components.ts:有问题的两个文件是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:和 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.我对 Angular 很陌生(这是我的第一个网络应用程序)所以如果这是一个完全菜鸟的问题,请原谅,但暂时,我很难过。 I am using the decorator @NgModule correctly as far as I can tell.
据我所知,我正在正确使用装饰器@NgModule。 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 .
我将此代码基于本文中的模板: 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.
谢谢。
You missed the component decorator, for the class UserAddComponent
.您错过了
UserAddComponent
类的组件装饰器。 Just add @Component({}) above the class只需在类上方添加@Component({})
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
.在模块的声明数组中,您应该声明
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.在这里,
@Component({})
装饰器将一个类标记为 Angular 组件,并提供配置元数据,用于确定组件在运行时应如何处理、实例化和使用。
如果组件已经添加,再次执行ng serve
解决问题。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.