I created an Angular project using angular-cli (version: 1.0.0-beta.28.3). I run the application in the development environment using "npm start" and the application works fine in "localhost: 4200". Now, to reproduce the production deployment, I wanted to run the application in local WAMP. So, I ran 'ng build -prod', copied the files from the "dist" folder to the WAMP www / student directory. Now when I run the project through WAMP, I get this error:
, js . , - "" "base href=" /student " index.html. - angular -cli , 'ng build -prod', href reset " / ". , " ng build -prod -base-href student", href .
. "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 = [
{ 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>