異なるテンプレートでの複数のルーティングangular2 JS

Question

複数のルーティング・アウトレットを使用しているときにこの問題に直面しています。 例外：（約束で）キャッチされない：エラー：「HomeComponent」 エラーをロードするための第一出口を見つけることができません：「HomeComponent」をロードするために第一出口を見つけることができません

私はをクリックしたときのホーム・ページに機能コンポーネントをロードしたいですリンク。 連絡先ページは、ホームページで読み込むのではなく、独立したページにする必要があります。

私は

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

@Component({ 
    moduleId: module.id, 
    selector: 'as-main-app', 
    templateUrl: 'app.html' 
}) 

export class AppComponent { 
    constructor(private router: Router) { } 
} 

app.html

<router-outlet></router-outlet> 

app.html

app.component.tsに含まれているので、私のランディングページはhome.component.tsする必要がありますしたいですhome.component.ts

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

@Component({ 
    moduleId: module.id, 
    selector: 'as-home-app', 
    templateUrl: './home.html' 
}) 

export class HomeComponent { 

    constructor(private router: Router) { } 

} 

home.html

<div class="site-wrapper"> 
    <div class="site-wrapper-inner"> 
     <div class="cover-container"> 
      <div class="masthead clearfix"> 
       <div class="inner"> 
        <h3 class="masthead-brand">Cover</h3> 

        <ul class="nav masthead-nav"> 


         <li> 
          <a [routerLink]="['/home', {outlets: {'homeRoute': ['feat']}} ]">Feature2</a> 
         </li> 

         <li> 
          <a href="#">Contact</a> 
         </li> 
        </ul> 
       </div> 
      </div> 
      <router-outlet name="homeRoute"></router-outlet> 
      </div> 
     </div> 
    </div> 

app.routing.ts

import { FeaturesComponent } from './home/features.component'; 
import { HomeComponent } from './home/home.component'; 
import { ContactComponent } from './home/contact.component'; 
export const AppRoutes: any = [ 
    { path: '', redirectTo: 'home', pathMatch: 'full' }, 
    { path: 'contact', component: ContactComponent }, 
    { path: 'home', 
     component: HomeComponent, 
     children : [ 
      {path: '', component: HomeComponent}, 
      {path: 'feat', Component : FeaturesComponent, outlet: 'homeRoute'} 
     ] 
    }, 

]; 

export const RouterComponents: any = [ 
    FeaturesComponent, HomeComponent, ContactComponent 
]; 

features.component.ts

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

@Component({ 
    selector: 'as-app-page1', 
    template: '<h2>Feature Page</h2>' 
}) 
export class FeaturesComponent { 
} 

contact.component.ts

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

@Component({ 
    selector: 'as-app-page1', 
    template: '<h2>Feature Page</h2>' 
}) 
export class FeaturesComponent { 
} 

app.module .ts

import { NgModule } from '@angular/core'; 
import { BrowserModule } from '@angular/platform-browser'; 
import { AppComponent } from './app.component'; 
import { HomeComponent } from './home/home.component'; 
import { RouterComponents, AppRoutes } from './app.routing'; 
import { RouterModule } from '@angular/router'; 
import { FeaturesComponent } from './home/features.component'; 
import { ContactComponent } from './home/contact.component'; 

@NgModule({ 
    declarations: [ 
     AppComponent, 
     HomeComponent, 
     RouterComponents, 
     FeaturesComponent, 
     ContactComponent 
    ], 
    imports: [ 
     BrowserModule, 
     RouterModule, 
     RouterModule.forRoot(AppRoutes) 
    ], 

    bootstrap: [ AppComponent ] 
}) 
export class AppModule { 
} 

Answer 1

あなた home.component.ts変更で

このtemplateUrl: './home.html'templateUrl: 'home.component.html'に、それは第一出口が含まれているご自宅のコンポーネントのテンプレートを見つけることができないので、あなたの提供情報に基づく、あなたがhome.html

を持っていないので、彼らは同じディレクトリにあると仮定