Embed component in Angular 2

Question

I've tried a few different ways, but all the examples I can find for this use the template rather than templateUrl for embedding components.

At the core I have a header component that I want separate because it has the login functionality in it and displays different info depending on if you're logged in or not. Rather than put this into the app component I figured it would be better to break it out into it's own component. Essentially what's happening now is it builds find, but doesn't go past the Loading...

Even though it doesn't error out I'm assuming it doesn't know what to do with the <header-component></header-component

I tried a couple different syntax options for that, but all result in the same thing. I feel like what I'm missing is somehow passing in the imported component. I'm just not sure how.

app.component.ts

import { Component } from '@angular/core';
import { Router } from "@angular/router";

import { HeaderComponent } from './header/Header.Component';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

}

app.component.html

<div id="header">Header</div> /*temporary place holder */
<header-component></header-component>
<router-outlet></router-outlet>

header.component.html (Not currently finished. when done will hold login functionality)

<ul id="links">
    <li>
        <a href="/">Home</a>
    </li>
    <li>
        <a href="/census">Census</a>
    </li>
</ul>

header.component.ts

import { Component, OnInit } from '@angular/core';


@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.css']
})
export class HeaderComponent implements OnInit {


  constructor() { }

  ngOnInit() {
  }



}

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { routing } from "./app.routing";

import { AppComponent } from './app.component';
import { EncounterComponent } from './encounter/encounter.component';
import { CensusComponent } from './census/census.component';
import { PracticeComponent } from './practice/practice.component';
import { LocationComponent } from './location/location.component';
import { CensusManagementComponent } from './census-management/census-management.component';
import { LoginComponent } from './login/login.component';
import { UserComponent } from './user/user.component';
import { HomeComponent } from './home/home.component';
import { HeaderComponent } from './header/header.component';

@NgModule({
  declarations: [
    AppComponent,
    EncounterComponent,
    CensusComponent,
    PracticeComponent,
    LocationComponent,
    CensusManagementComponent,
    LoginComponent,
    UserComponent,
    HomeComponent,
    HeaderComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    routing
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Answer 1

Your header component selector is app-header but you use it as <header-componet></header-component> in HTML.

HTML tag name should always same as as selector name. In your app.component.html, change to

<div id="header">Header</div> /*temporary place holder */
<app-header></app-header>