5

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?

Cœur
  • 37,241
  • 25
  • 195
  • 267
itaysk
  • 5,852
  • 2
  • 33
  • 40
  • 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 Jun 18 '17 at 13:51
  • unfortunately that's not the case with the server I'm using, it requires resources to explicitly be requested (index.html) – itaysk Jun 18 '17 at 14:16
  • 1
    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 Jun 18 '17 at 14:18
  • not technically a server, I'm using Azure Storage (S3 equivalent) for static file serving which currently requires resources to be explicitly requested: https://feedback.azure.com/forums/217298-storage/suggestions/6417741-static-website-hosting-in-azure-blob-storage – itaysk Jun 18 '17 at 14:33
  • 1
    why are you trying to use Azure *Storage* as a web host? There are other Azure services designed specifically for this task..... – Claies Jun 18 '17 at 14:35
  • It's the most cost effective, and BTW it's a common pattern: https://learn.microsoft.com/en-us/azure/architecture/patterns/static-content-hosting , 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 Jun 18 '17 at 15:02
  • We are digressing. I think that it's a legitimate ask to keep to the http / url specs, and if Angular can't do that - that's an answer as well. I just want to be sure. – itaysk Jun 18 '17 at 15:04
  • 1
    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 Jun 18 '17 at 15:05
  • Why not take a look at [Netlify](https://www.netlify.com/) or [Firebase](https://firebase.google.com/) for your hosting solution? You're using Azure Storage, and as other said it's supposed to be for content hosting, not serving your web application. Azure could be great for your assets, or the JS bundle files, but not for serving the `index.html` as the primary page for all web routes. – MichaelSolati Jun 18 '17 at 18:03
  • @Claies That's an interesting point. I am considering Angular as a SPA framework meaning it is *static* bunch of files on the server that comes to life only on the client. Therefore I expect Angular to be *dynamic* on the client, not on the server. If it has any assumptions about the server it is not a SPA... won't you agree? – itaysk Jun 18 '17 at 19:36
  • no, I don't agree. Angular uses a variety of features like AJAX Asynchronous HTTP to deliver partial content. It is **very likely** that even if you were able to correct your routing issues, you would have issues with other assets. – Claies Jun 18 '17 at 21:15

2 Answers2

8

You can try:

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

but it might affect relative path to your assets.

TylerH
  • 20,799
  • 66
  • 75
  • 101
Q.Z
  • 165
  • 1
  • 2
  • 2
    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. – jpgrassi Dec 20 '17 at 20:37
  • you can also set the base href value in the index.html file – nagy.zsolt.hun Aug 30 '18 at 06:52
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?

gdw-atwork
  • 1
  • 1