Angular 2\4 hash url keep index.html

Question

Background: Angular 4, ng cli, RouterModule, useHash: true.

when I browse to my app using http://server/index.html it resolves to http://server/#/ (index.html is omitted from the url) additionally every routing navigation also omits the index.html from the url.

This is problematic for how my app is hosted, I need to keep index.html in the url. How can I configure angular to keep it?

why would this be a problem for your server? if no document is specifically requested, index.html should be the default for the server? — Claies
– Claies, Commented Jun 18, 2017 at 13:51
that's a very non-standard server; It doesn't seem like it will work with Angular (or any modern SPA framework). What server is this, exactly? — Claies
– Claies, Commented Jun 18, 2017 at 14:18
why are you trying to use Azure Storage as a web host? There are other Azure services designed specifically for this task..... — Claies
– Claies, Commented Jun 18, 2017 at 14:35
It's the most cost effective, and BTW it's a common pattern: learn.microsoft.com/en-us/azure/architecture/patterns/… , just happens to be the implementation on Azure Storage is lacking this feature. Not by chance this is #2 most voted issue. If I did the same on S3 I don't think it would raise any eyebrows — itaysk
– itaysk, Commented Jun 18, 2017 at 15:02
well honestly that's the answer. Angular is a dynamic framework, and you have listed documentation regarding usage of a storage service for hosting static content. This isn't an angular issue. period. — Claies
– Claies, Commented Jun 18, 2017 at 15:05

TylerH · Accepted Answer · 2023-01-25 15:13:45Z

9

You can try:

ng build --prod --base-href /app/index.html

but it might affect relative path to your assets.

edited Jan 25, 2023 at 15:13

TylerH

21.3k84 gold badges84 silver badges121 bronze badges

answered Oct 13, 2017 at 16:28

Q.Z

1951 silver badge2 bronze badges

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

2 Comments

jpgrassi Over a year ago

Can also add it to angular-cli.json. This helped me on building my chrome extension using angular 2+. The extension got lost if I didn't had the index.html as a base path.

nagy.zsolt.hun Over a year ago

you can also set the base href value in the index.html file

gdw-atwork · Accepted Answer · 2023-01-23 18:24:36Z

0

index.html is not a known route by the Angular router. Once it is loaded into memory it redirects unknowns to the default route which is usually '\' and wipes out the index.html and any additional path or query parameters.

Something like this should do the trick ...

[
    { path: 'index.html', component: AppComponent},
    { path: '', redirectTo: 'index.html', pathMatch: 'full' },
    { path: '**', redirectTo: 'index.html', pathMatch: 'full' }
]

Also answered here: How to preserve index.html and query params in URL in Angular 6?

answered Jan 23, 2023 at 18:24

gdw-atwork

11 bronze badge

Comments

lima_fil · Accepted Answer · 2024-07-07 19:13:10Z

0

https://github.com/angular/angular/issues/36688#issuecomment-660278674

"Remove the base href. Angular will not modify anything before the hash when using HashLocationStrategy if base href is not defined. "
In addition during build step replaces all relative assets urls with absolute.

With this two steps angular Hash router will work even if you deploy your app in any subfolder of a static server (eg Azure Storage).

Eg

https://domain.azureedge.net/any/path/

Your app entry page can be any name, doesn't have to be index.html

https://domain.azureedge.net/any/path/any-name.html

Without base href:

https://domain.azureedge.net/any/path/any-name.html#/angular/route

answered Jul 7, 2024 at 19:13

lima_fil

1,7801 gold badge28 silver badges34 bronze badges

Collectives™ on Stack Overflow

Angular 2\4 hash url keep index.html

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related