How to set application context path in angular2 routing properly?
Solution 1
Use this option to create build
ng build --base-href .
base href works everywhere.
See Example where i hosted on xampp :
Solution 2
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
Related videos on Youtube
Tahniat Ashraf
Completed B.Sc in Computer Science & Engineering from BRAC University,Dhaka.
Updated on February 15, 2020Comments
-
Tahniat Ashraf about 4 years
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>
-
mast3rd3mon about 7 yearsyou need to set the
--base-href
to the web url, iehttp://www.mytestpage.com/
, you must include the trailing slash -
mast3rd3mon about 7 yearsif its a node hosted app, the base href can be
/
if the node server handles the request correctly
-
-
mast3rd3mon about 7 yearsthat would work but the QA needs to set the base href to a web url, not just
.
-
mast3rd3mon about 7 yearsmaybe so but it needs to be set to his web url that the app will be hosted on for it to work properly
-
mast3rd3mon about 7 yearsnever did for me, an absolute path needs to be set unless hosted via a node server in which case,
/
works fine -
Parth Ghiya about 7 yearsalways worked for me, even used it to host cordova apps. u must be having some diff issue
-
mast3rd3mon about 7 yearsno issue, it should only work in the 2 circumstances i mentioned above
-
Tahniat Ashraf about 7 yearsWorked for me ! Launching the app redirects me to 'localhost:82/student/app-home' and it works fine. Is there any risk involving this strategy?
-
Parth Ghiya about 7 yearsNope.. PathLocation has advantages over HashLocation like SEO Friendliness & Static Resource caching
-
Parth Ghiya about 7 years@TahniatAshraf : see edit, base href . will work everywhere. you can accept as answer if it helped
-
Tahniat Ashraf about 7 yearsThanks a lot guys. @ParthGhiya Your solution was the first one I tried, and it worked for me :)
-
mast3rd3mon about 7 yearshowever, notice the url has
dist
? thats why you should use what i recommended -
Parth Ghiya about 7 years@mast3rd3mon : because i have kept dist content inside xampp, if i dont keep any folder then
http://localhost/login
will also work for me .... -
Monish Sen almost 5 yearsthis 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
-
pdem about 4 yearsGood solution . This option should be the default (and included in angular.json). One of the few workaround needed to make a project work.
-
takanuva15 almost 2 years5 years later with Angular 12 and this solution worked for me lol. I was deploying my app with spring-boot with a custom servlet.context-path and this helped me fix my app-root not getting filled in
-
Parth Ghiya almost 2 yearshahaha @takanuva15 !!