I am not able to see one component in DOM if i include router-outlet directive. There is no error message

Question

app.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 { HomeComponent } from './home/home.component'; 
 import { UsersComponent } from './users/users.component'; 
 import { ServersComponent } from './servers/servers.component'; 
 import { UserComponent } from './users/user/user.component'; 
 import { EditServerComponent } from './servers/edit-server/edit-server.component'; 
 import { ServerComponent } from './servers/server/server.component'; 
 import { ServersService } from './servers/servers.service'; 

     const appRoutes: Routes = [ 
        { path: '', component: HomeComponent }, 
        { path: 'users', component: UsersComponent }, 
        { path: 'server', component: ServerComponent } 
        ]; 


 @NgModule({ 
declarations: [ AppComponent, HomeComponent, UsersComponent, ServersComponent, UserComponent, EditServerComponent, ServerComponent ], 
imports: [ BrowserModule, FormsModule, HttpModule, RouterModule.forRoot(appRoutes) ],

app.component.html

<ul class="nav nav-tabs"> 
<li role="presentation" class="active"><a routerLink="/">Home</a></li> 
<li role="presentation"><a routerLink="/server">Servers</a></li> 
<li role="presentation"><a [routerLink]="['/users']">Users</a></li> </ul> </div>
 </div> 
<div class="row"> 
<div class="col-xs-12 col-sm-10 col-md-8 col-sm-offset-1 col-md-offset-2"> 
<app-home></app-home> 
</div> </div> 
<div class="row"> <div class="col-xs-12 col-sm-10 col-md-8 col-sm-offset-1 col-md-offset-2"> 
<app-users></app-users> </div> </div>
 <div class="row"> <div class="col-xs-12 col-sm-10 col-md-8 col-sm-offset-1 col-md-offset-2"> <app-servers></app-servers> </div> </div>

servers.component.html

<div class="col-xs-12 col-sm-4"> <app-edit-server></app-edit-server> <hr> <app-server></app-server> </div> 

If I try below instead of nesting users, servers and home component in app.component.ts, I can't see server component in DOM. I want Servers component to be displayed.

app.component.html

<div class="container"> <div class="row"> <div class="col-xs-12 col-sm-10 col-md-8 col-sm-offset-1 col-md-offset-2"> <ul class="nav nav-tabs"> <li role="presentation" class="active"><a routerLink="/">Home</a></li> <li role="presentation"><a routerLink="/server">Servers</a></li> <li role="presentation"><a [routerLink]="['/users']">Users</a></li> </ul> </div> </div> 
<div class="row"> 
<div class="col-xs-12 col-sm-10 col-md-8 col-sm-offset-1 col-md-offset-2"> <router-outlet></router-outlet> 
</div> </div> </div>

Answer 1

as your routes setting is that

>  const appRoutes: Routes = [ 
    { path: '', component: HomeComponent }, 
    { path: 'users', component: UsersComponent }, 
    { path: 'server', component: ServerComponent } 
    ]; 

your default route is HomeComponent and to show the others component you should navigate to

> /users

to view users and navigate to

> /server

to view your server component

Answer 2

This is because you need to have these as children of Appcomponent!

    const appRoutes: Routes = [ 
        { path: '', component: HomeComponent, 
         children: [
            { path: 'users', component: UsersComponent }, 
            { path: 'server', component: ServerComponent } ] }, 

        ];