How to set application context path in angular2 routing properly?

Question

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 :

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.

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 :

But, both of the routes/ links are working fine. For example clicking 'About Us' changes the url to 'http://localhost:82/student/student/app-about-us' and shows appropriate content.

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 'http://localhost:82/student' with sub-urls 'http://localhost:82/student/student/app-home' (default) and '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>

you need to set the --base-href to the web url, ie http://www.mytestpage.com/, you must include the trailing slash — mast3rd3mon
– mast3rd3mon, Commented May 8, 2017 at 10:52
if its a node hosted app, the base href can be / if the node server handles the request correctly — mast3rd3mon
– mast3rd3mon, Commented May 8, 2017 at 11:05

Parth Ghiya · Accepted Answer · 2017-05-08 11:18:12Z

22

Use this option to create build

ng build --base-href .

base href works everywhere.

See Example where i hosted on xampp :

edited May 8, 2017 at 11:18

answered May 8, 2017 at 10:57

Parth Ghiya

6,9692 gold badges32 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

14 Comments

mast3rd3mon Over a year ago

that would work but the QA needs to set the base href to a web url, not just.

mast3rd3mon Over a year ago

maybe so but it needs to be set to his web url that the app will be hosted on for it to work properly

mast3rd3mon Over a year ago

never did for me, an absolute path needs to be set unless hosted via a node server in which case, / works fine

Parth Ghiya Over a year ago

Nope.. PathLocation has advantages over HashLocation like SEO Friendliness & Static Resource caching

Parth Ghiya Over a year ago

@TahniatAshraf : see edit, base href . will work everywhere. you can accept as answer if it helped

|

mast3rd3mon · Accepted Answer · 2017-05-08 11:27:41Z

4

Standard host - ng build --base-href http://www.yourwebsitehere.com/. Make sure to remember the trailing slash

NodeJS host - ng build. Make sure to setup your NodeJS server properly though

answered May 8, 2017 at 11:27

mast3rd3mon

8,9153 gold badges25 silver badges46 bronze badges

Comments

raj240 · Accepted Answer · 2019-02-14 13:37:09Z

0

I think the problem is with the context path of your application. Create a service which gets the application context of your application and append this context path to your route paths this would solve the issue i guess.

answered Feb 14, 2019 at 13:37

raj240

6648 silver badges19 bronze badges

1 Comment

Monish Sen Over a year ago

this is a more appropriate approach. Creating environment specific builds is not a good idea. IMO it is silly to include an argument like base-ref to ng build

Alexis Michel · Accepted Answer · 2023-07-27 13:47:59Z

0

Other option appart from adding the the parameter in the build: You can add the base href in your index.html

<head>
  ...
  <base href=".">
  ...
</head>

answered Jul 27, 2023 at 13:47

Alexis Michel

1091 silver badge5 bronze badges

Collectives™ on Stack Overflow

How to set application context path in angular2 routing properly?

4 Answers 4

14 Comments

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

14 Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related