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>
Related
I changed the title of my index.html page in my Angular app. Since it is not a component is it possible to test it, and if so, how?
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Animations Workshop</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>
</body>
[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>
Installed node_modules and added faceapp.js as a dependency. Trying to use faceapp.js but didn't work.
<!DOCTYPE html>
<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>Document</title>
<link rel="stylesheet" href="assets/css/style.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="node_modules/jquery/dist/jquery.min.js"></script>
<script src="node_modules/faceapp/bin/faceapp.js"></script>
<script src="assets/js/script.js"></script>
</head>
<body>
<h1 class="text-center">Faceapp</h1>
</body>
</html>
Javascript
const faceapp = require('faceapp');
let image = await faceapp.process('assets/images/ajith.jpg', 'smile_2');
Seems like you're trying to add an npm module to a static web. You'll need to bundle the script and required modules that you're using first and include the bundled script to your static html.
I recommend looking at browserify or webpack on how to do so.
I have a website which import some js and css files on the head tag, but when I open the website by chrome,The entire page layout is completely wrong and looks like js and css files is valid. Who can help me? Thanks.
some problem page's code as follow,every js and css files in my code are available
you can try some url
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--禁用移动设备缩放 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> -->
<script src="http://xmumap-code.stor.sinaapp.com/js/jquery-1.11.2.min.js"></script>
<script src="http://xmumap-code.stor.sinaapp.com/js/jquery.mobile-1.4.5.min.js"></script>
<script src="http://xmumap-code.stor.sinaapp.com/js/swiper.jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://xmumap-code.stor.sinaapp.com/css/jquery.mobile-1.4.5.min.css">
<link rel="stylesheet" type="text/css" href="http://xmumap-code.stor.sinaapp.com/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="http://xmumap-code.stor.sinaapp.com/css/swiper.min.css">
</head>
Thanks again!
Okay I am just throwing this out there. I have no knowlegde of PHP and little knowlegde of Javascript.
Is it possible to check an HTML file if header css/js links and body .js links exist?
And if yes: locate them and use them in a Gulp-task in the order they are added in the HTML file?
Example header:
<head>
<meta charset="utf-8">
<title>Website | Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="The Most Awesome" content="Website">
<link rel="stylesheet" type="text/css" href="css/normalize.css">
<link rel="stylesheet" type="text/css" href="css/barebone.css">
<link rel="stylesheet" type="text/css" href="css/custom.css">
</head>
Use those links in a Gulptask like:
gulp.task('css', function(){
gulp.src("*links in html*")
.pipe(concat('main.css'))
.pipe(prefix())
.pipe(minifyCSS())
.pipe(gulp.dest('build/css'))
.pipe(connect.reload());
});
I could just declare the links in the Gulp-task but I want the Gulpfile to be as generic as possible. I want to be able to just dump my files anywhere in the folder.