title: How to set application context path in angular2 routing properly?
body: <p>I have created an Angular project using angular-cli (version : 1.0.0-beta.28.3). I run the application in development environment using "npm start" and the application runs fine in "localhost:4200". Now to replicate production deployment, I wanted to run the application in local WAMP. So, I ran 'ng build -prod', copied the files from 'dist' folder to WAMP's www/student directory. Now when I run the project through WAMP, I end up getting this error : </p>
  
  <p><a href="https://i.stack.imgur.com/0MRZ8.png" rel="noreferrer"><img src="https://i.stack.imgur.com/0MRZ8.png" alt="enter image description here"></a> </p>
  
  <p>Obviously, the application was looking for the required js files in the wrong location. I did some research, and found that the context root - in my case 'student' had to be set in "base href="/student" inside the index.html. Due to angular-cli's bug, each time I typed 'ng build -prod', the base href got reset to "/". Found a workaround; typing "ng build -prod --base-href student" set the base href to student.</p>
  
  <p>Now I ran into a new problem. The default page was supposed to show the contents of route 'app-home', but launching the app gives me :</p>
  
  <p><a href="https://i.stack.imgur.com/Mid3B.png" rel="noreferrer"><img src="https://i.stack.imgur.com/Mid3B.png" alt="enter image description here"></a></p>
  
  <p>But, both of the routes/ links are working fine. For example clicking 'About Us' changes the url to '<a href="http://localhost:82/student/student/app-about-us" rel="noreferrer">http://localhost:82/student/student/app-about-us</a>' and shows appropriate content.</p>
  
  <p>I am quite sure I have a problem with my routing. Please help me set the routing in a way so that I can get the application running in '<a href="http://localhost:82/student" rel="noreferrer">http://localhost:82/student</a>' with sub-urls 
  '<a href="http://localhost:82/student/student/app-home" rel="noreferrer">http://localhost:82/student/student/app-home</a>' (default) and '<a href="http://localhost:82/student/student/app-about-us" rel="noreferrer">http://localhost:82/student/student/app-about-us</a>'</p>
  
  <p><strong>app.modules.ts</strong></p>
  
  <pre><code>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 { }
  </code></pre>
  
  <p><strong>app.routing.ts</strong></p>
  
  <pre><code>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);
  </code></pre>
  
  <p><strong>menu.component.html</strong></p>
  
  <pre><code>&lt;div class="row"&gt;
   &lt;div class="col-xs-12"&gt;
   &lt;ul class="nav nav-pills"&gt;
   &lt;li routerLinkActive="active"&gt; &lt;a [routerLink]="['/app-home']" &gt;Home&lt;/a&gt;&lt;/li&gt;
   &lt;li routerLinkActive="active"&gt; &lt;a [routerLink]="['/app-about-us']" &gt;About Us&lt;/a&gt;&lt;/li&gt;
   &lt;/ul&gt;
   &lt;/div&gt;
   &lt;/div&gt;
  </code></pre>
  
  <p><strong>app.component.html</strong></p>
  
  <pre><code> &lt;app-menu&gt;&lt;/app-menu&gt;
  &lt;router-outlet&gt;&lt;/router-outlet&gt;
  </code></pre>
  
  <p><strong>index.html</strong></p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html&gt;
  &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;title&gt;Ang2RouterTest&lt;/title&gt;
    &lt;base href="/"&gt;
  
    &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
    &lt;link rel="icon" type="image/x-icon" href="favicon.ico"&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;app-root&gt;Loading...&lt;/app-root&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>