Angular 6, after ng build index.html gets errors in console
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)
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).