如何使用Angular2路由答案

【问题标题】：How to use Angular2 routing如何使用Angular2路由
【发布时间】：2016-07-27 07:36:32
【问题描述】：

我正在尝试编写单页应用程序，但无法使路由正常工作。我尝试使用许多教程，但考虑到 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 {}

如果这是一个新手问题，我很抱歉，但我从昨天开始就一直卡在这个问题上，我不知道如何解决它......

【问题讨论】：

我有点想念你的index.html 中的router.dev.js。这可能是问题吗？ :)

标签： node.js angular url-routing angular2-routing

【解决方案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 }
  ])

【讨论】：

Oh..my bad..mixed Angular 1.5(ng-outlet) 和 Angular 2.. 大声笑..谢谢提醒.. Angular 2 老板..

【解决方案2】：

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

【讨论】：