Javascript 由于未加载子组件，angular4路由问题

我有一个searchComponent，里面有appBookList组件。您可以在下面看到包含appBookList的searchComponent的我的代码：

<div class="container-fluid">
  <div class="row">
    <div class="col-sm-12">
      <form class="form-group">
        <label>Search Book:</label>
        <input type="text" [(ngModel)]="searchBooksByName" name="searchByName" placeholder="search Book by Name" />
        <!--<span class="glyphicon glyphicon-filter"></span>-->
        <label>Technology</label>
        <input type="checkbox" [(ngModel)]="showTechBooks" name="tech" />
        <span>|</span>
        <label>Management</label>
        <input type="checkbox" [(ngModel)]="showMgmBooks" name="mgm" />
        <span>|</span>
        <label>fiction</label>
        <input type="checkbox" [(ngModel)]="showFictionBooks" name="fiction" />
      </form>
    </div>
  </div>
  <app-book-list *ngFor="let app of apps | serachBox:searchBooksByName | filterSearch:showTechBooks:showMgmBooks:showFictionBooks " 
  [bookdetails]="app"></app-book-list>
</div>

此外，在成功登录google后，我通过以下操作导航到SearchComponentComponent：

 this.router.navigate(['books'])

我的module.ts代码是：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { Routes, RouterModule } from '@angular/router';

import { AppComponent } from './app.component';
import { HeaderComponentComponent } from './header-component/header-component.component';
import { SearchComponentComponent } from './search-component/search-component.component';
import { BookListComponent } from './search-component/book-list/book-list.component';
import { SerachBoxPipe } from './serach-box.pipe';
import { FilterSearchPipe } from './filter-search.pipe';
import { ServerService } from './server.service';
import { GoogleLoginComponent } from './google-login/google-login.component';

const appRoutes:Routes = [
  {path:'',component:GoogleLoginComponent},
  {path:'books', component:SearchComponentComponent}
]

@NgModule({
  declarations: [
    AppComponent,
    HeaderComponentComponent,
    SearchComponentComponent,
    BookListComponent,
    SerachBoxPipe,
    FilterSearchPipe,
    GoogleLoginComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    RouterModule.forRoot(appRoutes)
  ],
  providers: [ServerService],
  bootstrap: [AppComponent]
})
export class AppModule { }

---

你能分享你的module.ts代码吗？@Chandru请检查编辑。

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { Routes, RouterModule } from '@angular/router';

import { AppComponent } from './app.component';
import { HeaderComponentComponent } from './header-component/header-component.component';
import { SearchComponentComponent } from './search-component/search-component.component';
import { BookListComponent } from './search-component/book-list/book-list.component';
import { SerachBoxPipe } from './serach-box.pipe';
import { FilterSearchPipe } from './filter-search.pipe';
import { ServerService } from './server.service';
import { GoogleLoginComponent } from './google-login/google-login.component';

const appRoutes:Routes = [
  {path:'',component:GoogleLoginComponent},
  {path:'books', component:SearchComponentComponent}
]

@NgModule({
  declarations: [
    AppComponent,
    HeaderComponentComponent,
    SearchComponentComponent,
    BookListComponent,
    SerachBoxPipe,
    FilterSearchPipe,
    GoogleLoginComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    RouterModule.forRoot(appRoutes)
  ],
  providers: [ServerService],
  bootstrap: [AppComponent]
})
export class AppModule { }