typescript AppComponent 中的 ERROR 不能作为入口组件

ERROR in AppComponent cannot be used as an entry component

提问by Sky G.

Hey I'm new to using Angular and web development, I've been walking through a few tutorials.

嘿，我是使用 Angular 和 Web 开发的新手，我已经浏览了一些教程。

When trying to incorporate use of my Firebase Database, upon compilation locally (using ng serve) my application is failing. Returning: "AppComponent cannot be used as an entry component"

尝试合并使用我的 Firebase 数据库时，在本地编译（使用 ng serve）时，我的应用程序失败。返回：“AppComponent 不能用作入口组件”

If you could offer any help that'd be great. Thanks in advance :)

如果你能提供任何帮助那就太好了。提前致谢 ：）

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

回答by ibenjelloun

The @Componentdecoration should be used on the AppComponentnot the Event.

该@Component装修应采用的AppComponent不是Event。

Also check that AppComponentis declared on the AppModule.

还要检查AppComponent在AppModule.

回答by Jeppe

I just wanted to supply an example of the problem explained by @ibenjelloun.

我只是想提供一个由@ibenjelloun解释的问题的例子。

@Component({ ... }), while looking a bit like a function, is a decorator, so it must precede the class that you want Angular to treat as a component. So make sure not to put classes between @Component({ ... })and export class YourComponent.

@Component({ ... })，虽然看起来有点像一个函数，但它是一个装饰器，所以它必须在你希望 Angular 将其视为组件的类之前。因此，请确保不要在@Component({ ... })和之间放置类export class YourComponent。

So move Eventto before/after AppComponent:

所以移到Event之前/之后AppComponent：

class Event {
    constructor(public title) { }
}

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

回答by Abhishek kumar

This issue comes due to failed syntax or minor mistakes. I got the same issue while adding a new component to my app.component.ts file. while solving the issue I came to StackOverflow and thought to share my experience.

这个问题是由于语法错误或小错误造成的。我在向 app.component.ts 文件中添加新组件时遇到了同样的问题。在解决这个问题的同时，我来到 StackOverflow 并想分享我的经验。

while checking all the files I found some syntax errors and minor mistakes in app.component.tsfile.

在检查所有文件时，我发现文件中有一些语法错误和小错误app.component.ts。

After solving them and compiling I was able to get exact error messages.

解决它们并编译后，我能够获得确切的错误消息。

One issue was having no proper file path mounting so I hope this might be the reason for the failure of your application at compile time.

一个问题是没有正确的文件路径挂载，所以我希望这可能是您的应用程序在编译时失败的原因。

import { AngularFireDatabase } from '**angularfire2/database**';
import { AngularFireList } from '**angularfire2/database**';