Question

我使用angular-cli创建了一个Angular项目（版本：1.0.0-beta.28.3）。我使用＆＃34; npm start＆＃34;在开发环境中运行应用程序。并且应用程序在＆＃34; localhost：4200＆＃34;中正常运行。现在要复制生产部署，我想在本地WAMP中运行该应用程序。所以，我运行了build -prod＆＃39;，复制了来自＆＃39; dist＆＃39;文件夹到WAMP的www / student目录。现在当我通过WAMP运行项目时，我最终得到了这个错误：

显然，应用程序正在错误的位置查找所需的js文件。我做了一些研究，发现背景根源 - 在我的情况下＆＃39;学生＆＃39;必须设置在＆＃34; base href =＆＃34; / student＆＃34;在index.html里面。由于angular-cli的bug，每次我输入build -prod＆＃39;时，基本href都会重置为＆＃34; /＆＃34;。找到了解决方法;输入＆＃34; ng build -prod --base-href student＆＃34;将基础href设置为student。

现在我遇到了一个新问题。默认页面应该显示route＆＃39; app-home＆＃39;的内容，但是启动应用程序会给我：

但是，这两个路线/链接都运行良好。例如，点击“关于我们”＆＃39;将网址更改为＆＃39; http://localhost:82/student/student/app-about-us＆＃39;并显示适当的内容。

我很确定我的路由有问题。请帮我设置路由，以便我可以在＆＃39; http://localhost:82/student＆＃39;与子网址＆＃39; http://localhost:82/student/student/app-home＆＃39; （默认）和＆＃39; http://localhost:82/student/student/app-about-us＆＃39;

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>

Answer 1

使用此选项可以创建构建

ng build --base-href .

base href无处不在。

请参阅我在xampp上托管的示例：

Answer 2

标准主持人 - ng build --base-href http://www.yourwebsitehere.com/。确保记住尾部斜杠

NodeJS主机 - ng build。确保通过

正确设置NodeJS服务器

Answer 3

我认为问题出在应用程序的上下文路径上。创建一个获取应用程序应用程序上下文的服务，并将该上下文路径附加到您的路由路径中，这将解决我认为的问题。

如何正确设置angular2路由中的应用程序上下文路径？

3 个答案: