web-dev-qa-db-fra.com

ERREUR dans AppComponent ne peut pas être utilisé comme composant d'entrée

Hé, je suis nouveau dans l'utilisation de Angular et développement Web, j'ai parcouru quelques tutoriels.

Lorsque j'essaie d'incorporer l'utilisation de ma base de données Firebase, lors de la compilation localement (à l'aide de ng serve), mon application échoue. Retour: "AppComponent ne peut pas être utilisé comme composant d'entrée"

Si vous pouviez offrir une aide, ce serait formidable. Merci d'avance :)

//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 { }
9
Sky G.

Ce problème est dû à une syntaxe défaillante ou à des erreurs mineures. J'ai eu le même problème lors de l'ajout d'un nouveau composant à mon fichier app.component.ts. tout en résolvant le problème, je suis venu à StackOverflow et j'ai pensé partager mon expérience.

en vérifiant tous les fichiers, j'ai trouvé des erreurs de syntaxe et des erreurs mineures dans app.component.ts fichier.

Après les avoir résolus et compilés, j'ai pu obtenir des messages d'erreur exacts.

Un problème était de ne pas avoir de montage de chemin de fichier approprié, donc j'espère que cela pourrait être la raison de l'échec de votre application au moment de la compilation.

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