我正在angular-2中开发一个应用程序，其中我有索引页面，它将加载我的应用程序组件。应用程序组件内容加载主页或登录的路由。
这是我的index.html
<!doctype HTML>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" >
<script src="/angular2/bundles/angular2-polyfills.js"></script>
<script src="/systemjs/dist/system.src.js"></script>
<script src="/rxjs/bundles/Rx.js"></script>
<script src="/angular2/bundles/angular2.dev.js"></script>
<script src="/angular2/bundles/upgrade.dev.js"></script>
<style>
*{
border-radius: 0px !important;
}
</style>
</head>
<body>
<div class="container">
<app>Loading......</app>
</div>
<script>
System.config({
defaultJSExtensions: true,
packages: {
app: {
defaultExtension: 'js'
}
},
paths: {
'angular2/upgrade': '../node_modules/angular2/upgrade'
}
});
System.import('scripts/src/bootstrap');
</script>
</body>
</html>
这是我的bootstrap.ts
//import {bootstrap} from 'angular2/angular2';
///<reference path="../node_modules/angular2/typings/node/node.d.ts" />
import {UpgradeAdapter} from 'angular2/upgrade';
import {bootstrap} from 'angular2/platform/browser';
import {ROUTER_PROVIDERS} from 'angular2/router';
import {HTTP_PROVIDERS} from 'angular2/http';
import {App} from './components/app/app';
import {LoginService} from './services/loginService';
import {HttpService} from './services/httpServices';
bootstrap(App, [HTTP_PROVIDERS, ROUTER_PROVIDERS, LoginService, HttpService]);
这是我的app.ts
import {Component, View, Inject} from 'angular2/core';
import {Router, RouteConfig, RouterLink, RouterOutlet, ROUTER_PROVIDERS} from 'angular2/router';
import {HomeComponent} from '../home/home';
import {LoginComponent} from '../login/login';
@Component({
selector: 'app',
})
@View({
templateUrl: '/scripts/src/components/app/app.html',
directives: [RouterLink, RouterOutlet]
})
export class App {
constructor( @Inject(Router) router: Router) {
router.config([
{ path: '', as: 'home', component: HomeComponent },
{ path: '/login', as: 'login', component: LoginComponent }
]);
}
}
它加载了我的其他组件，但是当我运行我的应用程序时出现错误。
请纠正我这里遗漏的内容。
最佳答案
更新(2.0.0 最终版)
@NgModule({
providers [
RouterModule.forRoot(myRoutes),
{ provide: APP_BASE_HREF, useValue : 'path'}
],
bootstrap: [AppComponent]
]);
原创
https://angular.io/docs/ts/latest/guide/router.html
Add the base element just after the
<head>tag. If theappfolder is the application root, as it is for our application, set thehrefvalue exactly as shown here.
<base href="/">
或者添加
bootstrap(AppComponent, [
ROUTER_PROVIDERS,
provide(APP_BASE_HREF, {useValue : 'path'})
]);
在你的 Bootstrap 中。
关于angular - Angular2中LocationStrategy实例化时出错，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34720965/