CODEWITHSUNDEEP
angularangular-cliconsole.logng-buildangular-builder
Zain Khan
Zain Khan

Reputation: 1844

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

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

Upvotes: 14

Views: 9482

Answers (2)

Tushar Walzade
Tushar Walzade

Reputation: 3819

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)

Upvotes: 23

Sachin Gupta
Sachin Gupta

Reputation: 5321

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

Upvotes: 1

Related Questions