如何使用Angular2路由
我试图写一个单页面的应用程序，但我不能让路由工作。 我尝试了很多教程，但是考虑到Angular2还处于testing阶段，他们似乎很快就过时了。
看来，只要我添加任何引用路由器指令或路由器configuration或路由器提供程序，应用程序停止工作，并在浏览器的控制台上打印以下错误：
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 {}
对不起，如果这是一个新手问题，但自从昨天以来我一直被困住，我不知道要如何解决它…
确保router.dev.js （包含）＆ app/main.js位置正确。
你在这里错过了几件事。
- 在你的页面上添加
href="/"标记的<base href="/">比如<base href="/"> - 应用程序组件模板将具有
<router-outlet></router-outlet>指令 - 然后使用
useAsDefault: true作为你指定的路由
在路线上做下面的改变
@RouteConfig([ { path: '/', component: Home, as: 'Home', useAsDefault: true } ])
现在遇到的错误是由于index.html缺lessrouter.dev.js 。 但是，正如@PankajParkar已经build议，你需要添加更多的东西到你的代码，让它真的工作:)