Just starting out with Angular CLI and still learning TypeScript.
I'm running into an issue with a basic CLI-generated Angular project.
Essentially, the
<router-outlet></router-outlet>
is not displaying any content.
Here is my code. Any help in identifying and explaining the issue would be highly appreciated...
+ app
|- app-routing.module.ts
|- app.component.css
|- app.component.html
|- app.component.spec.ts
|- app.component.ts
|- app.module.ts
|-+ homepage
|- homepage-routing.module.ts
|- homepage.module.ts
|-+ home
|- home.component.css
|- home.component.html
|- home.component.spec.ts
|- home.component.ts
home.component.ts
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {
constructor() { }
ngOnInit() {
}
}
homepage-routing.module.ts
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home/home.component';
const routes: Routes = [
{path : '', component : HomeComponent}
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class HomepageRoutingModule { }
homepage.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { HomepageRoutingModule } from './homepage-routing.module';
import { HomeComponent } from './home/home.component';
@NgModule({
declarations: [HomeComponent],
imports: [
CommonModule,
HomepageRoutingModule
]
})
export class HomepageModule { }
app-routing.module.ts
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
const routes: Routes = [
{path : 'home', loadChildren : './homepage/homepage.module'},
{path : '', redirectTo : '/home', pathMatch : 'full'}
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'app';
}
app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AppRoutingModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
app.component.html
<p>Application loaded</p>
<router-outlet></router-outlet>
home.component.html
<div class="content">
<h2>
Home Dashboard
</h2>
<section>
Welcome to the Home component inside the
Home module.
Et harum quidem rerum facilis est et expedita distinctio.
Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil
impedit quo minus id quod maxime placeat facere possimus,
omnis voluptas assumenda est, omnis dolor repellendus.
Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus
saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae.
</section>
</div>