如何正确设置angular2路由中的应用程序上下文路径？
Tah*_*raf 12 angular2-routing angular-cli angular
我使用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的bug,每次我输入'ng build -prod',基本href被重置为"/".找到一个解决方法;键入"ng build -prod --base-href student"将基本href设置为student.
现在我遇到了一个新问题.默认页面应该显示路线'app-home'的内容,但是启动应用程序会给我:
但是,这两条路线/链接都运行良好.例如,单击"关于我们"会将网址更改为" http:// localhost:82/student/student/app-about-us "并显示相应的内容.
我很确定我的路由有问题.请帮我设置路由,以便我可以使用子网址" 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>
Par*_*iya 12
使用此选项可以创建构建
ng build --base-href .
base href无处不在.
请参阅我在xampp上托管的示例:
