时间戳

首页 > 解决方案 > NG8001：“app-home”不是已知元素

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

问题描述

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

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

  1. 如果 'app-home' 是一个 Angular 组件，那么验证它是这个模块的一部分。
  2. 如果“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()
      }
    
    }

我该如何解决？

标签： javascriptangularfirebase

解决方案

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

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

笔记：

推荐阅读