如何在 angular2 路由中正确设置应用程序上下文路径？
Posted
技术标签:
【中文标题】如何在 angular2 路由中正确设置应用程序上下文路径？【英文标题】：How to set application context path in angular2 routing properly? 【发布时间】：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 可以是 /
【参考方案1】：
使用此选项创建构建
ng build --base-href .
base href 无处不在。
查看我在 xampp 上托管的示例：
【讨论】：
可行，但 QA 需要将基本 href 设置为 web url，而不仅仅是.
可能是这样，但需要将其设置为他的 web url，该应用程序将托管在其上才能正常工作
从来没有为我做过，除非通过节点服务器托管，否则需要设置绝对路径，在这种情况下，/ 工作正常
Nope.. PathLocation 比 HashLocation 具有优势，例如 SEO 友好性和静态资源缓存
@TahniatAshraf ：见编辑，基本 href 。将在任何地方工作。如果有帮助，您可以接受作为答案【参考方案2】：
标准主机 - ng build --base-href http://www.yourwebsitehere.com/。请务必记住结尾的斜杠
NodeJS 主机 - ng build。请确保正确设置您的 NodeJS 服务器
【讨论】：
【参考方案3】：我认为问题在于您的应用程序的上下文路径。创建一个服务来获取您的应用程序的应用程序上下文并将此上下文路径附加到您的路由路径，这将解决我猜的问题。
【讨论】：
这是更合适的方法。创建特定于环境的构建不是一个好主意。 IMO 将 base-ref 之类的参数包含在 ng build 中是很愚蠢的以上是关于如何在 angular2 路由中正确设置应用程序上下文路径？的主要内容，如果未能解决你的问题，请参考以下文章
在Angular2 Dart中设置路由器和RouterLink的正确方法是啥