angular serve index.html from other origin than rest of application - Stack Overflow

admin管理员组

文章数量:1297077

This is a bit of an exotic question, and maybe it's completely impossible.

The idea is this: I'd like to serve the index.html from another domain than the rest of the applications code. So you'd go to mydomain/application and you'd get an index.html, but the css, javascript aso files would be delivered from another domain or subdomain, like cdn.mydomain.

If you want to know why exactly I'm interested in building such a contraption, that's explained in this question.

At first, I thought this should be fairly easy... change the html head to another domain, and you're good to go. But it doesn't work. All files are loaded without error, I can even quickly see the background color of my theme, then the window goes blank and does nothing anymore. I don't understand why, if all the code is there, why does it matter where it is from? There are no errors thrown either, no html statuses in the network log other than 200, all files listed in the html are received. But in the window, there's just... nothing.

Does anybody have any idea how this could be achieved?

Update: I found the --base-href option for ng build, so instead of just changing the base in the html file manually, I compiled the whole project with that option. The result, unfortunately is still the same: No errors, blank page.

Next update: I followed the accepted answer here: What's the difference between --base-href and --deploy-url parameters of angular-cli tool and set my APP_BASE_HREF to the url the index.html is delivered from. The result is still the same.

Update 3: When analyzing what is there of the document, I can see that the basic structure has been created, so at least some of the scripts did run. But the router outlet is not getting rendered, so I'm currently assuming that the router is the problem. It is difficult to have any idea why when there are no errors, though...

This is a bit of an exotic question, and maybe it's completely impossible.

The idea is this: I'd like to serve the index.html from another domain than the rest of the applications code. So you'd go to mydomain/application and you'd get an index.html, but the css, javascript aso files would be delivered from another domain or subdomain, like cdn.mydomain.

If you want to know why exactly I'm interested in building such a contraption, that's explained in this question.

At first, I thought this should be fairly easy... change the html head to another domain, and you're good to go. But it doesn't work. All files are loaded without error, I can even quickly see the background color of my theme, then the window goes blank and does nothing anymore. I don't understand why, if all the code is there, why does it matter where it is from? There are no errors thrown either, no html statuses in the network log other than 200, all files listed in the html are received. But in the window, there's just... nothing.

Does anybody have any idea how this could be achieved?

Update: I found the --base-href option for ng build, so instead of just changing the base in the html file manually, I compiled the whole project with that option. The result, unfortunately is still the same: No errors, blank page.

Next update: I followed the accepted answer here: What's the difference between --base-href and --deploy-url parameters of angular-cli tool and set my APP_BASE_HREF to the url the index.html is delivered from. The result is still the same.

Update 3: When analyzing what is there of the document, I can see that the basic structure has been created, so at least some of the scripts did run. But the router outlet is not getting rendered, so I'm currently assuming that the router is the problem. It is difficult to have any idea why when there are no errors, though...

• angular

Share Improve this question Follow edited Feb 12 at 11:10 UncleBob asked Feb 11 at 16:20 UncleBobUncleBob 1,39144 gold badges2020 silver badges3636 bronze badges 2

• "why does it matter where it is from?" Because the browser will attempt to prevent cross-site attacks. Are you sure you aren't getting a CORS error here? Do you have an CSP headers at play? It's really best to keep everything same-domain. Not sure I understand the why of this... you want to use CDN for your angular script(s)? Are you storing any values on client-side? (localstorage, sessionstorage, cookies?) – browsermator Commented Feb 11 at 17:27
• There are no CORS errors in the browser console. There were, but I got rid of them by adding proper headers server-side, so I'm quite confident they are gone. Yes, the application is using localstorage on the client side. – UncleBob Commented Feb 12 at 6:25

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

The essential problem is the router. It needs to know where the project is delivered from, so it can actually trigger routes.

By compiling with --base-href, not only do you change the place where your assets point to, but also what your router expects as root in order to kick in.

So if you build the project with --base-href cdn.mydomain, and then deliver the index.html from mydomain/myapp/, the router just does nothing.

The router can have its own href, by configuring a provider for APP_BASE_HREF through the @NgModule (see link for how to do that).

However, there's one caveat with this. It will feel very natural, and very logical, to try and provision this from the environment, so you can have different HREFs for different environments. But: At this time in the process, the environment does not appear to have been initialised. You will always receive the value of the default environment. I have yet to figure out how to overcome that, but it's quite a different topic.

The thing I wanted to do in the question does work as soon as base-href and APP_BASE_HREF are correctly configured.

本文标签： angular serve indexhtml from other origin than rest of applicationStack Overflow