【发布时间】：2017-10-06 08:14:47
【问题描述】：
我使用 angular-cli（版本：1.0.0-beta.28.3）创建了一个 Angular 项目。我使用“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 设置为 student。
现在我遇到了一个新问题。默认页面应该显示路由“app-home”的内容，但启动应用程序给了我：
但是，两条路线/链接都可以正常工作。例如，单击“关于我们”将 url 更改为“http://localhost:82/student/student/app-about-us”并显示适当的内容。
我很确定我的路由有问题。请帮助我以某种方式设置路由，以便我可以使用子网址在“http://localhost:82/student”中运行应用程序 'http://localhost:82/student/student/app-home'（默认）和'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>
【问题讨论】：
-
你需要将
--base-href设置为网址，即http://www.mytestpage.com/，你必须包括尾部斜杠 -
如果它是节点托管的应用程序，如果节点服务器正确处理请求，则基本 href 可以是
/
标签： angular angular2-routing angular-cli