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

Issue

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

Solution

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)

Answered By – Tushar Walzade

Answer Checked By – Robin (AngularFixing Admin)

Leave a Reply

Your email address will not be published.