Angular deployment without server - Error: SecurityError: Failed to execute 'replaceState' on 'History'

0
votes

I have a simple web application in Angular v5. This is a purely client-side application in the meaning of it doesn't use any server-side (this is a basic calculator application that load data from JSON file with some measurements and display to the user some analysis according to that JSON).

During development I've tested the application using the Angular-cli "serve", by running - ng serve command, and it works great.

Now I wont to bundle my app and start using it. I would like to run this app locally on my machine without any server.
According to the Angular documentation, to bundle the application to deployment, I should run the command: ng build --prod --base-href=./. There to flag --prod will deploy a minified and uglified version of the application. And the --base-href=./ will set <base href="./"> in the index.html to allow me loading the application files (all the ABC.bundles.js file) directly from the local machine.

Now, when I'm opening the dist/index.html file I can see that all the scripts have loaded, however, I have an error in the console:

ERROR Error: Uncaught (in promise): SecurityError: Failed to execute 'replaceState' on 'History': A history state object with URL 'file:///C:/.../dist/' cannot be created in a document with origin 'null' and URL 'file:///C:/.../dist/index.html'.

How do I deploy/bundle my application to run locally, without a server?

4
angulardeploymentangular-cli
@David, This is a completely different issue. Both issues have the same error in the console, but the scenario and the problem are completely different - Gil Epshtain
It's not different, it's a limitation from the browser that you can't use history API on local files - David
Yes. Even if you're not using the History API directly, Angular is, behind the curtain. - Oscar Paz
But how is it related to Angular deployment? - Gil Epshtain
That's the point, it is not. You need a webserver if you want to use history API, angular or not. Or try the workaround suggested in the link I posted - David

4 Answers

2
votes

When using angular-router you need a server-side since the router is used to serve pages.

To solve these issue you have 2 choices:

  1. Use some sort of light-weight server like NPM's http-server which allow you to run a server on a local machine from the command-line.

  2. Drop the angular-router completely - Yes this is a bit extreme solution and I'm sure it will not be a valid solution to anybody with more than 2 pages in his application. But if you have a very very simple app with one page only and you don't need routing capabilities then this is a valid solution.

1
votes

In your routes configuration add;

RouterModule.forRoot(routes, {useHash: true});

In your index.html do this;

<!-- <base href="/"> --> <script>document.write('<base href="' + document.location + '" />');</script>

And then build with --base-href ./ e.g

ng build --prod --base-href ./

source https://github.com/angular/angular/issues/13948

0
votes

Try using HashLocationStrategy

https://angular.io/api/common/HashLocationStrategy https://angular.io/guide/router#hashlocationstrategy

In your module

imports [
RouterModule.forRoot(routes, {useHash: true})
]
0
votes

i have also faced same issue and it was not working after deployment into server, i have added HashLocationStrategy.

https://angular.io/api/common/HashLocationStrategy

https://angular.io/guide/router#hashlocationstrategy

for me page was not loading and throwing 404 page not found after requesting from Google.com

url --- http://techeducation.in

i have solved this after commenting or removing ...

<base href="http://www.techeducation.in/" /> from index.html file of dist folder.