Routing not working in Angular2

Question

My Routing isn't working in Angular2, to demonstrate the point, I have put the same component as the destination for both the root of my site and /login. The component works at http://localhost:3000, but at http://localhost:3000/login, I just get a notice "Cannot GET /login".

app.component.ts:

import { Component } from 'angular2/core';
import { RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS } from 'angular2/router';

import {TodoService} from './todo/services/todo.service';
import { TodoCmp } from './todo/components/todo.component';
import { LoginComponent } from './user/components/login.component';
import { UserService } from './user/services/user.service';


@Component({
  selector: 'my-app',
  template: `
    <h1>{{title}}</h1>
    <router-outlet></router-outlet>
  `,
  styleUrls: ['client/dev/todo/styles/todo.css'],
  directives: [ROUTER_DIRECTIVES],
  providers: [
    ROUTER_PROVIDERS,
    TodoService
  ]
})
@RouteConfig([
  {
    path: '/',
    name: 'TodoCmp',
    component: TodoCmp,
    useAsDefault: true
  },
  {
    path: '/login',
    name: 'TodoCmp',
    component: TodoCmp
  }
])

export class AppComponent {
  title = 'ng2do';
}

Here is a link to my index file. What have I done wrong?

@sdfacre Yes, I was facing an issue with my system.config not adding file extensions to dependencies. That is now resolved, please see my updated question. — George Edwards, Mar 24 '16 at 14:35
if everything is loaded correctly, why it still complains 'require is not defined'...sorry, I don't have any clue unless you can provide a plunker. Have you followed any example? like http://www.waynehong.com/javascript/angular-2-routing-example-typescript/ — sdfacre, Mar 25 '16 at 03:04
@Rick [Here](https://github.com/georgeedwards/Gen-App/blob/master/client/dev/index.html) is a link, I'll add it to the question — George Edwards, Mar 25 '16 at 11:49

Günter Zöchbauer · Accepted Answer · 2016-03-25T12:01:33.470

0

Two routes in one @RouteConfig(...) can't have the same name:

@RouteConfig([
  {
    path: '/',
    name: 'TodoCmp',
    component: TodoCmp,
    useAsDefault: true
  },
  {
    path: '/login',
    name: 'TodoCmp',  <!-- <<<== should be 'Login' instead of 'TodoCmp'
    component: TodoCmp
  }
])

You should move ROUTER_PROVIDERS to bootstrap() (like HTTP_PROVIDERS)

edited Mar 25 '16 at 12:01

answered Mar 25 '16 at 11:51

Günter Zöchbauer

623,577
216
2,003
1,567

I have added `import {ROUTER_PROVIDERS} from 'angular2/router';` and then changed my line to `bootstrap(AppComponent, [HTTP_PROVIDERS, ROUTER_PROVIDERS]);` in main.ts, but I still get the same behaviour, is that what you meant to do? – George Edwards Mar 25 '16 at 11:54
Did you also remove it from `@Component()`? – Günter Zöchbauer Mar 25 '16 at 11:55
Yes, I removed it from `app.component` – George Edwards Mar 25 '16 at 11:58
Your routes have both the same `name: 'TodoCmp'`. The names need to be unique for routes of one component. – Günter Zöchbauer Mar 25 '16 at 12:00
Did this fix your issue? – Günter Zöchbauer Mar 25 '16 at 12:21
I am afraid not, I still get the `Failed to load resource: http://localhost:3000/login the server responded with a status of 404 (Not Found)` – George Edwards Mar 25 '16 at 12:23
That's probably http://stackoverflow.com/questions/31415052/angular-2-0-router-not-working-on-reloading-the-browser – Günter Zöchbauer Mar 25 '16 at 12:24
Either to enable `HashLocationStrategy` like explained by one of the answers to the linked question, or to use a server that properly handles HTML5 pushState – Günter Zöchbauer Mar 25 '16 at 12:35

Routing not working in Angular2

1 Answers1

Linked