Javascript 在Angular 2中嵌入组件

我尝试了几种不同的方法，但我能找到的所有示例都使用模板而不是templateUrl来嵌入组件

在核心我有一个标题组件，我想分开，因为它有登录功能，并显示不同的信息取决于你是否登录。我认为与其把它放到应用程序组件中，不如把它分解成自己的组件。本质上，现在发生的是它构建了find，但没有经过

加载…

---

即使它没有出错，我假设它不知道如何处理

标题组件选择器是
应用程序标题
，但在HTML中使用它作为

HTML标记名称应始终与
选择器
名称相同。在
app.component.html
中，更改为

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

Header/*临时占位符*/
是否已将HeaderComponent添加到应用程序声明中？应用程序声明中应该有一些错误console@Milad这很奇怪，我没有发现任何错误。@Mild我已经更新了问题，将app.module.tsI包括在内，我怀疑这与标头组件中的模板url或AppModule有关。你能把你的
标题部分也发出来吗？另外，确保
HeaderComponent
位于应用程序模块>声明部分。就是这样。我想这是一个语法问题。非常感谢，我早该知道的。
<div id="header">Header</div> /*temporary place holder */
<header-component></header-component>
<router-outlet></router-outlet>

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

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() {
  }



}

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 { }

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