How to include script to head in angular.json

Question

I would like to import aframe in the <head> tag using the angular.json config as a separate bundle.

Inside angular.json I have the script to import from my node_modules:

"scripts": [
    "node_modules/aframe/dist/aframe-v1.0.0.min.js"
]

This is bundled and imported at the bottom on the html body.

<body>
    <app-root></app-root>
    ...
    <script src="scripts.js" ...>
</body>

This is not desirable as the library specifically requests that I import in the <head>.

Additionally, I would like to import it as a separate bundle:

"scripts": [
  { "input": "node_modules/aframe/dist/aframe-v1.0.0.min.js", "bundleName": "aframe-v1.0.0.min" }
]

score 23 · Accepted Answer · edited Jan 04 '23 at 12:45

23

you can add the script reference to angular.json like this as example include jquery library

"scripts": [
   {
    "input": "node_modules/jquery/dist/jquery.min.js",
    "inject": false,
    "bundleName": "jquery"
   }
]

then set inject to false will not injected the script to index.htm, finaly we just set a name for bundleName this way the script will not bundle with other script file and will be standalone file , and now you can add the script tag to the header tag

update the index.html and include the script tag at the header

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>Portfolio</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <script src="jquery.js"></script> <!--  -->
</head>

<body>
  <app-root></app-root>
</body>

</html>

edited Jan 04 '23 at 12:45

Sylvain Rodrigue

4,751
5
53
67

answered Dec 19 '19 at 20:46

Muhammed Albarmavi

23,240
8
66
91

I am able to achieve this given my current setup, but the goal is to import the scripts in the `head`. – Dan Dec 19 '19 at 21:18
why do you want to put the script in the head tag ?? – Muhammed Albarmavi Dec 19 '19 at 21:19
> the library specifically requests that I import in the . – Dan Dec 19 '19 at 21:21
1

I have update the answer simple just set inject to false and you need to update the index.html file and put a script tag to the header – Muhammed Albarmavi Dec 20 '19 at 13:40
Thank you! I have tested your solution and it works perfectly. – Dan Dec 20 '19 at 18:18
@Dan happy to help – Muhammed Albarmavi Dec 20 '19 at 18:20
This is no longer working it says inject is not allowed – Shyamal Parikh Aug 16 '20 at 05:47
Thanks for the answer, it worked for me while loading jquery – Ravi Agheda Apr 29 '23 at 05:32

score -1 · Answer 2 · answered Dec 19 '19 at 20:41

-1

You can use a service to inject it in the head.

This answer can help you : https://stackoverflow.com/a/44016611/8573150

answered Dec 19 '19 at 20:41

lovis91

1,988
2
14
24

you are right but like this the script will load after the main script is loaded m in my answer the script will place before the main script and will load before it – Muhammed Albarmavi Dec 19 '19 at 20:56

How to include script to head in angular.json

2 Answers2

Linked