Crash trying to create a "file://" dist version
carlok opened this issue · comments
Hello, thanks for your tutorial and project.
I tried to create the prod version with
ng build --aot --prod --bh ./ # or variants
it works when served within a http server but it doesn't when it's called as "file://..."
while the basic angular/cli works generating the "app works!" trivial example.
I have to create a demo, static only, angular2 cli generated dist to be called as "file://" and I tried with your project. I suppose it is just a question of using the right commands 'cause it should not be necessary to have a real webserver, even for the html5 internal routing.
Am I wrong? What is the sequence of shell commands to get, in dist folder, a working version that can be called in the browser as "file://<absolute_path>/dist/index.html"? Thank you for your time.
Sorry for not getting back to you sooner!
So this is interesting. That command should be just fine actually (since all the src and href links in index.html are just their names) However ng build --prod --bh ./ gives me the following error in Chrome
SecurityError: Failed to execute 'replaceState' on 'History': A history state object with URL 'file:///[MyFilePath]/angular2-hn/dist/' cannot be created in a document with origin 'null' and URL 'file:///[MyFilePath]/angular2-hn/dist/index.html'.
Are you seeing the same error? Interestingly enough it works in Safari 🤔
I found an issue where someone was experiencing the same thing. I asked if he did anything differently so hopefully he gets back on that. In the meantime, I'll dig around and see if I'm just missing something.
Yes I see those errors and yes, I have to use Chrome.
I investigated a bit the problem.
I used a very minimal example, to understand a bit more.
A core thing seems to be "skipLocationChange".
If you create a very basic Angular2 app (two routes, for example) in the html part turn, for example, something like <a routerLink="/bundled">Another Module</a> to <a routerLink="/bundled" skipLocationChange>Another Module</a> and, using <base href="./"> in the index.html, I am able to use the router html5 style with a plain "file://" in the browser.
The little change I made are based on https://github.com/Meligy/routing-angular-cli/
Of course this is a good step but I don't want to change every anchor in the views... a more general solution (touching the router, I suppose) might exist.
Thanks for digging into this! You're right, there might be a better way to do it so will see if I can find anything as well.