NG8001：“app-home”不是已知元素答案

【问题标题】：NG8001: 'app-home' is not a known elementNG8001：“app-home”不是已知元素
【发布时间】：2021-06-14 20:22:55
【问题描述】：

当我打开（ng serve -o）我的项目时，我收到此错误：

错误：src/app/app.component.html:26:3 - 错误 NG8001：'app-home' 不是已知元素：

如果“app-home”是一个 Angular 组件，则验证它是该模块的一部分。
如果“app-home”是 Web 组件，则将“CUSTOM_ELEMENTS_SCHEMA”添加到该组件的“@NgModule.schemas”以禁止显示此消息。

26 ~~~~~~~~~~

src/app/app.component.ts:6:16 6 templateUrl: '/app.component.html', ~~~~~~~~~~~~~~~~~~~~~ 组件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()
      }
    
    }

我该如何解决？

【问题讨论】：

你能展示你的模块吗？看起来您没有在模块中声明 HomeComponent。
@FrancescoM 请检查我的代码并告诉我它是否符合您的目的。最良好的祝愿。 :-)

标签： javascript angular firebase

【解决方案1】：

我想，我有一个解决方案给你。您必须在app.module.ts 文件中的declarations 部分中添加HomeComponent，如下所示=>

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

注意：

【讨论】：