angularjs 2: SecurityError: Failed to execute

Question

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'.

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, Jan 31 '17 at 08:11
@mickdev can you be descriptive about what kind of files the page needs? Thanks. — Harsh Vakharia, Feb 02 '17 at 09:56
See here for more detail about Angular 2 App production : http://stackoverflow.com/a/38765929/7447071 — mickdev, Feb 02 '17 at 16:05

score 2 · Answer 1 · answered Apr 14 '17 at 09:10

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.

score 1 · Answer 2 · answered Feb 23 '18 at 11:11

1

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/">

answered Feb 23 '18 at 11:11

Tushar Walzade

3,737
4
33
56

score 1 · Answer 3 · edited Mar 20 '18 at 10:36

1

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

edited Mar 20 '18 at 10:36

Vega

27,856
27
95
103

answered Mar 20 '18 at 10:15

Antajo Paulson

555
1
4
15

score 1 · Answer 4 · answered Jun 03 '18 at 15:59

1

why not something like that?

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

answered Jun 03 '18 at 15:59

Riccardo

171
2
2

score 0 · Answer 5 · answered Oct 12 '18 at 21:27

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>

score 0 · Answer 6 · answered Mar 05 '19 at 15:51

0

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

answered Mar 05 '19 at 15:51

Omar

111
1
3

angularjs 2: SecurityError: Failed to execute

6 Answers6