AppComponent中的ERROR不能用作输入组件 [英] ERROR in AppComponent cannot be used as an entry component
问题描述
嘿,我刚开始使用Angular和Web开发,我已经完成了一些教程。
Hey I'm new to using Angular and web development, I've been walking through a few tutorials.
当尝试合并使用Firebase数据库时,在本地编译(使用ng serve)时,我的应用程序失败。返回: AppComponent不能用作输入组件
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"
如果您可以提供任何帮助,那将是非常有用的。在此先感谢:)
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 { }
推荐答案
@Component
装饰应在 AppComponent
上使用不是 Event
。
The @Component
decoration should be used on the AppComponent
not the Event
.
还要检查 AppComponent
是否为在 AppModule
上声明。
Also check that AppComponent
is declared on the AppModule
.
这篇关于AppComponent中的ERROR不能用作输入组件的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!