Angular-cli: Can't get rid off "A history state object with URL 'file:///G:/#/' cannot be created in a document with origin 'null'"

[tatsujb]

Versions

_                      _                 ____ _     ___
/ \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
/ △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
/ ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
/_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
|___/

Angular CLI: 1.7.1
Node: 8.9.4
OS: win32 x64
Angular: 5.2.6
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

@angular/cdk: 5.2.2
@angular/cli: 1.7.1
@angular/material: 5.2.2
@angular-devkit/build-optimizer: 0.3.2
@angular-devkit/core: 0.3.2
@angular-devkit/schematics: 0.3.2
@ngtools/json-schema: 1.2.0
@ngtools/webpack: 1.10.1
@schematics/angular: 0.3.2
@schematics/package-update: 0.3.2
typescript: 2.7.2
webpack: 3.11.0

windows 10 pro 64bit

Repro steps

• get angular cli
• have routing
• ng build
• virtual drive the contents of the dist folder with SUBST G: .
• double-click index.html to open it

Observed behavior

ERROR Error: Uncaught (in promise): SecurityError: Failed to execute 'replaceState' on 'History': A history state object with URL 'file:///G:/#/' cannot be created in a document with origin 'null' and URL 'file:///G:/index.html'.
Error: Failed to execute 'replaceState' on 'History': A history state object with URL 'file:///G:/#/' cannot be created in a document with origin 'null' and URL 'file:///G:/index.html'.
    at e.replaceState (vendor.7c715405490dfd9b75c0.bundle.js:1)
    at e.replaceState (vendor.7c715405490dfd9b75c0.bundle.js:1)
    at t.replaceState (vendor.7c715405490dfd9b75c0.bundle.js:1)
    at t.resetUrlToCurrentUrlTree (vendor.7c715405490dfd9b75c0.bundle.js:1)
    at t.resetStateAndUrl (vendor.7c715405490dfd9b75c0.bundle.js:1)
    at vendor.7c715405490dfd9b75c0.bundle.js:1
    at t.invoke (polyfills.ae3fb5d11cc61f1acad9.bundle.js:1)
    at Object.onInvoke (vendor.7c715405490dfd9b75c0.bundle.js:1)
    at t.invoke (polyfills.ae3fb5d11cc61f1acad9.bundle.js:1)
    at e.run (polyfills.ae3fb5d11cc61f1acad9.bundle.js:1)
    at e.replaceState (vendor.7c715405490dfd9b75c0.bundle.js:1)
    at e.replaceState (vendor.7c715405490dfd9b75c0.bundle.js:1)
    at t.replaceState (vendor.7c715405490dfd9b75c0.bundle.js:1)
    at t.resetUrlToCurrentUrlTree (vendor.7c715405490dfd9b75c0.bundle.js:1)
    at t.resetStateAndUrl (vendor.7c715405490dfd9b75c0.bundle.js:1)
    at vendor.7c715405490dfd9b75c0.bundle.js:1
    at t.invoke (polyfills.ae3fb5d11cc61f1acad9.bundle.js:1)
    at Object.onInvoke (vendor.7c715405490dfd9b75c0.bundle.js:1)
    at t.invoke (polyfills.ae3fb5d11cc61f1acad9.bundle.js:1)
    at e.run (polyfills.ae3fb5d11cc61f1acad9.bundle.js:1)
    at P (polyfills.ae3fb5d11cc61f1acad9.bundle.js:1)
    at polyfills.ae3fb5d11cc61f1acad9.bundle.js:1
    at t.invokeTask (polyfills.ae3fb5d11cc61f1acad9.bundle.js:1)
    at Object.onInvokeTask (vendor.7c715405490dfd9b75c0.bundle.js:1)
    at t.invokeTask (polyfills.ae3fb5d11cc61f1acad9.bundle.js:1)
    at e.runTask (polyfills.ae3fb5d11cc61f1acad9.bundle.js:1)
    at v (polyfills.ae3fb5d11cc61f1acad9.bundle.js:1)
    at <anonymous>

Mention any other details that might be useful (optional)

This breaks routing functionality. and basically the app ceases to work on load.

This is especially weird since there is no error of any sort on "ng serve"

I've tried all the indicated fixes relating to providing a "base" uri.
https://stackoverflow.com/questions/41950468/angularjs-2-securityerror-failed-to-execute/43408571
https://github.com/angular/angular/issues/5218
https://github.com/angular/angular/issues/13948
https://github.com/housseindjirdeh/angular2-hn/issues/52

Also I've made my project available here so as to provide a full picture : https://github.com/tatsujb/ParcelAngularScss

This whole process is mindless and backwards. why should a dev have to do any of this? the default values should be handled by angularcli or better yet angular. devs should not have to experience different behaviors between run and compile.

[tatsujb]

is the issue simply that angular apps cannot be run this way and must be housed by a server software of some description?

[filipesilva]

@tatsujb you mentioned there's no error on ng serve but that you get errors on ng build. How are you serving the app when you get those errors?

Can you give us explicit steps to see the error you're seeing when using the repository you provided?

[tatsujb]

well on ng serve, angular cli creates a virtual server on localhost:4200 I can access that in the browser.

I can now confirm that if I have a server hosted, with say, Java Spring and the built version of the angular app is served by that then the error doesn't happen.

Ergo my issue was that I was assuming you could simply create a drive and place the index.html file and other build outputs there and then directly open it. My bad.

In my defense this is specific to modern js-framework based fronts or even angular in particular. It should be specified somewhere in the docs that that is not an option.

[filipesilva]

Yes, there's a lot of things that won't work when not running from a server (e.g. double clicking index.html). The error you got (below) isn't from Angular itself I think, it's from the browser.

It's telling you that the History API is not usable from file:// due to security reasons. Angular uses the History API, but it's a standard API (https://developer.mozilla.org/en-US/docs/Web/API/History) that anything can use.

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

[Shekharrajak]

Thanks to this comment https://github.com/angular/angular/issues/13948#issuecomment-302727428 :+1:

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}