javascript - Angular 4 doesnt display my components views -

im learning use angular 4 , im not being able render more 1 template, starting app template ok, , renders fine, created 2 more components "ng g component newcomponent" , im not being able make them display anything. can type new components url in browser , navigates fine without errors, displays app.component.html files this:

app.component.html

<!--the content below placeholder , can replaced.--> <p>   asdasdasdas </p> 

app.component.ts

import { component } '@angular/core';  @component({   selector: 'app-root',   templateurl: './app.component.html',   styleurls: ['./app.component.less'] }) export class appcomponent { } 

app.module.ts

import { browsermodule } '@angular/platform-browser'; import { ngmodule } '@angular/core'; import { routermodule, routes } '@angular/router';  import { appcomponent } './app.component'; import { logincomponent } './login/login.component'; import { dashboardcomponent } './dashboard/dashboard.component';  const approutes: routes = [   { path: 'login', component: logincomponent },   { path: 'dashboard', component: dashboardcomponent } ];  @ngmodule({   declarations: [     appcomponent,     logincomponent,     dashboardcomponent   ],   imports: [     browsermodule,     routermodule.forroot(       approutes,       { enabletracing: true }     )   ],   providers: [],   bootstrap: [appcomponent] }) export class appmodule { } 

dashboard.component.html

<p>   dashboard works! </p> 

dashboard.componentspec.ts

import { async, componentfixture, testbed } '@angular/core/testing';  import { dashboardcomponent } './dashboard.component';  describe('dashboardcomponent', () => {   let component: dashboardcomponent;   let fixture: componentfixture<dashboardcomponent>;    beforeeach(async(() => {     testbed.configuretestingmodule({       declarations: [ dashboardcomponent ]     })     .compilecomponents();   }));    beforeeach(() => {     fixture = testbed.createcomponent(dashboardcomponent);     component = fixture.componentinstance;     fixture.detectchanges();   });    it('should created', () => {     expect(component).tobetruthy();   }); }); 

dashboard.component.ts

import { component, oninit } '@angular/core';  @component({   selector: 'app-dashboard',   templateurl: './dashboard.component.html',   styleurls: ['./dashboard.component.less'] }) export class dashboardcomponent implements oninit {    constructor() { }    ngoninit() {   }  } 

my login component similar, , 3 components displays same:

asdasdasdas

i dont know problem is, have no error messages in of consoles. project structure is:

-src --app ---dashboard ----dashboard.component.html ----dashboard.component.less ----dashboard.component.spec.ts ----dashboard.component.ts ---login ----login.component.html ----login.component.less ----login.component.spec.ts ----login.component.ts --app.component.html --app.component.less --app.component.spec.ts --app.component.ts --app.module.ts 

do need different ngmodules purpose of totally separated views? mean want page "login", "dashboard", idk, new page...etc, each 1 needs ngmodule having separated views?

any appreciated!!

you should place <router-outlet></router-outlet> app.component.html define place other components rendered.

an example of app.component.html content:

<div class="app">   <app-header></app-header>    <router-outlet></router-outlet>    <app-footer></app-footer> </div> 

you can read more here.