如何使用Angular2路由

我想写一个单页面的应用程序，但我无法让路由工作。我尝试了很多教程，但他们似乎很快就过时了，因为Angular2仍处于测试阶段。如何使用Angular2路由

看来，只要我任何引用添加到路由器的指令或路由器配置或路由器供应商，应用程序停止工作并打印出浏览器的控制台上看到以下错误：现在我有

Error: Zone</ZoneDelegate</[email protected]://localhost:3000/node_modules/angular2/bundles/angular2-polyfills.js:332:20 
    Zone</Zone</[email protected]://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</[email protected]://localhost:3000/node_modules/angular2/bundles/angular2-polyfills.js:365:24 
    Zone</Zone</[email protected]://localhost:3000/node_modules/angular2/bundles/angular2-polyfills.js:263:29 
    [email protected]://localhost:3000/node_modules/angular2/bundles/angular2-polyfills.js:482:26 
    ZoneTask/[email protected]://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 {}

对不起，如果这是一个新手的问题，但因为昨天我已经粘贴了，我不知道如何解决它...

来源

2016-04-06 napstablook

我有点缺少你的'index.html'中的'router.dev.js'。这可能是问题吗？ :) – PierreDuc

确保router.dev.js（含）& app/main.js在正确的位置。

你在这里错过了几件事。

不要放弃href="/"标记您的页面上添加base像<base href="/">
应用组件模板将有<router-outlet></router-outlet>指令
然后使用useAsDefault: true为你指定的路线

在路线

做如下改变

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

来源

2016-04-06 18:12:52

嘿Pankaj！你的意思是''而不是''我认为... –

Oh..my bad..mixed Angular 1.5（ng-outlet）with Angular 2 ..大声笑..感谢您的领导.. Angular 2个老板.. –

您现在面临的错误的问题是因为您的index.html中缺少router.dev.js。但正如@PankajParkar已经建议，你需要添加更多的东西到你的代码，让它真的工作:)

来源

2016-04-06 18:14:46 PierreDuc

如何使用Angular2路由

回答

相关问题