angularjs 2: SecurityError: Failed to execute

1
votes

I tried to run angularjs 2 app dist files as simple html page. i.e. I just double click index.html in the dist folder. But the app is not working: Error:

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

6
angular
You can't just click on index.html and except it to work. Your page needs some mandatory files that are not accessible without using a server (Apache, node.js, ...). - mickdev
@mickdev can you be descriptive about what kind of files the page needs? Thanks. - Harsh Vakharia
See here for more detail about Angular 2 App production : stackoverflow.com/a/38765929/7447071 - mickdev

6 Answers

2
votes

First Step:

Run the command 

ng build

or

ng build -prod (then it will compact all files for production version)

Second Step:

Change at index.html in dist directory

<base href="/"> to <base href="./">

Third Step:

Put all files into server(may be htdocs in localhost or any server)

Hopefully it will work.

1
votes

use an HTTP server instead of direct file access. I was facing the same problem; So, I used XAMPP & got it working.

So, your index.html would contain base href something like this - <base href="http://localhost:81/etl/">

1
votes

Use HTTP protocol instead of file transfer protocol. For that open build in http server. I'm using node server

npm install http-server -g

cd path/folder

http-server
0
votes

why not something like that?

history.replaceState = (data:any, title:string, url?:string) => {;//nothing};
0
votes

I had the same problem and I got it working completely in a fairly complex angular 2 app with multiple nested routes.

All I needed was

Router configuration with CommonModule,RouterModule.forRoot(routes,{useHash:true})

Of course you need to import CommonModule first import { CommonModule } from '@angular/common';

and this in the index.html file Removed base Href="/" tag from html and added it like this. <script>document.write('<base href="' + document.location + '" />');</script>

0
votes

Running the dist folder on actual web server solved my issue.