Angular base href not showing up in URL

Question

I am trying to deploy my angular application to a production environment that has an additional location step in url e.g. www.production-server.com/name-of-my-app appended to it.

My application works just fine when I run it through angular cli on localhost:4200 and redirects through pages like it is supposed to for example from localhost:4200/page1 to localhost:4200/page2.

But when I try to set the base href

 "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "baseHref" : "/name-of-my-app/",
            "outputPath": "dist",
            "index": "src/index.html",
...

and configure my Routes like this:

const routes: Routes = [
  Route.withShell([
    {path: '', redirectTo: '/sredstva', pathMatch: 'full'},
    {path: 'sredstva', component: OsebnasredstvaComponent, data: {title: extract('Osebna sredstva')}}
  ])
];


/**
 * Provides helper methods to create routes.
 */
export class Route {

  /**
   * Creates routes using the shell component and authentication.
   * @param routes The routes to add.
   * @return {Route} The new route using shell as the base.
   */
  static withShell(routes: Routes): ngRoute {
    return {
      path: '',
      component: ShellComponent,
      children: routes,
      canActivate: [AuthenticationGuard],
      // Reuse ShellComponent instance when navigating between child views
      data: { reuse: true }
    };
  }

}

The application still routs localhost:4200/page1 to page localhost:4200/page2 instead of localhost:4200/name-of-my-app/page1 and localhost:4200/name-of-my-app/page2. Why is that?

EDIT: I would like to add that the base href is showing up correctly when I inspect the page. But it doesn't show up in the URL.

As seen on this picture

Solution 1

The base href is used only in production. If you still want to see how it behaves before deployment you could try the following:

On the first terminal, run the ng build command in watch mode to compile the application to the dist folder:

ng build --watch --outputPath=outputPath --baseHref=baseHref

On the second terminal, install a web server (such as lite-server), and run it against the output folder. For example:

lite-server --baseDir="dist"

You can read more about it from the official docs here.

Solution 2

Try running

$ ng build --prod --base-href="add/your/base/url/here"

Comments

[Kassa]

Try updating the base tag in the index.html. Currently it must contain "/" (thats why its not having name-of-my-app part in the localhost route). Try adding "name-of-my-app" after "/" in base tag.

[Schallabajzer]

@Kassa I have edited the post to show that base href is correctly set.

[TheAngularGuy]

Also, i find it a better practice to set the base href while building rather than setting it in the angular.json, but it's only my opinion.

[Schallabajzer]

Thanks for the quick answer. I followed your steps adding ng build --watch --base-href /osnovnasredstva/ ``` [Browsersync] Serving files from: dist [Browsersync] Watching files... 200 GET /index.html 404 GET /osnovnasredstva/runtime.js 404 GET /osnovnasredstva/polyfills.js 404 GET /osnovnasredstva/styles.js 404 GET /osnovnasredstva/vendor.js 404 GET /osnovnasredstva/main.js 404 GET /osnovnasredstva/favicon.ico ``` I understand the server can't find the files in /osnovnasredstva/ because the dist directory has no such folder. Why is this happening?

[TheAngularGuy]

Maybe you need to set the outputPath. I updated the answer above.

[Schallabajzer]

Don't think setting output Path is the correct answer. From what I see it just changes the location of the build directory not the contents of it. The problem I am getting from lite server is that the dist folder does not contain a sub-directory of /osnovnasredstva.

[Alessandro C]

I think is a very bad thing that baseHref works only in production mode. A configuration need to be simple and work in equal mode in every environment, even in localhost