I'm trying to integrate a html template in my angular project and everything is going fine except my JS plugins are not loading. I've given the path to the files in the index.html page. The styles are working fine.
index.html
<html lang="en">
<head>
<meta charset="utf-8">
<title>Estate</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<!-- Google Font -->
<link href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700,800,900&display=swap" rel="stylesheet">
<!-- Css Styles -->
<link rel="stylesheet" href="assets/css/bootstrap.min.css" type="text/css">
<link rel="stylesheet" href="assets/css/font-awesome.min.css" type="text/css">
<link rel="stylesheet" href="assets/css/elegant-icons.css" type="text/css">
<link rel="stylesheet" href="assets/css/themify-icons.css" type="text/css">
<link rel="stylesheet" href="assets/css/nice-select.css" type="text/css">
<link rel="stylesheet" href="assets/css/jquery-ui.min.css" type="text/css">
<link rel="stylesheet" href="assets/css/owl.carousel.min.css" type="text/css">
<link rel="stylesheet" href="assets/css/magnific-popup.css" type="text/css">
<link rel="stylesheet" href="assets/css/slicknav.min.css" type="text/css">
<link rel="stylesheet" href="assets/css/style.css" type="text/css">
</head>
<body>
<app-root></app-root>
<script src="assets/js/jquery-3.3.1.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/js/jquery.magnific-popup.min.js"></script>
<script src="assets/js/jquery.nice-select.min.js"></script>
<script src="assets/js/jquery.slicknav.js"></script>
<script src="assets/js/jquery-ui.min.js"></script>
<script src="assets/js/owl.carousel.min.js"></script>
<script src="assets/js/main.js"></script>
</body>
</html>
You can import your external JS files in Angular by mentioning them in angular.json file.
Inside angular.json you have to mention your files in scripts array. Make sure you are giving absolute path for the files that are present in the assets.
"scripts": [
"../../../assets/jquery/dist/jquery.magnific-popup.min.js",
"../../../assets/jquery/dist/jquery.min.js"
]
Related
I am using pdf js express viewer to work with pdf's
https://pdfjs.express/
When I download their example everything is working fine. But I have older project where I try to integrate this depndency and I am having error
Refused to load the script 'http://localhost:65534/livereload.js?snipver=1' because it violates the following Content Security Policy directive: "default-src 'none'". Note that 'script-src-elem' was not explicitly set, so 'default-src' is used as a fallback.
I don't understand why I get this error due to CSP.
So it seems that internally there is a problem for my application to load pdf js express ( on other project samples it is not a problem I don't get this error )
My index html file looks like this
<html data-ng-app="xecm-webapp" ng-controller="MainCtrl" class="no-js" manifest="offline.manifest">
<head>
<meta charset="utf-8">
<title>App</title>
<meta name="description" content="">
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width">
link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css"/>
<link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.css"/>
<link rel="stylesheet" href="bower_components/angular-carousel/dist/angular-carousel.css"/>
<link rel="stylesheet" href="bower_components/perfect-scrollbar/src/perfect-scrollbar.css"/>
<link rel="stylesheet" href="bower_components/angular-motion/dist/angular-motion.css"/>
<link rel="stylesheet" href="bower_components/xcomponent-widgets/css/object-display-storyline/object-display-storyline.css" />
<!-- build:css styles/xecm-webapp-styles.css -->
<link rel="stylesheet" type="text/css" href="css/t2i-bootstrap/t2i-bootstrap.css"/>
<link rel="stylesheet" type="text/css" href="css/styles/extend-bootstrap.v4.css"/>
<link rel="stylesheet" type="text/css" href="css/styles/flex-utils.css"/>
<link rel="stylesheet" href="css/styles/main.css"/>
<link rel="stylesheet" href="css/styles/spinner-custom.css"/>
<link rel="stylesheet" href="css/components/application-manage/application-manage.css"/>
<script src="components/application-manage/application-manage-directive.js"></script>
<script src="components/application-manage/application-manage-label.js"></script>
<script type="text/javascript" src="bower_components/xcomponent-widgets/TimelineJS/build/js/storyjs-embed.js"></script>
<script type="text/javascript" src="./components.js"></script>
<script type="text/javascript" src='./scripts/lib/lib/webviewer.min.js'></script>
</head>
</html>
I tried adding this inside my head under other meta tags
<meta http-equiv="Content-Security-Policy" content="script-src http://localhost:65534 'unsafe-eval';">
but I have same error. What should I do and why I am getting this error ?
I'm Vuejs beginners. How can I have multiple template in one application?
Example, for SignIn page, i would like to use Flatkit template, and for Admin dashboard, i would like to use other template (Dashboard). How do i combine those template in one app? In my index.html file, I already insert element for Flatkit, but when I insert Dashboard element, the CSS not working. What is the way to combine those link and script element
Here the project flow
index.html
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title>
<%= htmlWebpackPlugin.options.title %>
</title>
<!-- LOGIN TEMPLATE -->
<!-- for ios 7 style, multi-resolution icon of 152x152 -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-barstyle" content="black-translucent">
<link rel="apple-touch-icon" href="./Flatkit/assets/images/logo.png">
<meta name="apple-mobile-web-app-title" content="Flatkit">
<!-- for Chrome on Android, multi-resolution icon of 196x196 -->
<meta name="mobile-web-app-capable" content="yes">
<link rel="shortcut icon" sizes="196x196" href="./Flatkit/assets/images/logo.png">
<!-- style -->
<link rel="stylesheet" href="./Flatkit/assets/animate.css/animate.min.css" type="text/css" />
<link rel="stylesheet" href="./Flatkit/assets/glyphicons/glyphicons.css" type="text/css" />
<link rel="stylesheet" href="./Flatkit/assets/font-awesome/css/font-awesome.min.css" type="text/css" />
<link rel="stylesheet" href="./Flatkit/assets/material-design-icons/material-design-icons.css" type="text/css" />
<link rel="stylesheet" href="./Flatkit/assets/bootstrap/dist/css/bootstrap.min.css" type="text/css" />
<!-- build:css ../assets/styles/app.min.css -->
<link rel="stylesheet" href="./Flatkit/assets/styles/app.css" type="text/css" />
<!-- endbuild -->
<link rel="stylesheet" href="./Flatkit/assets/styles/font.css" type="text/css" />
</head>
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled.
Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
<!-- build:js scripts/app.html.js -->
<!-- jQuery -->
<script src="./Flatkit/libs/jquery/jquery/dist/jquery.js"></script>
<!-- Bootstrap -->
<script src="./Flatkit/libs/jquery/tether/dist/js/tether.min.js"></script>
<script src="./Flatkit/libs/jquery/bootstrap/dist/js/bootstrap.js"></script>
<!-- core -->
<script src="./Flatkit/libs/jquery/underscore/underscore-min.js"></script>
<script src="./Flatkit/libs/jquery/jQuery-Storage-API/jquery.storageapi.min.js"></script>
<script src="./Flatkit/libs/jquery/PACE/pace.min.js"></script>
<script src="./Flatkit/scripts/config.lazyload.js"></script>
<script src="./Flatkit/scripts/palette.js"></script>
<script src="./Flatkit/scripts/ui-load.js"></script>
<script src="./Flatkits/cripts/ui-jp.js"></script>
<script src="./Flatkit/scripts/ui-include.js"></script>
<script src="./Flatkit/scripts/ui-device.js"></script>
<script src="./Flatkit/scripts/ui-form.js"></script>
<script src="./Flatkit/scripts/ui-nav.js"></script>
<script src="./Flatkit/scripts/ui-screenfull.js"></script>
<script src="./Flatkit/scripts/ui-scroll-to.js"></script>
<script src="./Flatkit/scripts/ui-toggle-class.js"></script>
<script src="./Flatkitscripts/app.js"></script>
<!-- ajax -->
<script src="./Flatkit/libs/jquery/jquery-pjax/jquery.pjax.js"></script>
<script src="./Flatkit/scripts/ajax.js"></script>
<!-- endbuild -->
</body>
</html>
you can use 2 different main html page if your main scripts are entirely different. You can configure it in backend.
Another idea is adding only common scripts and styles in html file. And use your scoped styles in components. Add style of each component in "style" tag below "script" tag. make the style scoped using :
VUE COMPONENT:
<template>
</template>
<script>
<script>
<style scoped>
/* your style */
</style>
Scope of this style would only be applicable to current component.
Can anyone tell me why do the link tag not working? when i load it to the browser the console gives me an error saying
GET file:///C:/Users/hp/Desktop/template%201/index.html/css/leon.css net::ERR_FILE_NOT_FOUND??
<head>
<meta charset="UTF-8"/>
<title>leon template</title>
<!--main template css file-->
<link rel="styleSheet" href="css/leon.css">
<!-- render all elements normally -->
<link rel="stylesheet" href="css/normalize.css">
<!--font-->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Work+Sans:ital,wght#0,300;0,400;0,500;0,600;0,700;0,800;1,200&display=swap" rel="stylesheet">
<!--css min file -->
<link rel="stylesheet" href="css/all.min.css" />
</head>
You provide wrong path, I don't know your structure but I guess your css folder is one above so it should be "../css/leon.css"
Because Vaadin provides Custom Layouts I thought about using a Bootstrap Theme like Unify for layouting and styling the application with HTML + CSS. The CustomLayout should "connect" my HTML templates with Vaadin.
I have a working HTML template (with JS & CSS file includes) that just work local in the browser. Is it possible to use Vaadin this way?
My CustomLayout would look like this:
<!DOCTYPE html>
<!--[if IE 8]> <html lang="en" class="ie8"> <![endif]-->
<!--[if IE 9]> <html lang="en" class="ie9"> <![endif]-->
<!--[if !IE]><!--><html lang="en"> <!--<![endif]-->
<head>
<!-- Meta -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<!-- Favicon -->
<link rel="shortcut icon" href="favicon.ico">
<!-- Web Fonts -->
<link rel='stylesheet' type='text/css' href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600&subset=cyrillic,latin'>
<!-- CSS Global Compulsory -->
<link rel="stylesheet" href="assets/plugins/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/css/style.css">
<!-- CSS Header and Footer -->
<link rel="stylesheet" href="assets/css/headers/header-default.css">
<link rel="stylesheet" href="assets/css/footers/footer-v1.css">
<!-- CSS Implementing Plugins -->
<link rel="stylesheet" href="assets/plugins/font-awesome/css/font-awesome.min.css">
<!-- CSS Theme -->
<link rel="stylesheet" href="assets/css/theme-colors/default.css" id="style_color">
<link rel="stylesheet" href="assets/css/theme-skins/dark.css">
<!-- CSS Customization -->
<link rel="stylesheet" href="assets/css/custom.css">
</head>
<body>
...
<!-- JS Global Compulsory -->
<script type="text/javascript" src="assets/plugins/jquery/jquery.min.js"></script>
<script type="text/javascript" src="assets/plugins/jquery/jquery-migrate.min.js"></script>
<script type="text/javascript" src="assets/plugins/bootstrap/js/bootstrap.min.js"></script>
<!-- JS Implementing Plugins -->
<script type="text/javascript" src="assets/plugins/back-to-top.js"></script>
<script type="text/javascript" src="assets/plugins/smoothScroll.js"></script>
<!-- JS Customization -->
<script type="text/javascript" src="assets/js/custom.js"></script>
<!-- JS Page Level -->
<script type="text/javascript" src="assets/js/app.js"></script>
<script type="text/javascript">
jQuery(document).ready(function() {
App.init();
});
</script>
</body>
Recently, popovers and affix (the features in Bootstrap's JS) has stopped working. Unfortunately, I don't know which exact change I made to cause it to stop working. Here are the problems:
$("#element").affix(): `TypeError: Object [object Object] has no method 'affix'`
$("#element").popover({ .. }): Trigger click does not work (no action). Without the trigger, it works.
How I am calling it:
$("#element").popover({html: true, title: "Hi", content: "Hi", trigger: "click", placement: "top"});
Here is how I am loading my CSS and JS files.
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/bootstrap-responsive.min.css" rel="stylesheet">
<link href="css/styles.css" rel="stylesheet">
<link type="text/css" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/ui-lightness/jquery-ui.min.css" rel="stylesheet">
<link type="text/css" href="css/jquery.keypad.css" rel="stylesheet">
<link href="css/styles-media.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.cookie.js"></script>
<script type="text/javascript" src="js/jquery.keypad.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
You are not using the css and js files in a proper arrangement. please make sure that you include jquery core library at the top most position of all dependent scripts. and try to avoid include a core library twice.
Use this order.
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/bootstrap-responsive.min.css" rel="stylesheet">
<link href="css/styles.css" rel="stylesheet">
<link type="text/css" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/ui-lightness/jquery-ui.min.css" rel="stylesheet">
<link type="text/css" href="css/jquery.keypad.css" rel="stylesheet">
<link href="css/styles-media.css" rel="stylesheet">
<script src="js/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.cookie.js"></script>
<script type="text/javascript" src="js/jquery.keypad.min.js"></script>