ng build failed to execute 'replaceState' on 'History': A history state object with URL cannot be created in a document with origin 'null' and URL

Question

I am using Google Chrome version 52 and I want to be able to run my application locally without a server by accessing index.html.

I am able to hit the landing page of my application. However, when I try to navigate to another page or click on any buttons, it is unable to work.

I have tried many ways, such as:

Add script before import reference one and reference two
Changing base href from / to ./
Changing router configurations to use hash and changing base href to <script>document.write('<base href="' + document.location + '" />');</script>
Using ng build --prod --allow-file-access-from-files

This is the exact error I faced:

I have been trying for a day, would really appreciate if someone could help.

I do not wish to run a web server and I have to make it work on Chrome.

Edited: Works on Safari

Does not work on Chrome, Firefox, Opera, IE, Microsoft Edge

Thank you!

do you use the angular router? are you able to access the root of `yourdomain.com/`, if you refresh your page? — JiiB, Jan 23 '18 at 10:04
@JiiB Hi, yes I use angular router for navigation. After refresh, I am on my root page. — icedmilocode, Jan 24 '18 at 00:42
Does the navigation work, if you use `ng serve` or do you have the same problem, like in the bundled version? — JiiB, Jan 24 '18 at 07:41
@JiiB yes the navigation works for ng serve, no errors observed — icedmilocode, Jan 24 '18 at 09:25

score 0 · Answer 1 · answered Jan 24 '18 at 13:43

There a a few reasons, that could cause problems with your router. If you experience problems in your production environment, you should make sure, that you follow these steps:

Step 1:

Add a base tag in the header section of your index.html:

<base href="/">

Step 2:

Createa .htaccess file in your root directory and set the ErrorDocument on your index.html, like in the example below.

RewriteEngine On

ErrorDocument 404 /

This should fix your issues.

Explanation:

When you load a page, e. g. domain.com/settings, your browser sends a request to the server and expects a settings.html file in response.

If the ErrorDocument points to the index.html file, the Angular router can handle the request correctly and will redirect you to domain.com/settings without getting a error.

I have tried according to what you said and place the .htaccess file in my dist folder, does not work. The error is exactly the same as the screenshot I provided above. — icedmilocode, Jan 25 '18 at 01:23

score 0 · Answer 2 · answered Jan 30 '18 at 00:28

0

Ended up I use Web Server for Chrome to host a simple local server, which was not what I wanted but it's better than nothing.

Still hoping if anyone could solve this.

Thank you!

answered Jan 30 '18 at 00:28

icedmilocode

95
1
2
15

score 0 · Answer 3 · answered Sep 26 '21 at 10:51

0

Use hash location strategy and remove the base tag in index.html entirely.

answered Sep 26 '21 at 10:51

greenPostIt

63
2
6

ng build failed to execute 'replaceState' on 'History': A history state object with URL cannot be created in a document with origin 'null' and URL

3 Answers3

Step 1:

Step 2:

Explanation:

Linked