0

I am new to angular 2 and I am having a hard time trying to setup some child routes:

I have a the following in my app.routes.ts file:

import { Routes, RouterModule } from '@angular/router';
import { MainComponent } from './main.component';
import { SystemsComponent } from './systems.component';

const appRoutes: Routes = [
  {path: '', component: MainComponent},
  {path: 'Systems', component: SystemsComponent},
  {path: 'Systems/:id', component: SystemsComponent}
];

export const appRoutingProviders: any[] = [];

export const routing = RouterModule.forRoot(appRoutes);

When the app is up. If I go to:

localhost:3000

the appropriate MainComponent loads

If I go to:

localhost:3000/Systems

The appropriate SystemsComponent loads. However, if I go to :

localhost:3000/Systems/1

The app fails as it is trying to locate files in the /Systems path:

[1] 16.08.25 02:20:43 404 GET /Systems/styles.css
[1] 16.08.25 02:20:43 404 GET /Systems/node_modules/core-js/client/shim.min.js
[1] 16.08.25 02:20:43 404 GET /Systems/node_modules/zone.js/dist/zone.js
[1] 16.08.25 02:20:43 404 GET /Systems/node_modules/reflect-metadata/Reflect.js
[1] 16.08.25 02:20:43 404 GET /Systems/node_modules/systemjs/dist/system.src.js

Does anyone know why I am getting this behavior? Why isn't the route working ?

Sangwin Gawande
  • 7,658
  • 8
  • 48
  • 66
Angel
  • 543
  • 5
  • 13
  • 2
    Sounds like http://stackoverflow.com/questions/31415052/angular-2-0-router-not-working-on-reloading-the-browser The server needs to support HTML5 pushState. Also ensure you have a `` as first child in `` – Günter Zöchbauer Aug 25 '16 at 06:31
  • THANK YOU SOOO MUCH. I was placing . I have now placed it as the FIRST child and it works!!!! – Angel Aug 25 '16 at 06:39

0 Answers0