Angular Router Changing URL to base href

1
votes

my question in a nutshell:

Why does angular router in hash mode change the base of the url path to what I have set for my base href? And how do I prevent this behavior?

for more detail on my use case ...

I'm using hash routing in an Angular 8 application.

In my index.html page (which is an MVC page generated on the server) I have to specify a base href so that my html page knows where to load all of the js and css files generated by the angular-cli build. After the angular app loads, the base path in url in the address bar is changed to the base href I specified in my index.html. This causes problems when I try to reload the page, because the url is no longer pointing to the original url that I requested when I first loaded the app.

My questions is: how do I turn off this behavior or prevent angular from changing the url like this? I feel like angular shouldn't care about anything in the url before the hash if I'm using hash routing. I searched the Angular code base and couldn't find the cause.

(this is not default browser behavior that I'm seeing. On its own, when you load a simple html file that has a base href specified, the browser doesn't change the url from the one you originally requested. I tested this just to make sure I'm not crazy).

I could implement a workaround by providing my own LocationStrategy. I don't have any problem doing this, but I feel like I shouldn't have to take an extra step just to maintain default browser behavior when angular shouldn't care anyways. As a work around, I can also remove the base href and provide a --deploy-url when building the app, but this is again an extra step, when the browser could handle loading the files properly on its own and not messing with the url.

I created this repo with a basic example that reproduces the problem and provides a little more detail. I KNOW the express server is probably not configured "correctly". It's only set up to illustrate how I'm having to deal with files in my use case. Please focus on the angular question stated at the beginning of the post and not ancillary details.

Update

I opened an issue with angular as this seems to be a defect somewhere in the angular code base. https://github.com/angular/angular/issues/33000.

1
angular
I had a similar issue occur when REMOVING the base href in index.html and replacing it with APP_BASE_HREF in the module. When you do that, Angular 8 works great until a user changes a router parameter in the browser url and refreshes, then the Angular router service suddenly resolves the base url path to the current browser url and all the script paths to js files break again. It blows my mind how kids are rewriting server paths and trying to use base href to resolve javascript references. lol. They need to stop going back to OLD broken path systems we stopped using 20 years ago! - Stokely

1 Answers

0
votes

you are using Angular 8, and there is an issue related to this: https://github.com/angular/angular/issues/30835.

1) You have to configure your express server in order to get the static files properly. Basically, you have to set the root.

2) You don't need to use base href. Because according your express server, your static files are in the root.

3) Regarding to Angular 8 issue, you have to set es5 in your TS config (read the link above). Tsconfig: "target": "es5",

Finally, please remove the base tag, after that, use this configuration for express:

"use strict";

const express = require('express')
const app = express()
const port = 3000
const _app_folder = 'dist/ng-hash-router-problem';

app.get('*.*', express.static(_app_folder, {maxAge: '1y'}));

app.all('*', function (req, res) {
  res.status(200).sendFile(`/`, {root: _app_folder});
});

app.listen(port, () => console.log(`listening on port ${port}`))

Reference: https://itnext.io/express-server-for-an-angular-application-part-1-getting-started-2cd27de691bd