Kmaczek Kmaczek - 1 year ago 72
AngularJS Question

Serving static files with 5 against Angular SPA

I created SPA with Angular and 5. All routes that suppose to be Angular routing paths will return index.html, then Anguar will handle routes further.

When I will type into browser url: http://localhost:12599/user and press enter. Page is created, all static content is requested properly ex. http://localhost:12599/js/app.js and everything works just fine.

Untill... I want to have more complex routes like: http://localhost:12599/user/registration . My index.html is loaded properly but all static content is god damn invoked incorrectly, like this: http://localhost:12599/user/js/app.js . This obviously wont work(404) coz of additional segment /user something stripped out /registration though.

Is there a clean way to handle this. Or i have to do some dirty work in middleware when handling static content?

like this:

IF path.Contains("/js") THEN path = path.stripOutEverythingBefore("/js")

So this will transform http://localhost:12599/user/js/app.js to http://localhost:12599/js/app.js

Some code of my setup so this wont be so dry for you guys:

public void Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerFactory loggerFactory) //, IRouteBuilder routes

if (env.IsDevelopment())

app.Use(async (context, next) =>
await next();

if (context.Request.Path.ToString().Contains("index.html") ||
// add config cookie
var webConfig = new WebConfigModel();
var jsonSettings = new JsonSerializerSettings()
ContractResolver = new CamelCasePropertyNamesContractResolver()
context.Response.Cookies.Append("ldmeConfig", JsonConvert.SerializeObject(webConfig, Formatting.None, jsonSettings));

// If there's no available file and the request doesn't contain an extension, we're probably trying to access a page.
// Rewrite request to use app root
if (SinglePageAppRequestCheck(context))
context.Request.Path = "/index.html";
await next();


private static bool SinglePageAppRequestCheck(HttpContext context)
return context.Response.StatusCode == 404 && !Path.HasExtension(context.Request.Path.Value);

Setup is taken from

Answer Source

Simply add base link to your index, and all relative requests will be done properly

<base href="/">

I knew it, it will be that simple... Took me 3 days to figure that out though :)

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download