Angular 2 routing issues

Question

I'm having an issue with routing with an Angular 2 project. Its a really small app right now that contains a PageNotFoundComponent, a HomeComponent, for the index page, and an admin section.

In the admin section contains a main AdminComponent for the main page, an AdminDashboardComponent, for a dashboard section, a ManageCrisisComponent, and ManageHeroComponent.

This is basically the Heroes application that is on Angulars website on the routing section.

The issues that is at hand, is that the components within the admin section don't load. so I'm just trying to break it down to just be able to route to the pages without anything going on.

The application contains xxx-routing.module.ts file to control or define the routes, and their own xxx.module.ts file. So basically, an app-routing.module.ts file and app.module.ts file, along with an admin-routing.module.ts file

Here is the breakdown of all the code.

the app-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { HomeComponent } from './home/home.component';
import { PageNotFoundComponent } from './page-not-found/page-not-found.component';

const APP_ROUTES: Routes = [
{ path: 'admin', loadChildren: 'app/admin/admin.module#AdminModule', data: { preload: true }},
{ path: '', component: HomeComponent },
{ path: '**', component: PageNotFoundComponent }
];

@NgModule({
imports: [
    RouterModule.forRoot(APP_ROUTES)
],
exports: [
    RouterModule
]
})

export class AppRoutingModule {}

The app.module.ts file

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { AppRoutingModule } from './app-routing.module';

import { AppComponent } from './app.component';
import { PageNotFoundComponent } from './page-not-found/page-not-found.component';
import { HomeComponent } from './home/home.component';



@NgModule({
  declarations: [
AppComponent,
PageNotFoundComponent,
HomeComponent
  ],
  imports: [
BrowserModule,
FormsModule,
HttpModule,
AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
    })
export class AppModule { }

Here is the app.component.html file

<h2>App component</h2>
<hr>
<nav>
    <a routerLink="/" routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}">Home</a>
    <a routerLink="admin" routerLinkActive="active">Admin</a>
</nav>
<router-outlet></router-outlet>

Here are the Admin file

The admin-routing.module.ts file

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { AdminComponent } from './admin.component';
import { AdminDashboardComponent } from './admin-dashboard.component';
 import { ManageCrisisComponent } from './manage-crisis.component';
import { ManageHeroComponent } from './manage-hero.component';

const ADMIN_ROUTES: Routes = [
{ path: '', component: AdminComponent,
  children: [

      { path: './dashboard', component: AdminDashboardComponent },
      { path: './manage-crisis', component: ManageCrisisComponent },
      { path: './manage-heroes', component: ManageHeroComponent }
  ],
  data: { preload: true}
 },

];

@NgModule({
imports: [
    RouterModule.forChild(ADMIN_ROUTES)
],

exports: [ RouterModule ]
})

export class AdminRoutingModule {}

The admin.module.ts file

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';

import { AdminRoutingModule } from './admin-routing.module';

import { AdminComponent } from './admin.component';
import { AdminDashboardComponent } from './admin-dashboard.component';
import { ManageCrisisComponent } from './manage-crisis.component';
import { ManageHeroComponent } from './manage-hero.component';



@NgModule({
imports: [
    CommonModule,
    FormsModule,
    AdminRoutingModule
],
declarations: [
    AdminComponent,
    AdminDashboardComponent,
    ManageCrisisComponent,
    ManageHeroComponent
],
})

export class AdminModule {}

The admin.component.html file

<h2>Admin Home</h2>
<nav>
<a routerLink="./dashboard" routerLinkActive="active">Dashboard</a>
<a routerLink="./manage-crisis" routerLinkActive="active">Manage Crisis</a>
<a routerLink="./manage-heroes" routerLinkActive="active">Manage Heroes</a>
 </nav>

<router-outlet></router-outlet>

and just to restate the issues, is that when I start the app, the links for the home and Admin page show, and they work. In the admin.component.html file shows the links to the dashboard and the managed area, they show up, but when I click on them, I get the PageNotFound component html file. So basically its not finding the page and loading it.

Thanks in advance.

Kaley36 Kaley36 · Accepted Answer · 2017-04-13T17:01:16

Sorry it seems as though i found out what the issue was. I place a ./ in the path and that caused the issue of the pages not loading correctly.

const ADMIN_ROUTES: Routes = [
{ path: '', component: AdminComponent,
  children: [

      { path: 'dashboard', component: AdminDashboardComponent },
      { path: 'manage-crisis', component: ManageCrisisComponent },
      { path: 'manage-heroes', component: ManageHeroComponent }
  ],

 },

];

Angular 2 routing issues

1 Answers