Noc Noc - 3 years ago 84
Javascript Question

Angular 4 doesnt display my components views

Im learning to use Angular 4 and im not being able to render more than 1 template, my starting App template is OK, and it renders fine, but then i created 2 more components with "ng g component newComponent" and im not being able to make them display anything. I can type the new components URL in the browser and it navigates fine without errors, but it always displays the app.component.html My files are like this:

app.component.html

<!--The content below is only a placeholder and can be replaced.-->
<p>
ASDASDASDAS
</p>


app.component.ts

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

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.less']
})
export class AppComponent {
}


app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

import { AppComponent } from './app.component';
import { LoginComponent } from './login/login.component';
import { DashboardComponent } from './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 } from '@angular/core/testing';

import { DashboardComponent } from './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 be created', () => {
expect(component).toBeTruthy();
});
});


dashboard.component.ts

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

@Component({
selector: 'app-dashboard',
templateUrl: './dashboard.component.html',
styleUrls: ['./dashboard.component.less']
})
export class DashboardComponent implements OnInit {

constructor() { }

ngOnInit() {
}

}


My login component is similar, and my three components displays the same:

ASDASDASDAS

I dont know where my problem is, i have no error messages in any of the consoles. My 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 i need different NgModules for my purpose of totally separated views? I mean i want a page with "Login", another for "Dashboard", another for idk, a new page...etc, each one needs an NgModule for having separated views?

Any help is much appreciated!!

Answer Source

You should place <router-outlet></router-outlet> into app.component.html to define a place where other components will be 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.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download