How to use Angular2 routing

I'm trying to write a single-page app but I can't get the routing to work. I tried using many tutorials but they seem to become outdated very quickly, considering that Angular2 is still on beta.

It seems that as soon as I add any reference to router directives or router configuration or router providers, the app stops working and the following error is printed on the browser's console:

Error: Zone</ZoneDelegate</ZoneDelegate.prototype.invoke@http://localhost:3000/node_modules/angular2/bundles/angular2-polyfills.js:332:20
    Zone</Zone</Zone.prototype.run@http://localhost:3000/node_modules/angular2/bundles/angular2-polyfills.js:227:25
    scheduleResolveOrReject/<@http://localhost:3000/node_modules/angular2/bundles/angular2-polyfills.js:576:53
    Zone</ZoneDelegate</ZoneDelegate.prototype.invokeTask@http://localhost:3000/node_modules/angular2/bundles/angular2-polyfills.js:365:24
    Zone</Zone</Zone.prototype.runTask@http://localhost:3000/node_modules/angular2/bundles/angular2-polyfills.js:263:29
    drainMicroTaskQueue@http://localhost:3000/node_modules/angular2/bundles/angular2-polyfills.js:482:26
    ZoneTask/this.invoke@http://localhost:3000/node_modules/angular2/bundles/angular2-polyfills.js:434:22

    Evaluating http://localhost:3000/angular2/router
    Error loading http://localhost:3000/app/main.js

Right now I have the following files, which don't work:

index.html

<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <title>Rapid</title>

    <!-- 1. Load libraries -->
    <!-- IE required polyfills, in this exact order -->

    <link href="css/dashboard.css" rel="stylesheet">
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <script src="node_modules/es6-shim/es6-shim.min.js"></script>
    <script src="node_modules/systemjs/dist/system-polyfills.js"></script>
    <script src="node_modules/angular2/es6/dev/src/testing/shims_for_IE.js"></script>   

    <script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>
    <script src="node_modules/rxjs/bundles/Rx.js"></script>
    <script src="node_modules/angular2/bundles/angular2.dev.js"></script>
    <script src="https://code.angularjs.org/2.0.0-beta.0/http.dev.js"></script>

    <!-- 2. Configure SystemJS -->
    <script>
      System.config({
        packages: {        
          app: {
            format: 'register',
            defaultExtension: 'js'
          }
        }
      });
      System.import('app/main')
            .then(null, console.error.bind(console));
    </script>
  </head>

  <!-- 3. Display the application -->
  <body>
    <app>Loading...</app>
  </body>
</html>

main.ts

import {MainApp} from './mainApp.component';
import {ROUTER_PROVIDERS} from 'angular2/router';
import {bootstrap} from 'angular2/platform/browser';

bootstrap(MainApp, [
    ROUTER_PROVIDERS
]);

mainApp.component.ts

import {Component} from 'angular2/core';
import {ROUTER_DIRECTIVES, RouteConfig} from 'angular2/router';
import {Home} from './home.component'

@Component({
  selector: 'app',
  template: `    
    <div>Done</div>

    `,
  directives: [ROUTER_DIRECTIVES]
})

  @RouteConfig([
    { path: '/', component: Home, as: 'Home' }
  ])

export class MainApp {}

home.component.ts

import {Component} from 'angular2/core';    

@Component({
    template: '<div>Home</div>',
})

export class Home {}

I'm sorry if this is a newbie question, but I've been stuck on it since yesterday and I don't know how else to solve it...

回答1:

Make sure router.dev.js(included) & app/main.js in correct location.

You missed few things here.

Do add base with href="/" tag on your page like <base href="/">
App component template will have <router-outlet></router-outlet> directive
Then use useAsDefault: true for your specified route

do below change in route

  @RouteConfig([
     { path: '/', component: Home, as: 'Home', useAsDefault: true }
  ])

回答2:

The problem for the error you are facing now, is because of a missing router.dev.js in your index.html. But as @PankajParkar already suggested, you need to add a little more stuff to your code to get it really working :)