I created a jhipster ui only angular 6 app.
I now want to add a script to index.html:
<head>
...
<script src='widgets/widgets.js'></script>
</head>
When I run the index.html is copied to the build/www directory fine, but in the app my script tag or any other changes are not there.
Seems that webpack does not use my new version.
How do I get webpack to use the changed template?
You have to use webpack in order to achieve the script tag injection.
Add your script to the entry points of webpack in the entry property located in webpack.dev.js (or prod) file, then add the related key inside the chunks array of the HtmlWebpackPlugin (it is located in webpack.common file).
This should inject the script tag inside your index.html
Related
I'm crating application in angular with SSR
How do I apply <link rel="preload" href="/styles.css" as="style" /> to head section or Link header in order to preload/prefetch whole styles.css file?
Using plain styles.css is not enoug as production build generate file that contains random characters like styles.7541caaaab536370.css (different in every build)
Googling about preloading and prefetching in angular only results in preloading components/modules and I'm out of ideas
You can include the styles.css file in the assets folder. This will prevent the angular build process from "fingerprinting" the file and the resulting build file will simply be named styles.css allowing you to reference it directly from your index.html.
I am using vite purely as dev server with a backend server that does the file serving for me and has no connection to vite itself. My vite application lives under nested path. Thats why I set the base-url as specified in the config to '/my/path/'. This works well and everything is served correctly.
Once I run build, it creates a dist folder with a manifest file. My index HTML that is served by the backend server either includes the vite devserver in dev more or loads the main.ts as specified by the maninifest.json { "src/main.ts": { "file": "assets/main.b3ed3483.js", ...}}. Therefore my index HTML looks somewhat like this:
<?php if($dev): ?>
<script type="module" src="http://localhost:3000/#vite/client"></script>
<script type="module" src="http://localhost:3000/src/main.ts"></script>
<?php else: ?>
<?php $entry = parseJson('dist/manifest.json'); /* pseudocode */ ?>
<link rel="stylesheet" href="/my/path/dist/<?= $entry.css[0] ?>" />
<script type="module" src="/my/path/dist/<?= $entry.file ?>"></script>
<?php endif ?>
Now, I have the problem, that whenever a module is imported, it tries to load it from /my/path/assets instead of my/path/dist/assets. I tried changing the basepath to /my/path/dist/ but now obviously the path arent resolved in dev correctly. What do I have to do to make this work?
I am not sure if I completely understand the src paths in your script tags but I think this should work, though you might need to make some changes to make your src paths match.
Option one: If you are using linux, I would create a symbolic link from /my/path/ to/dist/assets/ e.g. ln -s -r ./dist/assets/ assets (-s for symbolic link and -r for relative links). This will provide two paths to the same directory, one from /my/path/assets and one from /my/path/dist/assets/.
Option two: use a relative base path i.e. set base in your vite config to ''. Note: in vite 2.x there is an issue where if you have multiple entry points the asset path will be incorrect. There is a fix merged for vite 3.0.
where I link index.js
<script src="/assets/js/index.js"></script>
Folder Directory is such
assests
-css
--style.css
-js
--index.js
enter image description here
Error Im getting
index.html:25 GET file:///assets/js/index.js net::ERR_FILE_NOT_FOUND
I guess you are using an express app(by the tag in question). The static resources such as your javascript, css, images, etc. should be inside the public folder which gets served on running the application. Could you try moving the assets folder inside the public folder and then have a script tag pointing to that resource.
Maybe it helps to remove the first slash:
<script src="assets/js/index.js"></script>
Or startend with a dot
<script src="./assets/js/index.js"></script>
I have new in sails.js . In layout.js in views files I have script tags like this.
<script src="/js/bootstrap.min.js"></script>
<script src="/js/jquery.countTo.js"></script>
<script src="/js/jquery.easing.1.3.js"></script>
<script src="/js/jquery.min.js"></script>
If I have changed the file and move the file jquery.min.js to the top and compile usings sails lift.
Then my layout.js changed and file remain same.
Every script between
<!--SCRIPTS-->
<!--SCRIPTS END-->
will get modified automatically by the grunt task which will parse your assets folder and put reference to every script it finds there overwriting your file. If you wish to put your script above all else, modify your pipeline.js file in the tasks folder - look for the variable jsFilesToInject and put your jquery.min.js file above all else or just move that file into /js/dependencies/jquery folder in your project.
I have just started a new brunch.io project using the brunch-with-brunch skeleton (I just want a local server able to display native HTML/CSS/JS).
I have created two files on my own : index.html located in public/ containing the standard doctype, head and body tags plus a script tag referencing the app.js generated by brunch located at public/javascripts/app.js as below :
<script type="text/javascript" src="javascripts/app.js"></script>
As specified by the README.md file located in the app/ directory, I write my applications-specific files in the app/ directory. So I have on file named app.js located in app/ and containing :
console.log("OK");
I start the server with the command :
brunch watch --server
The problem is that I don't see anything in the js console (the server is running at localhost:3333), despite the facts that the html is rendered and the public/javascripts/app.js (generated by brunch) contains these lines (among others) :
require.register("app", function(exports, require, module) {
console.log("ok");
});
What's going on ?
EDIT : The javascript directly written in the html script tag works fine.
Brunch wraps all files by default in module definitions (require.register). So, the console.log is not executed ASAP.
So, you will need to load the entry point in your index.html: <script>require('app')</script>
Module definitions can be disabled.