我使用 angular-cli 创建了一个 Angular 项目（版本：1.0.0-beta.28.3）。我使用“npm start”在开发环境中运行应用程序，并且应用程序在“localhost:4200”中运行良好。现在为了复制生产部署，我想在本地 WAMP 中运行该应用程序。因此，我运行“ng build -prod”，将文件从“dist”文件夹复制到 WAMP 的 www/student 目录。现在，当我通过 WAMP 运行该项目时，我最终收到此错误：
显然，应用程序在错误的位置寻找所需的 js 文件。我做了一些研究，发现上下文根 - 在我的例子中“student”必须设置在index.html内的“base href=”/student”中。由于Angular-cli的错误，每次我输入“ng” build -prod'，基本 href 重置为“/”。找到了解决方法；输入“ng build -prod --base-href Student”将基本 href 设置为学生。
现在我遇到了一个新问题。默认页面应该显示路由“app-home”的内容，但是启动该应用程序给了我：
但是，两条路线/链接都工作正常。例如，单击“关于我们”会将 url 更改为“http://localhost:82/student/student/app-about-us http://localhost:82/student/student/app-about-us'并显示适当的内容。
我很确定我的路由有问题。请帮助我设置路由，以便我可以让应用程序在“http://localhost:82/学生 http://localhost:82/student' 带有子 URL 'http://localhost:82/student/student/app-home http://localhost:82/student/student/app-home'（默认）和'http://localhost:82/student/student/app-about-us http://localhost:82/student/student/app-about-us'
应用程序模块.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 { }
应用程序路由.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);
菜单.组件.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>
应用程序组件.html
<app-menu></app-menu>
<router-outlet></router-outlet>
索引.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 到处都适用。
See Example where i hosted on xampp :
