Angular2路由的使用方法

Question

我正在尝试编写一个单页应用程序，但无法使路由正常工作。我尝试使用许多教程，但考虑到 Angular2 仍处于测试阶段，它们似乎很快就过时了。

似乎只要我添加对路由器指令或路由器配置或路由器提供商的任何引用，应用程序就会停止工作，并且浏览器的控制台上会打印以下错误：

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

现在我有以下文件，它们不起作用：

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 {}

如果这是一个新手问题，我很抱歉，但我从昨天开始就一直坚持这个问题，我不知道还有什么办法可以解决...

Answer 1

确保 router.dev.js（包括）和 app/main.js 在正确的位置。

你在这里错过了一些东西。

在您的页面上添加 base 和 href="/" 标签，例如 <base href="/">
应用程序组件模板将具有 <router-outlet></router-outlet> 指令
然后使用useAsDefault: true指定路线

改变路线

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

Answer 2

您现在面临的错误问题是因为您的 index.html 中缺少 router.dev.js。但是正如@PankajParkar 已经建议的那样，您需要在代码中添加更多内容才能使其真正起作用:)

Angular2路由的使用方法

How to use Angular2 routing

node.js

angular

url-routing

angular2-routing