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.
Related
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 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
I have downloaded the Metro CSS via Bower by including it in the Bower.json file:
"metro-ui-css": "3.0.13"
This appears to install the Metro stuff under /wwwroot/lib/metro-ui-css/build/css and also /fonts and /less folders.
I have included the following references in my _Layout.cshtml file:
<environment names="Development">
<link rel="stylesheet" href="~/lib/metro-ui-css/build/css/metro.css">
And under the <head> section::
<environment names="Development">
<script src="~/lib/metro-ui-css/build/js/metro.js"></script>
But no matter which Metro class I try to include in a View .cshtml file the Classes will not appear. Any idea what I am doing wrong and how I can get them to display?
Many thanks
Create a new Bundle
In the 'App_Start' folder of your solution, find the 'BundleConfig.cs' file and open it. Here you can add a new bundle, for example:
bundles.Add(new ScriptBundle("~/bundles/metroJs").Include(
"~/Scripts/metroJs.js"));
bundles.Add(new StyleBundle("~/Content/metroJs").Include(
"~/Content/metroJs.css"));
Your paths to the .js and .css files may be different, however this may also be correct.
Once you've done that, go back to your '_Layout.cshtml' file and at the bottom you'll more than likely already have some '#Scripts.Render()'. Just add one with the name of the new bundle you just created like so:
#Scripts.Render("~/bundles/metroJs")
#Styles.Render("~/Content/metroJs")
I tried to look for some info related to bundling, tried different scenario with the same result: doesn't work!
Here is the project structure:
..........
Content
css
style.css
fonts
images
.........
Scripts
Plugin1
src
css
style1.css
js
js1.js
Plugin2
src
css
style2.css
js
js2.js
Plugin3
src
css
style1.css
js
js2.js
somejs.js
someotherjs.js
case 1 - works
bundles.Add(new StyleBundle("~/Content/css").Include(
"~/Content/css/style.css"));
case 2 - doesn't work
bundles.Add(new StyleBundle("~/js/style").Include(
"~/Scripts/Plugin1/src/css/style1.css",
"~/Scripts/Plugin2/src/css/style2.css",
"~/Scripts/Plugin3/src/css/style3.css"));
My question is, how can I bundle my css from different folders in one single bundle? I know that if the styles are all in the same folder then will work.
Does this have to do anything with the path itself? Does the name of the bundle ... new StyleBundle("~/js/style").. must match the actual location of the css files (folder structure)?
When the page loads in the page source there is missing the bundle key for the one that doesn't work while for the other one is present:
<link href="/js/style?v=" rel="stylesheet"/>
<link href="/Content/css?v=z_NN8-Oubjqwg7jFATA50T7SzahDLay9Fi3Lti_eSJ81" rel="stylesheet"/>