In IE11: Icon shows up in home page on load but when I navigate to other pages, rendered icon is replaced by default IE icon.
In Chrome: It works fine and icon is rendered on all routes.
Here are some of approaches I tried by referring to articles in Medium, stack overflow etc., which wasn’t not helpful.
I tried to keep absolute path(to test this in local), server name at different instances in index.html but it didn’t worked.
Also, I replaced base64 code of image and server url in above href attribute so it can access/locate favicon.
I added paths in assets array of angular.json file
"assets": [
"src/assets",
"src/locale",
"src/assets/favicon32x32.png",
"src/assets/favicon16x16.png",
"src/assets/favicon32x32.ico",
"src/assets/favicon16x16.ico"
]
I tried to modify base url in index.html and CLI didn’t build. Also, I tried modify polyfill.ts and installed npm package.
I inspected other angular apps/website by opening in IE11(e.g., angular.io or gmail.com). here too problem exists.
Kindly please help/guide me in resolving above issue. Also, please let me know which approach should I take or refer to, to get to the solution.
Here is my html metadata inside head tag inside index.html
<!DOCTYPE html>
<script></script>
<html>
<head>
<base href="/" />
<title>AB CORP</title>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<link rel="icon" href="/src/assets/images/favicons/favicon-16x16.ico" sizes="16x16" type="image/x-icon" media="all" />
<link rel="icon" href="/src/assets/images/favicons/favicon-32x32.ico" sizes="32x32" type="image/x-icon" media="all" />
</head>
<body class="ls">
<app>
<div class="lf-splash">
<div class="lf-message">Loading, please wait...</div>
<i class="fa fa-spinner fa-spin"></i>
</div>
</app>
</body>
</html>
Related
So I have a full featured (Routing etc) Vue 3 app that I need to embed on random page somewhere, but I don't want to use an iframe for various reasons so I'm looking to achieve this using Shadow DOM and Custom Element.
The way I thought it would work:
✅ Build the Vue App
✅ Publish the dist folder
✅ Create a Custom Element
✅ Create Shadow DOM in the constructor
✅ Load dist/index.html
❌ Vue App renders in Shadow DOM
... except it doesn't. Everything technically works but the Vue app doesn't render at all.
What am I missing?
My attempt: https://stackblitz.com/edit/javascript-7trm5i?devtoolsheight=33&file=index.html
Edited to add:
Same result even if I deploy the app to a service like Vercel and use it as src.
This is not a right way to do it. You are using fetch to get the HTML page. The HTML page has following script and style tags:
<!DOCTYPE html>
<html lang="en" data-theme="bumblebee">
<head>
<meta charset="UTF-8" />
<link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vue Cart</title>
<script type="module" crossorigin src="/assets/index.0f5a3d92.js"></script>
<link rel="modulepreload" href="/assets/vendor.ab0eb239.js">
<link rel="stylesheet" href="/assets/index.8fd7686d.css">
</head>
<body>
<div id="app"></div>
</body>
</html>
Look at this script: <script type="module" crossorigin src="/assets/index.0f5a3d92.js">.
When this tag is added via innerHTML, the browser will try to find the index.0f5a3d92.js file using the domain from which you are serving the main page. It is not asking the domain from where you are getting this HTML. Ideally, it should be this:
https://vue-cart-ayoc0w7nv-eozzy.vercel.app/assets/index.0f5a3d92.js
But it is making call to this:
https://stackblitz.com/assets/index.0f5a3d92.js
You will have to rewrite the src attribute before you add it to HTML.
On a side note, this is an anti-pattern on what you are trying to do. Web component is not a real substitute for iFrame. Plus, a page should have only one top level head tag. You are introducing multiple head and body tags here. Browser will silently handle it but it is still anti-pattern.
The right way to do this is to bundle your Vue application with custom element definition. Then upload this bundled script to some CDN. From there, add it as a script on the page and the element should render when browser encounters the custom element.
You can not have multiple html, body, head tags in single document, so the html parser ignores the html, head and body tags of the Vue app.
Before:
<!DOCTYPE html>
<html lang="en" data-theme="bumblebee">
<head>
<meta charset="UTF-8" />
<link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vue Cart</title>
<script type="module" crossorigin src="https://vue-cart-ayoc0w7nv-eozzy.vercel.app/assets/index.0f5a3d92.js"></script>
<link rel="modulepreload" href="https://vue-cart-ayoc0w7nv-eozzy.vercel.app/assets/vendor.ab0eb239.js">
<link rel="stylesheet" href="https://vue-cart-ayoc0w7nv-eozzy.vercel.app/assets/index.8fd7686d.css">
</head>
<body>
<div id="app"></div>
</body>
</html>
After parsing:
<meta charset="UTF-8" />
<link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vue Cart</title>
<script type="module" crossorigin src="https://vue-cart-ayoc0w7nv-eozzy.vercel.app/assets/index.0f5a3d92.js"></script>
<link rel="modulepreload" href="https://vue-cart-ayoc0w7nv-eozzy.vercel.app/assets/vendor.ab0eb239.js">
<link rel="stylesheet" href="https://vue-cart-ayoc0w7nv-eozzy.vercel.app/assets/index.8fd7686d.css">
<div id="app"></div>
So ultimately the html structure changes from the original one which Vue Virtual DOM can not work with.
So I don't think you can use Shadow DOM like an iframe.
I am trying to host my angular app into my OpenLiteSpeed but I am not getting anything.
To create the app for production I use: ng build --prod, automatically it creates all the files I need in the dist folder.
Next, I move all these files to my root folder on the server.
Finally, I check if the webpage is working but it doesn't shows anything just the blank page!
The HTML code for the index is:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>ConFusion</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link rel="stylesheet" href="styles.c3adc567aae88948c2ab.css"></head>
<body>
<app-root></app-root>
<script src="runtime.acf0dec4155e77772545.js" defer></script><script src="polyfills.35a5ca1855eb057f016a.js" defer></script><script src="main.9a959de356bd26498a0e.js" defer></script></body>
</html>
How can I set deployment path in Svelte?
I would like to use it on the webserver in different path like
https://example.com/somewhere-else/index.html
But now right after i run npm build, I must use it like:
https://example.com/index.html
It must be something in the rollup.config.js but I cannot find it out.
I imagine you are using the standard svelte template?
https://github.com/sveltejs/template
The bundles it creates are not restricted to a specific path. You just need to put them in the appropriate path and update the link and script tags in the index.html file appropriately:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset='utf-8'>
<meta name='viewport' content='width=device-width,initial-scale=1'>
<title>Svelte app</title>
<link rel='icon' type='image/png' href='/favicon.png'><!-- change this -->
<link rel='stylesheet' href='/global.css'><!-- change this -->
<link rel='stylesheet' href='/build/bundle.css'><!-- change this -->
<script defer src='/build/bundle.js'></script><!-- change this -->
</head>
<body>
</body>
</html>
Does this answer your question, or is your problem more complicated?
[link for the css]:https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/style.css
[link for javascript code file]:https://github.com/mdn/learningarea/blob/master/html/introduction-to-html/the-html-head/script.js
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>Meta examples</title>
<meta name="author" content="Chris Mills">
<meta name="description" content="This is an example page to demonstrate usage of metadata on web pages.">
<meta property="og:image" content="https://developer.cdn.mozilla.net/static/img/opengraph-logo.dc4e08e2f6af.png">
<meta property="og:description" content="This is an example page to demonstrate usage of metadata on web pages.">
<meta property="og:title" content="Metadata; The HTML <head>, on MDN">
<link rel="Shortcut Icon" href="favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Meta examples</h1>
<p>Japanese example: ご飯が熱い。</p>
<script src="script.js"></script>
</body>
</html>
When I was trying to run the above HTML code, the output just shows this
Meta examples
japanese example:???
I was trying to learn to become a front-end developer, so I just started with HTML where I got struck in this. Please anyone help me with this.
The above HTML document does not consider the CSS and Javasricpt file even though it is presented in the same directory. I also tried it with different browsers.
Please provide correct path in the src attribute of your link tag and it should work.
Check:
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>Meta examples</title>
<meta name="author" content="Chris Mills">
<meta name="description" content="This is an example page to demonstrate usage of metadata on web pages.">
<meta property="og:image" content="https://developer.cdn.mozilla.net/static/img/opengraph-logo.dc4e08e2f6af.png">
<meta property="og:description" content="This is an example page to demonstrate usage of metadata on web pages.">
<meta property="og:title" content="Metadata; The HTML <head>, on MDN">
<link rel="Shortcut Icon" href="favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/the-html-head/style.css">
</head>
<body>
<h1>Meta examples</h1>
<p>Japanese example: ご飯が熱い。</p>
<script src="https://github.com/mdn/learningarea/blob/master/html/introduction-to-html/the-html-head/script.js"></script>
</body>
</html>
I'm trying to use font awesome for some icons, and am doing this by using the CDN.
I simply copied my font awesome embed code in the of my page, as instructed.
<script src="https://use.fontawesome.com/4c5806874b.js"></script>
But when I open the page, it tells my that webfontloader.js failed
Any ideas what goes wrong here?
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Brighton Times</title>
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="main.css">
<link rel="stylesheet" media="(max-width: 400px)"type="text/css" href="smallest-screens.css">
<script src="https://use.fontawesome.com/4c5806874b.js"></script>
</head>
If I understand this correctly, You're trying to use to load some fonts - try using the following link
https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css
if you want to see the output in HTML follow - i class and it should work.
Somewhere in your code, You have given a wrong path. ex:font-face url etc.
keep in mind,
<img src="Lanka.jpg"> <!-- Lanka.jpg is in the current folder -->
<img src="Asia/Lanka.jpg"> <!-- Lanka.jpg is in the Asia folder -->
<img src="/Asia/Lanka.jpg"> <!-- Asia folder is in root folder -->
<img src="../Lanka.jpg"> <!-- Lanka.jpg is in one folder up from current folder-->