Angular 6, after ng build index.html gets errors in console

Question

I'm facing a issue please help me to resolve this. The issue is that when I do ng build in my CLI and go to the dist folder and run index.html file so the console get the errors of files path.

Failed to load resource: net::ERR_FILE_NOT_FOUND
polyfills.js:1 Failed to load resource: net::ERR_FILE_NOT_FOUND
styles.js:1 Failed to load resource: net::ERR_FILE_NOT_FOUND
scripts.js:1 Failed to load resource: net::ERR_FILE_NOT_FOUND
vendor.js:1 Failed to load resource: net::ERR_FILE_NOT_FOUND
main.js:1 Failed to load resource: net::ERR_FILE_NOT_FOUND
/D:/favicon.ico:1 Failed to load resource: net::ERR_FILE_NOT_FOUND

@ZalnKhAn where you have to run your project locally or on server.? you may add base url of project `i.e:- `. — Abhishek, Dec 31 '18 at 08:17
The files must be in the document root of the webserver, otherwise you have to put the path in the "base" tag — Osakr, Dec 31 '18 at 08:17

Tushar Walzade · Accepted Answer · 2018-12-31T09:30:46.403

23

It's only related to the path, simply use --base-href flag while building as follows -

ng build --prod --base-href ./

Now it generates the lines similar to the following in your index.html -

<base href="./">
<!-- Note the file names here -->
<script type="text/javascript" src="runtime.30458714a8af1a2e7153.js"></script>
<script type="text/javascript" src="polyfills.db85ebdc34f3cf0f4d3f.js"></script>
<script type="text/javascript" src="scripts.e8fe6486441dc07e00c6.js"></script>
<script type="text/javascript" src="main.f9ea86a83ded92312d0f.js"></script>

That's it! It works everywhere, you just need to deploy the production build & you are ready to go!

Also, please note that if you are trying to run index.html right from your files, it won't work. You'll need to place it on a http server (for example, XAMPP for local)

edited Dec 31 '18 at 09:30

answered Dec 31 '18 at 08:57

Tushar Walzade

3,737
4
33
56

this issue come after that main.786282d324cee4d6299d.js:1 ERROR Error: Uncaught (in promise): SecurityError: Failed to execute 'replaceState' on 'History': A history state object with URL 'file:///D:/angular/erp-core/dist/erp-core/' cannot be created in a document with origin 'null' and URL 'file:///D:/angular/erp-core/dist/erp-core/index.html'. Error: Failed to execute 'replaceState' on 'History': A history state object with URL 'file:///D:/angular/erp-core/dist/erp-core/' cannot be created in a document with origin – Zain Khan Dec 31 '18 at 09:03
I removed some basics tags from it because of comment box strength – Zain Khan Dec 31 '18 at 09:12
compare it with my updated anwer & please make sure that you have your production scripts with the same name you shown here. – Tushar Walzade Dec 31 '18 at 09:18
Just run the command as above & don't change anything in index.html, that's it – Tushar Walzade Dec 31 '18 at 09:26
for the `replaceState` error, configure your Router to use `useHash` as follows - `RouterModule.forRoot(routes, { useHash: true })` – Tushar Walzade Dec 31 '18 at 09:37
replaceState is still there after adding useHash – Zain Khan Dec 31 '18 at 10:00
replaceState error is still there after adding useHash – Zain Khan Dec 31 '18 at 10:13
refer this - https://stackoverflow.com/questions/49365057/angular-deployment-without-server-error-securityerror-failed-to-execute-rep – Tushar Walzade Dec 31 '18 at 10:21
what about images path? – Zain Khan Dec 31 '18 at 11:37
refer this for relative paths - https://www.w3schools.com/html/html_filepaths.asp – Tushar Walzade Dec 31 '18 at 12:35
images path are perfect but it take the path of my drive – Zain Khan Jan 01 '19 at 06:57
1

you can also set the base href value in the index.html file – Hamid Taebi Oct 21 '21 at 08:31
It's working for me. Thank you so much buddy. I spent 2 days on google. Finally I managed to run my app. – Raghubir Singh May 19 '22 at 08:04

score 1 · Answer 2 · answered Dec 31 '18 at 08:37

The default base for the href property is defined as / for angular cli projects. If you are building the project and accessing it by directly opening the index.html file, all the .js that the HTML wants to load will be loaded from the '/' directory.

For example, if you are using windows and your build is present in the C:\users\xys\ng\dist\index.html , and you have <script type="text/javascript" src="runtime.js"></script> in your HTML, the browser will look for the .js files in C:\runtime.js.

To solve it, you can either copy all your files to root of the drive (not suggested), or you can create a local server and then server the static files that server (preferred method).

For all the files referred in your HTML (example runtime.js in above case), if the source is not an absolute path, the browser will make request using the `value of base href='thisValue'`. when opening the HTML file, the `/` refers to the root directory (in case on *nix OS) and the root of the partition. in case of windows OS. So the request is made to ,say, `C:\runtime.js` which fails because the file does not exist — Sachin Gupta, Dec 31 '18 at 08:43

Angular 6, after ng build index.html gets errors in console

2 Answers2