I purchased a template which includes HTML, CSS, and Javascript files for a static webpage. I'm trying to use these existing files in my Angular project so I can connect it with a Nodejs app to make it a full stack webpage with backend. However, when I tried to put these files into Angular, everything is broken and is not functioning as it would when I manually open the HTML files on Chrome.
I've tried creating components for each HTML pages and adding the CSS and Javascript files into assets folder. Then I went on angular.json and added each CSS files into the styles array and the Javascript files into scripts array.
The HTML files look something like this:
<!doctype html>
<html lang="en">
<head>
<!-- Basic Page Needs
================================================== -->
<title>Hireo</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="../../../assets/css/style.css">
<link rel="stylesheet" href="../../../assets/css/colors/blue.css">
</head>
<body>
.........body code...........
<!-- Scripts
================================================== -->
<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/jquery-migrate-3.0.0.min.js"></script>
<script src="js/mmenu.min.js"></script>
<script src="js/tippy.all.min.js"></script>
<script src="js/simplebar.min.js"></script>
<script src="js/bootstrap-slider.min.js"></script>
<script src="js/bootstrap-select.min.js"></script>
<script src="js/snackbar.js"></script>
<script src="js/clipboard.min.js"></script>
<script src="js/counterup.min.js"></script>
<script src="js/magnific-popup.min.js"></script>
<script src="js/slick.min.js"></script>
<script src="js/custom.js"></script>
</body>
</html>
Anything you put in your assets folder will be available to the application, just remember to provide the relative/absolute path including assets.
If you have files in other folders or have specific errors (e.g. in the Network tab in Dev Tools), please provide more details that so I can advise. Until then, you can find most common solutions in https://lukasznojek.com/blog/2019/03/angular-cli-different-ways-to-include-assets/.
In your angular.json file add the static .html files to the assets array with their respective paths. You can then access the files i.e www.your-domain.com/your-static-file.html
Related
I wrote a .html file that uses css(style.css) and javascript(app.js).
When I transferred the folder containing the index.html,style.css and app.js over to my android internal memory,the browser runs the html file but my .css and .js files are not detected.
<!DOCTYPE html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<head>
<link href="style.css" rel="stylesheet" >
</head>
<body>
....
</body>
<script src="app.js" charset="utf-8"></script>
I have tried using "/style.css" and "./style.css".
But none of them are helping in detecting the files.
Inline styles in the index.html file work fine and show up in my browser.
Using Chrome on Android 8.1.0 (MIUI 10.1|Stable)
You can load your files somewhere in your device like this :
file:///storage/emulated/0/MyDirectory/index.html
file:///storage/emulated/0/MyDirectory/style.css
file:///storage/emulated/0/MyDirectory/app.js
And then try to address thoes in src and href.
For testing purposes you can also use applications that let you run local servers on your device, like this one: https://play.google.com/store/apps/details?id=com.esminis.server.apache
My css and Javascript are not showing when I open my file in browser via folder. My files are in the same folder which is a subfolder of subfolders
I have tried renaming files.
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:600,700" rel="stylesheet">
<title>A simple calculator</title>
</head>
<script src="calc.js"></script>
You can use ./ to indicate that the css and js files are in the same directory or to indicate the current directory. This would be relative path for the css and js files.
<html>
<head>
<link rel="stylesheet" type="text/css" href="./style.css">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:600,700" rel="stylesheet">
<title>A simple calculator</title>
</head>
<body>
<script src="./calc.js"></script>
</body>
</html>
First of all , you want to identify,where those css files and javascript files are located.That means which folders contains particular css files and javascript files. when you integrating css files and javascript files with main html page , set the path to particular css or javascript file from current directory.if particular files are in same level with your current working directory , initialize the path to particular directory.At the same time id you working directory and particular directory are in deferent levels , at first go to particular directory level and initialize the path.(if you want to go previous(back) directory , ' .' can be used.
ex - if you want to go back 1 level './' can be used. if you want to go back two levels of directory '../' can be used.).I hope, you got the idea. cheers !
In order to run uncss to remove unused css rules I need to generate a single page containing all the the css rules used by the angular templates. I think Rendertron might fit this usecase, but was wondering whether it's possible to do the same with the Angular CLI?
For example if we run ng build angular will generate a dist/index.html file with the custom element selectors in the dist/index.html file. However this cannot be targeted with uncss because the template has not been rendered. It is still represented by for example <app-root>, thus uncss cannot see the css rules applied by the <app-root> template.
Yes, by default all the compiled CSS and js files will be generated into dist folder via angular cli.If required, you can configure this using angular-cli.json present in your project. As you can see in below sample of index.html, it contains the path for all the css and JS files. Usually it creates one css file, as it's good to load entire css in one request.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>My APP</title>
<base href="/">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link href="styles.3e523e6b74c68b0940ab.bundle.css" rel="stylesheet" />
</head>
<body>
<app-root></app-root>
<script type="text/javascript" src="inline.5d1afc94d5922f9e85f3.bundle.js"></script>
<script type="text/javascript" src="polyfills.45da1a3263e1321501bf.bundle.js"></script>
<script type="text/javascript" src="scripts.4d46a754e6ffe4a0ff23.bundle.js"></script>
<script type="text/javascript" src="main.cec0d2d86e8c98d02873.bundle.js"></script>
</body>
</html>
You can also instruct cli to separate any vendor specific CSS/js into separate files. Follow the link to know more about configuration.
Since, you would be specifying all your css and js in uncss, so you can go with dist folder content.
I'm testing React-boilerplate and I'm trying to load some javascript files in the app/index.html file:
<!doctype html>
<html lang="en">
<head>
<!-- The first thing in any HTML file should be the charset -->
<meta charset="utf-8">
<!-- Make the page mobile compatible -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Allow installing the app to the homescreen -->
<link rel="manifest" href="manifest.json">
<meta name="mobile-web-app-capable" content="yes">
<script type="text/javascript" src="myJScriptFile1.js"></script>
<script type="text/javascript" src="myJScriptFile2.js"></script>
</head>
<body>
<!-- Display a message if JS has been disabled on the browser. -->
<noscript>If you're seeing this message, that means <strong>JavaScript has been disabled on your browser</strong>, please <strong>enable JS</strong> to make this app work.</noscript>
<!-- The app hooks into this div -->
<div id="app"></div>
<!-- A lot of magic happens in this file. HtmlWebpackPlugin automatically includes all assets (e.g. bundle.js, main.css) with the correct HTML tags, which is why they are missing in this HTML file. Don't add any assets here! (Check out webpackconfig.js if you want to know more) -->
</body>
</html>
This is the default index.html file. I'm running it with npm or yarn and the server console shows me no error, but my browser console keeps telling me:
Uncaught SyntaxError: Unexpected token <
Just like this, there is no more error. These javascript files work fine because I'm using them into another React based project, and I'm calling them into the index.html file as well. The console prints that error per file. If I trace the error it leads me to the correspond .js file.
After almost a week searching the web I couldn't find a solution. So that's it, does anybody have any idea on how to solve this?
Well, I'm answering myself. I needed a little bit more of research in webpack. I achieve this through webpack:
installed npm i add-asset-html-webpack-plugin -D
then, in the webpack config file, under plugins I added:
new AddAssetHtmlPlugin({ filepath: require.resolve('./some-file') })
and that's it.
This is frustrating, I'm trying to load a simple script inside my index.html but I get 404.
index.html
<head>
<meta charset="utf-8">
<title>Login</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root></app-root>
<script type="text/javascript" src="./app/scripts/angular-cookies.js"></script>
</body>
</html>
This is my project structure
This is the error I get - 404
The file is there and it's not empty. I tried also:
<script type="text/javascript" src="../app/scripts/angular-cookies.js">
and
<script type="text/javascript" src="app/scripts/angular-cookies.js">
and
<script type="text/javascript" src="/app/scripts/angular-cookies.js">
Any help would be appreciated, thanks!
As I've mentioned in comment, any external resource should be placed in assets folder and for your case referenced like <script type="text/javascript" src="assets/scripts/angular-cookies.js"> considering assets contains a folder named scripts which contains your angular-cookies.js file. After building the code the resulted www folder will be like:
assets -> which contains the external files
build -> which contains your ts files transpiled into js files
index.html
other files
Try this and it will be fine:
<script type="text/javascript" src="/src/app/scripts/angular-cookies.js">
Or maybe
<script type="text/javascript" src="src/app/scripts/angular-cookies.js">