Multiple Routing in different templates angular2 JS

Question

I am facing this issue while using multiple routing-outlet. EXCEPTION: Uncaught (in promise): Error: Cannot find primary outlet to load 'HomeComponent' Error: Cannot find primary outlet to load 'HomeComponent'

I want to load the feature component in Home page when clicked on the link. The contact page should be independent page rather than loading in home page.

I want my landing page should be home.component.ts so i have included in 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

In your home.component.ts change this templateUrl: './home.html' to templateUrl: 'home.component.html' assuming that they are in the same directory because it can't find your home component template which contains the primary outlet because based your provided info, you don't have home.html