如何正确设置angular2路由中的应用程序上下文路径？
我已经使用angular-cli创建了一个Angular项目（版本：1.0.0-beta.28.3）。 我使用“npm start”在开发环境中运行应用程序，并且应用程序在“localhost：4200”中正常运行。 现在要复制生产部署，我想在本地WAMP中运行该应用程序。 所以，我运行'ng build -prod'，将文件从'dist'文件夹复制到WAMP的www / student目录。 现在，当我通过WAMP运行该项目时，最终得到这个错误：
很明显，该应用程序正在寻找所需的js文件在错误的位置。 我做了一些研究，发现上下文根 - 在我的情况下'学生'必须在index.html中设置为“base href =”/ student“。由于angular-cli的错误，每次键入'ng build -prod'，将基础href重置为“/”。找到解决办法;输入“ng build -prod --base-href student”将base href设置为student。
现在我遇到了一个新问题。 默认页面应该显示路线'app-home'的内容，但启动应用程序会给我：
但是，这两条路线/链接都正常工作。 例如，点击“关于我们”将URL更改为“http：// localhost：82 / student / student / app-about-us”并显示适当的内容。
我很确定我的路由有问题。 请帮助我设置路由，以便我可以使用子URL'http：// localhost：82 / student / student / app-home'在'http：// localhost：82 / student'中运行应用程序' （默认）和'http：// localhost：82 / student / student / app-about-us'
app.modules.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
import { AboutUsComponent } from './about-us/about-us.component';
import { CarComponent } from './car/car.component';
import { MenuComponent } from './menu.component';
import { CONST_ROUTING } from "app/app.routing";
@NgModule({
declarations: [
AppComponent,
HomeComponent,
AboutUsComponent,
CarComponent,
MenuComponent
],
imports: [
BrowserModule,
FormsModule,
HttpModule,
CONST_ROUTING
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
app.routing.ts
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from "app/home/home.component";
import { AboutUsComponent } from "app/about-us/about-us.component";
const MAINMENU_ROUTES: Routes = [
//full : makes sure the path is absolute path
{ path: '', redirectTo: '/app-home', pathMatch: 'full' },
{ path: 'app-home', component: HomeComponent },
{ path: 'app-about-us', component: AboutUsComponent }
];
export const CONST_ROUTING = RouterModule.forRoot(MAINMENU_ROUTES);
menu.component.html
<div class="row">
<div class="col-xs-12">
<ul class="nav nav-pills">
<li routerLinkActive="active"> <a [routerLink]="['/app-home']" >Home</a></li>
<li routerLinkActive="active"> <a [routerLink]="['/app-about-us']" >About Us</a></li>
</ul>
</div>
</div>
app.component.html
<app-menu></app-menu>
<router-outlet></router-outlet>
的index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Ang2RouterTest</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root>Loading...</app-root>
</body>
</html>
使用此选项来创建构建
ng build --base-href .
基础href无处不在。
请参阅我在xampp上托管的示例： 
标准主机 - ng build --base-href http://www.yourwebsitehere.com/ 。 确保记住结尾的斜线
NodeJS主机 - ng build 。 确保尽可能正确地设置你的NodeJS服务器
您可以在RouterModule.forRoot（）中使用选项“useHash”。
export const CONST_ROUTING = RouterModule.forRoot(MAINMENU_ROUTES, { useHash: true });
上一篇: How to set application context path in angular2 routing properly?