title: Angular2 rc5> component does not get loaded
body: <p>I have recently moved to Angular2 RC5 from RC4. Since then I have encountered couple of problems. I'm not sure whether these problems are my because of fault or transitional. My app component looks like this :</p>
  
  <pre><code>import {Component, OnInit} from "@angular/core";
  import {SetLocationService} from "./auth/set-location.service";
  
  @Component({
    selector : "my-app",
    template: `
    &lt;app-header&gt;&lt;/app-header&gt;
      &lt;router-outlet&gt;&lt;/router-outlet&gt;
    &lt;app-footer&gt;&lt;/app-footer&gt;
    `
  })
  
  export class AppComponent implements OnInit{
    constructor(
      private _setLocationService : SetLocationService
    ){}
  
    ngOnInit() {
      this._setLocationService.setLocation();
    }
  }
  </code></pre>
  
  <p>routing  :</p>
  
  <pre><code>import {Routes, RouterModule} from '@angular/router';
  import {SearchBoxComponent} from "./search/searchBox.component";
  import {SearchResultComponent} from "./search/search-result.component";
  import {LoginComponent} from "./auth/login.component";
  import {SignupComponent} from "./auth/signup.component";
  import {LogoutComponent} from "./auth/logout.component";
  import {RecoverPasswordComponent} from "./auth/recover-password.component";
  import {ProfileComponent} from "./auth/profile.component"
  import {AccountComponent} from "./auth/account.component"
  
  const appRoutes: Routes = [
    {path : '',  component: SearchBoxComponent},
    {path : 'login',  component: LoginComponent},
    {path : 'signup', component: SignupComponent},
    {path : 'logout', component: LogoutComponent},
    {path : 'profile', component: ProfileComponent},
    {path : 'account', component: AccountComponent},
    {path : 'user/:uname', component: SearchBoxComponent},
    {path : 'recover-password', component: RecoverPasswordComponent},
    {path : 'search/:params', component: SearchResultComponent},
    {path : '**', component : SearchBoxComponent}
  ];
  
  export const routing = RouterModule.forRoot(appRoutes);
  </code></pre>
  
  <p>app module :</p>
  
  <pre><code>// @Modules -&gt; Modules
  import {BrowserModule} from '@angular/platform-browser';
  import {FormsModule} from '@angular/forms';
  import {HttpModule} from '@angular/http';
  import {LocationStrategy, HashLocationStrategy} from '@angular/common';
  import {NgModule} from '@angular/core';
  // import {RouterModule} from '@angular/router';
  
  // @Routes -&gt; routes
  import {routing} from "./app.routes";
  
  // @Components - &gt; Components
  import {AccountComponent} from "./auth/account.component";
  import {AppComponent} from './app.component';
  import {ChatBoxComponent} from "./chat/chat-box.component";
  import {ChatBoxDirective} from "./chat/chat-box.directive";
  import {FooterComponent} from "./layout/footer.component";
  import {HeaderComponent} from "./layout/header.component";
  import {LoginComponent} from "./auth/login.component";
  import {LogoutComponent} from "./auth/logout.component";
  import {ProfileComponent} from "./auth/profile.component";
  import {RecoverPasswordComponent} from "./auth/recover-password.component";
  import {SearchBoxComponent} from "./search/searchBox.component";
  import {SearchResultComponent} from "./search/search-result.component";
  import {SignupComponent} from "./auth/signup.component";
  
  
  // @providers - &gt; services
  import {AuthService} from "./auth/auth.service";
  import {SetLocationService} from "./auth/set-location.service";
  import {SearchService} from "./search/search.service";
  
  @NgModule({
    imports: [
      BrowserModule,
      FormsModule,
      HttpModule,
      routing
    ],
    declarations: [
      AccountComponent,
      AppComponent,
      ChatBoxComponent,
      ChatBoxDirective,
      FooterComponent,
      HeaderComponent,
      LoginComponent,
      LogoutComponent,
      ProfileComponent,
      RecoverPasswordComponent,
      SearchBoxComponent,
      SearchResultComponent,
      SignupComponent
    ],
    providers : [
      AuthService,
      SetLocationService,
      SearchService,
      {provide: LocationStrategy, useClass: HashLocationStrategy}
    ],
    bootstrap: [
      AppComponent,
      HeaderComponent,
      FooterComponent
    ]
  })
  
  export class AppModule {}
  </code></pre>
  
  <p>My first problem is if I do not add 1.HeaderComponent, 2.FooterComponent in bootstrap of app.module, none of them(1.HeaderComponent, 2.FooterComponent) get loaded when root route is active (localhost:3000), but the SearchBoxComponent. I am kind of confused, since I did not see adding multiple components in bootstrap this in the official document. </p>
  
  <p>My second problem is almost same as the first one. If I embed a component (seachBoxConmponent) in another component like the following code, seachBoxConmponent component does not get loaded but the other  parts.  </p>
  
  <pre><code>@Component({
      selector: "search-result",
      template : `
              &lt;seachBox&gt;&lt;/searchBox&gt;
      &lt;div class="tag_list"&gt;
        &lt;p *ngFor = "let tag of result.obj.tags" class = "tag-li" &gt;
          &lt;a [routerLink] = "['/search', tag]" (click) = "onSearchCliked($event, tag)"&gt; {{tag}} &lt;/a&gt;
        &lt;/p&gt;
      &lt;/div&gt;
  `
  })
  </code></pre>
  
  <p>I was wondering , can anyone please help me, I have been working on this problem for last couple of days, still I am stuck here.</p>