Menu
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" }
]
540
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 tage 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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
