Angular 2 : Unhandled Promise rejection: Template parse errors: 'login' is not a known element

Question

我想做的是使用 Firebase 身份验证为 Angular2 项目创建登录。当我尝试这样做时，出现了这个错误:

Unhandled Promise rejection:

Template parse errors: 'login' is not a known element:
1. If 'login' is an Angular component, then verify that it is part of this module.
2. If 'login' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schema' of this component to suppress this message. ("
which comes from a direct reference to the DB child
<em>static</em></strong>: {{direct}}   <hr/>   [ERROR ->]<login
*ngIf='!isAuth'></login>   <div *ngIf='isAuth'>
    <h3>Nicely done!</h3> "): AppComponent@18:2 'logout' is not a known element:
1. If 'logout' is an Angular component, then verify that it is part of this module.
2. If 'logout' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schema' of this component to suppress this message. ("
    <p><strong>Your private message:</strong> {{private}}</p>
    <hr/>
    [ERROR ->]<logout></logout>   </div>"): AppComponent@23:4

; Zone: <root> ; Task: Promise.then ; Value: Error: Template parse
errors: 'login' is not a known element: 1. If 'login' is an Angular
component, then verify that it is part of this module. 2. If 'login'
is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the
'@NgModule.schema' of this component to suppress this message. ("
which comes from a direct reference to the DB child
<em>static</em></strong>: {{direct}} <hr/> [ERROR ->]<login
*ngIf='!isAuth'></login> <div *ngIf='isAuth'> <h3>Nicely done!</h3> "): AppComponent@18:2 'logout' is not a known element: 1. If 'logout'
is an Angular component, then verify that it is part of this module.
2. If 'logout' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schema' of this component to suppress this message. ("
<p><strong>Your private message:</strong> {{private}}</p> <hr/> [ERROR
->]<logout></logout> </div>"): AppComponent@23:4

TemplateParser</TemplateParser.prototype.parse@http://localhost:4200/main.bundle.js:15261:19
RuntimeCompiler</RuntimeCompiler.prototype._compileTemplate@http://localhost:4200/main.bundle.js:33617:30
RuntimeCompiler</RuntimeCompiler.prototype._compileComponents/compile/<@http://localhost:4200/main.bundle.js:33540:77
RuntimeCompiler</RuntimeCompiler.prototype._compileComponents/compile@http://localhost:4200/main.bundle.js:33540:37
Zone$1</ZoneDelegate</ZoneDelegate.prototype.invoke@http://localhost:4200/main.bundle.js:64951:19
Zone$1</Zone</Zone.prototype.run@http://localhost:4200/main.bundle.js:64844:24
scheduleResolveOrReject/<@http://localhost:4200/main.bundle.js:65210:52
Zone$1</ZoneDelegate</ZoneDelegate.prototype.invokeTask@http://localhost:4200/main.bundle.js:64984:23
Zone$1</Zone</Zone.prototype.runTask@http://localhost:4200/main.bundle.js:64884:28
drainMicroTaskQueue@http://localhost:4200/main.bundle.js:65116:25

这是我的项目结构:

这是我的app.component.ts:

import { Component } from '@angular/core';
import { DataService } from './data.service';
import { UserService } from './user.service';
import { LoginComponent } from '../app/login/login.component';
import { LogoutComponent } from '../app/logout/logout.component';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  providers: [DataService, UserService]
})
export class AppComponent {
  title = 'app works!';

  public message: string;
  public direct: string;
  public private: string;
  public isAuth: boolean;

  constructor (private _data: DataService, private _user: UserService) {}

  ngOnInit() {
      this._user.auth.onAuthStateChanged(user => this.isAuth = !!user);

      // this method...
      this._data.db.child('static').on('value', data => {
        this.message = data.val();
      });

      // ...fetches the same data as this method
      this._data.staticData.on('value', data => {
        this.direct = data.val();
      });

      this._data.db.child('private').on('value', data => {
        this.private = data.val();
      });
    }
}

这是我的登录模块data.service.ts:

import { Injectable } from '@angular/core';

@Injectable()
export class DataService {
    public db: any;
    public staticData: any;
    constructor() {
        this.db = firebase.database().ref('/');
        this.staticData = firebase.database().ref('/static');
    }
}

我在这里错过了什么？如何解决错误？

Answer 1

我假设您遇到的问题是在运行测试时？如果是这样，K3v1n 的答案可能不会太离谱。您遇到的问题是您的测试模块未声明组件。

您已经使用了 ng generate component，它会自动将声明添加到您的 app.module 模块，这将(应该)工作正常。现在，当在您正在测试的另一个组件的 HTML 中使用组件时，它不存在。

在您的测试设置中，您将创建一个假模块来限制您使用 TestBed 的测试范围；

TestBed.configureTestingModule({})

如果您正在测试您的 AppComponent，它可能看起来像:

TestBed.configureTestingModule({
  declarations: [
    AppComponent
  ],
});

那是您创建一个新模块，将组件 AppComponent 声明为模块的一部分并对其进行测试。这个新模块不知道您的登录组件是否与您的 app.module 无关。 为了解决这个问题，请将您依赖的组件添加到测试模块的 decleration 中。

TestBed.configureTestingModule({
  declarations: [
    AppComponent,
    LoginComponent
  ],
});