CODEWITHSUNDEEP
javascriptangularfirebase
Francesco M
Francesco M

Reputation: 79

NG8001: 'app-home' is not a known element

when i'm opening (ng serve -o) my project i get this error:

Error: src/app/app.component.html:26:3 - error NG8001: 'app-home' is not a known element:

  1. If 'app-home' is an Angular component, then verify that it is part of this module.
  2. If 'app-home' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

26 ~~~~~~~~~~

src/app/app.component.ts:6:16 6 templateUrl: '/app.component.html', ~~~~~~~~~~~~~~~~~~~~~ Error occurs in the template of component AppComponent.

app.component.html


    <!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
    </head>
    
    <body>
    
      <div *ngIf="!isSignedIn">
        <h2>Crea account</h2>
        <input type="text" #email/>
        <input type="text" #password/>
        <button (click)="creaAccount(email.value, password.value)">Crea</button>
      </div>
      <div *ngIf="!isSignedIn">
        <h2>Accedi</h2>
        <input type="text #emailAccedi" />
        <input type="text #passwordAccedi" />
        <button (click)="accedi(emailAccedi.value, passwordAccedi.value)">Accedi</button>
      </div>
    
      <app-home></app-home>
    
    </body>
    
    </html>

app.component.ts


    import { Component, OnInit } from '@angular/core';
    import { FirebaseService } from './servizio/firebase.service';
    
    @Component({
      selector: 'app-root',
      templateUrl: '/app.component.html',
      styleUrls: ['./app.component.css']
    })
    export class AppComponent implements OnInit {
      title = 'firebase-angular-auth';
      isSignedIn = false;
      constructor(public servizioFirebase: FirebaseService) { }
      ngOnInit() {
        if (localStorage.getItem('user') !== null)
          this.isSignedIn = true;
        else
          this.isSignedIn = false;
    
      }
      async creaAccount(email: string, password: string) {
        await this.servizioFirebase.creaAccount(email, password)
        if (this.servizioFirebase.isLoggedIn)
          this.isSignedIn = true
      }
    
      async accedi(email: string, password: string) {
        await this.servizioFirebase.accedi(email, password)
        if (this.servizioFirebase.isLoggedIn)
          this.isSignedIn = true
      }
    
      gestisciLogout(){}
    }

home.component.ts


    import { Component, EventEmitter, OnInit, Output } from '@angular/core';
    import { FirebaseService } from '../servizio/firebase.service';
    
    @Component({
      selector: 'app-home',
      templateUrl: './home.component.html',
      styleUrls: ['./home.component.css']
    })
    export class HomeComponent implements OnInit {
    
      @Output() isLogout = new EventEmitter<void>()
    
      constructor(public servizioFirebase: FirebaseService) { }
    
      ngOnInit(): void {
      }
      
      logout(){
        this.servizioFirebase.logout()
        this.isLogout.emit()
      }
    
    }

how can i fix it?

Upvotes: 2

Views: 10394

Answers (1)

Srijon Chakraborty
Srijon Chakraborty

Reputation: 2154

I think, I have a solution for you. You have to add HomeComponent in your app.module.ts file in the declarations section like below=>

import { AppComponent } from './app.component';
import { HomeComponent } from './home.component';
@NgModule({
  imports:      [ BrowserModule, FormsModule ],
  declarations: [ AppComponent, HomeComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

Note:

Upvotes: 1

Related Questions