title: Angular2 : Unhandled Promise rejection: Template parse errors: 'login' is not a known element
body: <p>What I'm trying to do is create login with Firebase Authentication for Angular2 project. When I try to do that, I got this error :</p>
  
  <pre><code>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
  &lt;em&gt;static&lt;/em&gt;&lt;/strong&gt;: {{direct}}   &lt;hr/&gt;   [ERROR -&gt;]&lt;login
  *ngIf='!isAuth'&gt;&lt;/login&gt;   &lt;div *ngIf='isAuth'&gt;
      &lt;h3&gt;Nicely done!&lt;/h3&gt; "): 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. ("
      &lt;p&gt;&lt;strong&gt;Your private message:&lt;/strong&gt; {{private}}&lt;/p&gt;
      &lt;hr/&gt;
      [ERROR -&gt;]&lt;logout&gt;&lt;/logout&gt;   &lt;/div&gt;"): AppComponent@23:4
  
  ; Zone: &lt;root&gt; ; 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
  &lt;em&gt;static&lt;/em&gt;&lt;/strong&gt;: {{direct}} &lt;hr/&gt; [ERROR -&gt;]&lt;login
  *ngIf='!isAuth'&gt;&lt;/login&gt; &lt;div *ngIf='isAuth'&gt; &lt;h3&gt;Nicely done!&lt;/h3&gt; "): 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. ("
  &lt;p&gt;&lt;strong&gt;Your private message:&lt;/strong&gt; {{private}}&lt;/p&gt; &lt;hr/&gt; [ERROR
  -&gt;]&lt;logout&gt;&lt;/logout&gt; &lt;/div&gt;"): AppComponent@23:4
  
  TemplateParser&lt;/TemplateParser.prototype.parse@http://localhost:4200/main.bundle.js:15261:19
  RuntimeCompiler&lt;/RuntimeCompiler.prototype._compileTemplate@http://localhost:4200/main.bundle.js:33617:30
  RuntimeCompiler&lt;/RuntimeCompiler.prototype._compileComponents/compile/&lt;@http://localhost:4200/main.bundle.js:33540:77
  RuntimeCompiler&lt;/RuntimeCompiler.prototype._compileComponents/compile@http://localhost:4200/main.bundle.js:33540:37
  Zone$1&lt;/ZoneDelegate&lt;/ZoneDelegate.prototype.invoke@http://localhost:4200/main.bundle.js:64951:19
  Zone$1&lt;/Zone&lt;/Zone.prototype.run@http://localhost:4200/main.bundle.js:64844:24
  scheduleResolveOrReject/&lt;@http://localhost:4200/main.bundle.js:65210:52
  Zone$1&lt;/ZoneDelegate&lt;/ZoneDelegate.prototype.invokeTask@http://localhost:4200/main.bundle.js:64984:23
  Zone$1&lt;/Zone&lt;/Zone.prototype.runTask@http://localhost:4200/main.bundle.js:64884:28
  drainMicroTaskQueue@http://localhost:4200/main.bundle.js:65116:25
  </code></pre>
  
  <p>Here is my project structure:</p>
  
  <p><a href="https://i.stack.imgur.com/81jLx.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/81jLx.png" alt="enter image description here"></a></p>
  
  <p>Here is my <code>app.component.ts</code>:</p>
  
  <pre><code>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 =&gt; this.isAuth = !!user);
  
        // this method...
        this._data.db.child('static').on('value', data =&gt; {
          this.message = data.val();
        });
  
        // ...fetches the same data as this method
        this._data.staticData.on('value', data =&gt; {
          this.direct = data.val();
        });
  
        this._data.db.child('private').on('value', data =&gt; {
          this.private = data.val();
        });
      }
  }
  </code></pre>
  
  <p>Here is my login module <code>data.service.ts</code>:</p>
  
  <pre><code>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');
      }
  }
  </code></pre>
  
  <p>What did I miss here? How to solve the error?</p>