I have an issue with angular2-seed app where it can't seem to render my css when i put it in index.html
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<base href="<%= APP_BASE %>">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title><%= APP_TITLE %></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- inject:css -->
<link rel="stylesheet" href="css/material.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<!-- endinject -->
</head>
<body>
<div class="mdl-badge">Hello</div>
<sd-app>
<div class="mdl-spinner"></div>
</sd-app>
Im pointing to the correct path to the css file but when i use any class, it just doesn't render at all
I tried <link rel="stylesheet" href="../../node_modules/material-design-lite/material.css"> which shouldn't make any difference, but got the same result
Edit
Here's how my project looks like, I've moved the css and js to the src, hope its clearer now
Your help is much appreciated.
This has nothing to do with Angular. The path to your css/material.css must be incorrect.
You need to have a /css directory in the same directory you're hosting your web server from. So if your project is in /myproject you need to have a /myproject/css folder.
The path MUST be relative to your root folder. If it isn't, then css/material.css will not work, because without a / forward slash at the beginning, the root is relative to the current folder.
As was mentioned in the comments, you can enter the exact path into your address bar in the browser to see if that css file will load. If it doesn't, you've got a path issue. This can most likely be resolved by appending ../ to travel down a directory, or appending / to make the path absolute to the root of the web server.
Related
My html structure is like below, and the folder path is correct:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Application</title>
<link rel="stylesheet" type="text/css" href="../app/assets/appStyle.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.6/semantic.min.css">
<link rel="text/javascript" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.6/semantic.min.js">
</head>
When I try the pages from the browser, they work. However, when I try them from localhost, it does not load css or the minified semantic ui. Could anybody help please? I have been struggling with this for 3 hours. Any help or hint is appreciated.
EDITED: I have a function like below, for routing in my app.js file. Can it be a reason?
// Make the user route to application.html
app.get('*',function(req,res){
res.sendFile(path.join(__dirname + '/public/pages/application.html'));
});
I think problem is here
<link rel="stylesheet" type="text/css" href="../app/assets/appStyle.css">
If you want to check that stylesheet is working properly, right click
the browser and click View page source.
Click the stylesheet link and check is it load the stylesheet
correctly.
If it is not working properly check your path and correct that.
You are using <link> tag for Javascript. <link> tag is not supported by browsers to load JS.
Please refer to this StackOverflow question: Can I load javascript code using <link> tag?.
<link rel="text/javascript" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.6/semantic.min.js">
Use script tag to load JS.Try replacing above lines with:
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.6/semantic.min.js"></script>
Let me know if this works.
I have an issue with a website I built from angular. In index.html, there are references to javascript files, but my problem is this: in the HTML, the paths are relative to the file but the browser looks for the files in the root dir:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>RasaBE</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<!-- <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
-->
</head>
<body>
<app-root></app-root>
<script type="text/javascript" src="inline.bundle.js"></script><script type="text/javascript" src="polyfills.bundle.js"></script><script type="text/javascript" src="styles.bundle.js"></script><script type="text/javascript" src="vendor.bundle.js"></script><script type="text/javascript" src="main.bundle.js"></script></body>
</html>
This works fine when everything is in the root folder of my website, but I wanted to have everything in a subfolder /bo/. So index.html is in localhost/bo/index.html and so are all the scripts. Since it's a relative path in the code I'd expect my browser to look for localhost/bo/script.js, but instead it looks for localhost/script.js.
A screenshot to show what's wrong:
I tested this in Chrome and I have the same issue. It's a bit complicated to change the paths directly since it's compiled from angular, and I'd probably have to change it every time it compiles. Is this an issue with Firefox and the way it deals with relative paths?
I should also add that host/bo/inline.bundle.js exists and can be found by the browser but the it looks for it in the root folder instead of the same folder as index.html.
This "base" element sets the default location for the page.
Remove
<base href="/">
OR
<base href="/bo/">
If you want your Angular Webapp run from every subfolder without touching the code
Change
<base href="/">
To
<base href=".">
Removing the "base" element won't work since Angular throws then an error complaining about the missing element.
It turns out it was all because of the tag that is added by angular, editing it to <base href="/bo/"> makes it work. since it's just one line to change I consider it fixed.
I am trying to user carbon component in my angular application.
I included the given scss "../node_modules/carbon-components/scss/globals/scss/styles.scss" in my angular-cli file.
Now I am trying to use Modal in my component class as suggest here. but it's not working.I am unable to use Modal custom event in angular component file.
I am stucked from 2 days now I am reading library. If anyone have experience of Carbon Component.Please suggest...
You can provide CDN links in your index.html
CSS https://unpkg.com/carbon-components/css/carbon-components.min.css
ES5 https://unpkg.com/carbon-components/scripts/carbon-components.min.js
as shown here.
example:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>SignupFormProject</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link rel="stylesheet" type="text/css" href=" https://unpkg.com/carbon-components/css/carbon-components.min.css">
</head>
<body>
<script src="https://unpkg.com/carbon-components/scripts/carbon-components.min.js"></script>
<app-root></app-root>
</body>
</html>
Google Tag Manager instructs developers to:
Paste this code [THE TRACKING CODE] as high in the <head> of the page
as possible:
<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': new
Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXXXXX');</script> <!--
End Google Tag Manager -->
My question is, how high can that code be properly placed? Properly meaning, able to function on >95% of browsers without issues/warnings/errors, and/or according to HTML best practices.
Can it go right after the opening <head> tag? Does it really matter as long as it is in the <head> section somewhere?
For reference/example, below is the HTML boilerplate. What's the best spot for the tracking code in the boilerplate?
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="manifest" href="site.webmanifest">
<link rel="apple-touch-icon" href="icon.png">
<!-- Place favicon.ico in the root directory -->
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<!--[if lte IE 9]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please upgrade your browser to improve your experience and security.</p>
<![endif]-->
<!-- Add your site or application content here -->
<p>Hello world! This is HTML5 Boilerplate.</p>
<script src="js/vendor/modernizr-{{MODERNIZR_VERSION}}.min.js"></script>
<script src="https://code.jquery.com/jquery-{{JQUERY_VERSION}}.min.js" integrity="{{JQUERY_SRI_HASH}}" crossorigin="anonymous"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-{{JQUERY_VERSION}}.min.js"><\/script>')</script>
<script src="js/plugins.js"></script>
<script src="js/main.js"></script>
<!-- Google Analytics: change UA-XXXXX-Y to be your site's ID. -->
<script>
window.ga=function(){ga.q.push(arguments)};ga.q=[];ga.l=+new Date;
ga('create','UA-XXXXX-Y','auto');ga('send','pageview')
</script>
<script src="https://www.google-analytics.com/analytics.js" async defer></script>
</body>
</html>
The reason why Google recommends putting it as high up as possible is primarily to improve accuracy in tracking. The higher up in the page the snippet is, the faster it is loaded. Placing the snippet lower in your page, can potentially miss tracking users who left your page before the code was loaded. It can also cause to mistakenly report a site visitor that navigated away from your homepage before the code was loaded as a direct visitor to the page the user navigated to.
It is also important with Google’s A/B testing tool, Optimize. Having the snippet load faster ensures that Optimize will load the correct version of the page as soon as possible.
However, there are other factors you might want to consider, as discussed here: What are best practices to order elements in <head>?. For example:
...For this reason, HTML5 specifies that any meta tag which is used to specify the character set (either <meta http-equiv="Content-type" content="text/html; charset=..."> or simply <meta charset=...>) must be within the first 1024 bytes of the file in order to take effect. So, if you are going to include character encoding information within your document, you should put the tag early in the file, possibly even before the <title> element.
So although you can put your tracking code snippet immediately following the opening head tag, you might want to consider putting it after the most important meta tags. Those tags generally don't take long to load, and won't hold off your tracking code much.
But yes, it does matter where in the head you put your tracking code for the reasons mentioned above. So if you'll be loading many scripts, stylesheets, etc., then put your tag manager code higher up rather than just dropping it at the end.
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Tracking Code -->
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
Google Tag Manager isn't dependent on any plugins, and runs in raw JavaScript. In order to prevent conflict, it should be placed as high as possible in the <head> tag.
Considering it's self-contained and doesn't have any conflicts, it's perfectly safe to place it right after <head>, before any <meta> tags. Google's search algorithm will read the entire DOM in an attempt to find your <meta> tags, so they don't need to be the first things in the <head> section.
In your above example, I would recommend placing your Google Tag Manager code in between <head> and <meta charset="utf-8"> (which is where I normally place it on my own sites).
In addition to this, don't forget the noscript equivalent, which allows Google Tag Manager to run in the case of JavaScript being disabled on the page. This should be placed directly after your <body> tag:
<noscript>
<iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXXX" height="0" width="0" style="display:none;visibility:hidden"></iframe>
</noscript>
Hope this helps! :)
I am new to HTML and programming and hope someone can help me with this.
I have written the code for the first pages of my website and am now about to upload these to the server for a test.
Therefore I would like to know if the basic structure of my documents is correct and would like to get some comments on the following:
Should I add or change anything regarding my document's head ?
Do I include the external style sheets the right way and at the
right position + is it correct to start the href with "/" here ?
(I read CSS should be included before JS for
better performance.)
Do I include the external JS and jQuery references the right way and
at the right position ?
(I read JS should be included at the end of the body for better performance.)
Notes:
All PHP / HTML pages of my website are saved as separate files in the same folder.
This folder also contains a sub folder "includes" where my stylesheet and functions file are saved.
My HTML structure:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="author" content="John Doe" />
<meta name="description" content="Created: 2015-06" />
<base href="http://www.myURL.com/" target="_self" />
<!-- jQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js" type="text/javascript"></script>
<!-- CSS -->
<link rel="stylesheet" type="text/css" href="includes/styles.css" />
<!-- CSS - Font Awesome -->
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" />
<title>My Page</title>
</head>
<body>
<!-- ... -->
<footer class="footer">
<!-- ... -->
</footer>
<!-- JavaScript -->
<script src="includes/functions.js" type="text/javascript"></script>
</body>
</html>
Many thanks in advance,
Mike
Looks good. Just a couple of minor things:
You should add <meta http-equiv="X-UA-Compatible" content="IE=edge"> to ensure you don't get any MSIE compatibility mode issues.
You may add favicon definitions in the head.
Yes, stylesheets belong in the head. The href depends on where you are storing the css files.
If you want to include a stylesheet in the same folder as your HTML file, use href="styles.css"
If you want to include a stylesheet in another folder, e.g. [css] folder, use href="css/styles.css"
If you have HTML files in various folders and you don't want to rewrite your hrefs all the time for each HTML file, you can start the href with a slash to indicate search should start from the "root" of the server, e.g. href="/css/styles.css"
Move ALL your JS (including jQuery) to the bottom of the page, just before the closing body tag. Unless there's a very strong reason why you need JS to run before the page starts displaying, you should not have JS in the head.
There are a lot of things to learn, but it can be very fun and rewarding. Hope you have an enjoyable programming experience ahead. :)