AppComponent中的ERROR不能用作条目组件 _Component

【AppComponent中的ERROR不能用作条目组件】贵有恒，何必三更起、五更眠、最无益，只怕一日曝、十日寒。这篇文章主要讲述AppComponent中的ERROR不能用作条目组件相关的知识，希望能为你提供帮助。
嘿，我是使用Angular和Web开发的新手，我一直在学习一些教程。
在尝试合并使用我的Firebase数据库时，在本地编译（使用ng服务）时，我的应用程序失败了。返回：“AppComponent不能用作条目组件”
如果你能提供任何帮助，那将是伟大的。提前致谢：）

//app.component.ts import { Component } from '@angular/core'; import {AuthService} from "./services/auth.service"; import {Router} from "@angular/router"; import { AngularFireDatabase } from 'angularfire2/database'; import { AngularFireList } from 'angularfire2/database'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] })class Event { constructor(public title) { } }export class AppComponent { title = 'qoqa'; private eventCounter = 0; public events:AngularFireList< Event[]> ; constructor(db: AngularFireDatabase, private authService: AuthService, private router: Router) { this.events= db.list('/events'); } public AddEvent(): void { let newEvent = new Event(`My event #${this.eventCounter++}`); this.events.push([newEvent]); } signInWithFacebook() { this.authService.FacebookSignIn() .then((res) => { //this.router.navigate(['dashboard']) }) .catch((err) => console.log(err)); }; signInWithGoogle() { this.authService.GoogleSignIn() .then((res) => { //this.router.navigate(['dashboard']) }) .catch((err) => console.log(err)); } }//app.module.ts import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AngularFireModule } from '@angular/fire'; import { AngularFirestoreModule } from '@angular/fire/firestore'; import { AngularFireAuthModule } from '@angular/fire/auth'; import { environment } from '../environments/environment'; import { LoginComponent } from './login.component'; import { AppRoutingModule } from './app-routing'; import { AngularFireDatabaseModule } from 'angularfire2/database'; import { AuthService } from './services/auth.service'; import { AppComponent } from './app.component'; import { HomeComponent } from './home/home.component'; import { CreateEventComponent } from './create-event/create-event.component'; import { EventsComponent } from './events/events.component'; import { ProfileComponent } from './profile/profile.component'; import { SavedEventsComponent } from './saved-events/saved-events.component'; import { InvitationsComponent } from './invitations/invitations.component'; import { CreateQoqaComponent } from './create-qoqa/create-qoqa.component'; @NgModule({ declarations: [ AppComponent, LoginComponent, HomeComponent, CreateEventComponent, EventsComponent, ProfileComponent, SavedEventsComponent, InvitationsComponent, CreateQoqaComponent ], imports: [ AngularFireModule.initializeApp(environment.firebase), AngularFirestoreModule, AngularFireAuthModule, AngularFireDatabaseModule, AppRoutingModule, BrowserModule ], providers: [AuthService], bootstrap: [AppComponent] }) export class AppModule { }

答案@Component装饰应该用在AppComponent而不是Event。
还要检查在AppComponent上宣布AppModule。
另一答案我只是想提供@ibenjelloun解释的问题的一个例子。
@Component({ ... })虽然看起来有点像函数，但它是一个装饰器，所以它必须在你希望Angular作为一个组件处理的类之前。因此，请确保不要在@Component({ ... })和export class YourComponent之间放置类。
所以将Event移到AppComponent之前/之后：

class Event { constructor(public title) { } }@Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { ...