Changing index.html generation in Angular2

Question

I an deploying an Angular (2) App to a container that requires the NG2 JS to be loaded from a custom location.

Currently when i build my app, the index.html generates

<base href="/">
<app-root>Loading...</app-root>
<script type="text/javascript" src="inline.bundle.js"></script>
<script type="text/javascript" src="polyfills.bundle.js"></script>
<script type="text/javascript" src="styles.bundle.js"></script>
<script type="text/javascript" src="vendor.bundle.js"></script>
<script type="text/javascript" src="main.bundle.js"></script>

However i need it to generate something like:

<!--<base href="/">-->
<app-root>Loading...</app-root>
<script type="text/javascript" src="/custom/inline.bundle.js"></script>
<script type="text/javascript" src="/custom/polyfills.bundle.js"></script>
<script type="text/javascript" src="/custom/styles.bundle.js"></script>
<script type="text/javascript" src="/custom/vendor.bundle.js"></script>
<script type="text/javascript" src="/custom/main.bundle.js"></script>

Is this possible? How can I achieve this? Thanks!

Possible duplicate of How to set the public path on angular 4 — user663031
– user663031, Commented Jul 26, 2017 at 5:37

user663031 · Accepted Answer · 2017-07-26 05:37:16Z

1

In .angular-cli.json:

"deployUrl": "custom"

answered Jul 26, 2017 at 5:37

user663031

Sign up to request clarification or add additional context in comments.

2 Comments

empire29 Over a year ago

Can this be env based? It doesnt appear to be picked up if i put in an environments file.

user663031 Over a year ago

You could put different values in different "apps" in your angular-cli.json file.

Kamaal · Accepted Answer · 2017-07-26 06:21:30Z

0

Well, deployUrl will work for your requirement but I will suggest you load the js file only when it is required(dynamically loading of js file). Having js file in index.html is an easy way out & it should be used when that js file is necessary when the application is loading.Otherwise you should the other js when they are going to be used(in different componnets as per the requirement. )

answered Jul 26, 2017 at 6:21

Kamaal

615 bronze badges

5 Comments

empire29 Over a year ago

Can you point me to how to do this with NG2? It seems NG2 is automatically injecting those includes into my index.html at build.

empire29 Over a year ago

Also - can deployUrl be env specific (if deploy my NG App to my web platform, i need it to be /custom/xxx.bundle.js, however if i build it for a standalone (ex. mobile app) i'd want it to be /xxx.bundle.js

Kamaal Over a year ago

Yea. I have described the steps for dynamic loading the scripts in another thread. Here is the link of that. stackoverflow.com/questions/45294322/…

empire29 Over a year ago

are these the "core" application JS files required to load the app (as produced by the ng build). How/why would i be able to lazy load them in? Other/supporting JS i can understand (ex. moment.js) but the core app JS seems like it MUST be loaded together?

Kamaal Over a year ago

Yes exactly, You should load core js in index file & all others js such as datatables, moment , bootBox js dynamically.

Collectives™ on Stack Overflow

Changing index.html generation in Angular2

2 Answers 2

2 Comments

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related