Angular2：未處理的Promise拒絕：模板解析錯誤：'login'不是已知的元素

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

login和logout組件是由firebase定義還是由您製作？

如果使用firebase，那麼您忘記導入firebase模塊並在模塊導入中聲明它。

如果由你，你沒有將它們添加到你的模塊的聲明數組。

乾杯！

Answer 2

我假設你遇到的問題是在運行測試時？如果是這樣，K3v1n的答案可能不會太遠。您遇到的問題是組件未被測試模塊聲明。

你已經使用了ng生成組件，它會自動將聲明添加到你的app.module模塊中，這將會（應該）正常工作。現在，當您在測試中使用另一個組件的HTML中的組件時，它不存在。

在測試的設置中，您將創建一個假模塊來限制TestBed測試的範圍;

TestBed.configureTestingModule({}) 

如果您測試您的AppComponent這可能會是這樣的：

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

這就是你創建一個新的模塊，宣告組件AppComponent作爲模塊的一部分，並對其進行測試。這個新模塊不知道你的登錄組件，它與你的app.module無關。 爲了修復將您所依賴的組件添加到測試模塊的刪除中。

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

Answer 3

如果錯誤發生時，我們正在提供templeteUrl代替templete內嵌HTML，那麼它的，因爲相對路徑，你可以通過把解決，

moduleId: module.id 

所以，

moduleId: module.id, 
selector: 'selector', 
templateUrl: 'relative-url' 

moduleId用於解析樣式表和模板的相對路徑es，因爲它在文檔中說