Несколько маршрутов в разных шаблонах angular2 JS

Question

Я столкнулся с этой проблемой при использовании нескольких маршрутизаторов. ИСКЛЮЧЕНИЕ: Uncaught (обещанию): Ошибка: Не удается найти первичный выход для загрузки «HomeComponent» Ошибка: Не удается найти первичный выход для загрузки «HomeComponent»

Я хочу, чтобы загрузить компонент функции в домашней странице при нажатии на ссылка. Страница контакта должна быть независимой, а не загружаться на главной странице.

Я хочу, чтобы моя целевая страница должна быть home.component.ts поэтому я включил в app.html

app.component.ts

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> 

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