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

Question

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?

@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
– Gil Epshtain, Commented Mar 19, 2018 at 14:20
It's not different, it's a limitation from the browser that you can't use history API on local files — David
– David, Commented Mar 19, 2018 at 14:25
Yes. Even if you're not using the History API directly, Angular is, behind the curtain. — Oscar Paz
– Oscar Paz, Commented Mar 19, 2018 at 14:25
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
– David, Commented Mar 19, 2018 at 14:30

Gil Epshtain · Accepted Answer · 2018-03-19 14:45:31Z

3

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:

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

answered Mar 19, 2018 at 14:45

Gil Epshtain

9,99110 gold badges78 silver badges100 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

David · Accepted Answer · 2018-03-19 15:02:15Z

1

Try using HashLocationStrategy

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

In your module

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

edited Mar 19, 2018 at 15:02

answered Mar 19, 2018 at 14:39

David

34.6k13 gold badges90 silver badges124 bronze badges

Comments

theeGwandaru · Accepted Answer · 2018-06-05 06:06:38Z

1

In your routes configuration add;

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

In your index.html do this;

 <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

answered Jun 5, 2018 at 6:06

theeGwandaru

4002 silver badges15 bronze badges

Comments

Sanjay Tiwari · Accepted Answer · 2020-06-04 09:19:28Z

1

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.

answered Jun 4, 2020 at 9:19

Sanjay Tiwari

1331 gold badge2 silver badges9 bronze badges

Comments

Hiep Tran · Accepted Answer · 2023-07-08 13:06:08Z

Since Angular 13 despricated deployUrl. Cause trouble if you using CDN cache but your app running on different domain like heroku or something else.

here is the solution step by step:

delete deployUrl, no need to change it to baseHref, we keep it default
replace url to load it manually by replace-file.js:

const replace = require('replace-in-file');

const prefix = 'https://your-cdn.com/assets';

const action2options = {
  files: path.join(process.cwd(), '/dist/browser/index.html'),
  from: [/<script src="(.*?)"/g],
  to: [`<script src="${prefix}$1"`],
};


replace(action2options)
  .then(results => {
    // console.log('Replacement results:', results);
  })
  .catch(error => {
    console.error('Error occurred:', error);
  });

load the chunk using your assets CDN by add this line to main.ts (if use universal, add it to main.server.ts too:

// main.ts add it
// main.server.ts add it too if use universal
// https://github.com/angular/angular-cli/issues/22113#issuecomment-1004279867
declare var __webpack_public_path__: string;
__webpack_public_path__ = 'https://your-cdn.com/assets';

if you need change link by environment, use this to detect:

// angular.json => add to build -> scripts file

            {
                "input": "src/environments/replacer-build.js",
                "inject": false,
                "bundleName": "replacer-build.development"
              }

// update to production build too:
  "configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],

after that you can detect it in replace-file.js by this:

const fs = require('fs');

const files = fs.readdirSync(path.join(process.cwd(), '/dist/browser')).filter(file => {
  return file.match(/^replacer-build\.(development|production|staging)\.js$/);
});

let env = '';
let assetUrl = '';
if (files.length > 0) {
  const filename = files[0];
  if (filename.includes('development')) {
    env = 'development';
    assetUrl = 'http://localhost:4200/';
  else if (filename.includes('production')) {
    env = 'production';
    assetUrl = 'https://your-cdn.com/assets';
  }
}


console.log(`The current environment is ${env} and assetURL replace to:`, assetUrl);

Collectives™ on Stack Overflow

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

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related