Javascript - Print Html Content not apply all CSS properly - javascript
I have implemented a print function that allow the user to print a portion of a page.
This is the code:
print(): void {
let printContents, popupWin;
printContents = document.getElementById('print-section').innerHTML;
popupWin = window.open('', '_blank', 'top=0,left=0,height=100%,width=auto');
popupWin.document.open();
popupWin.document.write(`
<html>
<head>
<title>Print tab</title>
<meta charset="utf-8">
<title>MegaMark - Reporting App</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" media='print,screen' type='text/css' href="./bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" media='print,screen' type='text/css' href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css">
<link rel="stylesheet" media='print,screen' type='text/css' href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css">
<link rel="stylesheet" media='print,screen' type='text/css' href="./plugins/jvectormap/jquery-jvectormap-1.2.2.css">
<link rel="stylesheet" media='print,screen' type='text/css' href="./distAdminLte2/css/AdminLTE.min.css">
<link rel="stylesheet" media='print,screen' type='text/css' href="./distAdminLte2/css/skins/_all-skins.min.css">
<link rel="stylesheet" media='print,screen' type="text/css" href="./node_modules/primeng/resources/themes/omega/theme.css" />
<link rel="stylesheet" media='print,screen' type="text/css" href="./node_modules/primeng/resources/primeng.min.css" />
<link rel="stylesheet" href="./css/style.css">
</head>
<body onload="window.print();">${printContents}</body>
</html>`
);
popupWin.document.close();
}
The function runs properly, It open a new window with the content properly rendered.
The problem is that when I save the content as PDF file using "Microsoft print to PDF" as printer or "PDF Creator" , the PDF is not applying all the css properly...
I don't know if it is an angular problem or css problem...
Thanks to support
Related
html render before css appling when use laravel and vue js
i am using laravel and vuejs to develop single page application in my index.blade.php i am invoke app element vuejs
this is my index.blade.php
#extends('layout.header')
<div id="app" v-cloak v-on:shownav="shownavO()">
<nav_bar v-if="hide" :authType="authType" ></nav_bar>
<menuuu v-if="hide" :authType="authType" ></menuuu>
<router-view class="v-cloak--hidden"></router-view>
</div>
#extends('layout.footer')
<script src="{{asset('js/app.js')}}"></script>
in my layout.header it is a blade file i include css file
<!DOCTYPE html>
<html class="loading" lang="{{$lang}}" data-textdirection="{{$lang=='ar'?'rtl':'ltr'}}" id="app">
<!-- BEGIN: Head-->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimal-ui">
<meta name="description" content="Vuexy admin is super flexible, powerful, clean & modern responsive bootstrap 4 admin template with unlimited possibilities.">
<meta name="keywords" content="admin template, Vuexy admin template, dashboard template, flat admin template, responsive admin template, web app">
<meta name="author" content="PIXINVENT">
<title>munasbaty</title>
<link rel="apple-touch-icon" href="{{url('/')}}/app-assets/images/ico/apple-icon-120.png">
<link rel="shortcut icon" type="image/x-icon" href="{{url('/')}}/app-assets/images/ico/favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Montserrat:300,400,500,600" rel="stylesheet">
<!-- BEGIN: Vendor CSS-->
#if(!isset($lang)||$lang=='en')
<link rel="stylesheet" type="text/css" href="{{url('/')}}/app-assets/vendors/css/vendors.min.css">
<link rel="stylesheet" type="text/css" href="{{url('/')}}/app-assets/vendors/css/charts/apexcharts.css">
<link rel="stylesheet" type="text/css" href="{{url('/')}}/app-assets/vendors/css/extensions/tether-theme-arrows.css">
<link rel="stylesheet" type="text/css" href="{{url('/')}}/app-assets/vendors/css/extensions/tether.min.css">
<link rel="stylesheet" type="text/css" href="{{url('/')}}/app-assets/vendors/css/extensions/shepherd-theme-default.css">
<!-- END: Vendor CSS-->
<!-- BEGIN: Theme CSS-->
<link rel="stylesheet" type="text/css" href="{{url('/')}}/app-assets/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="{{url('/')}}/app-assets/css/bootstrap-extended.css">
<link rel="stylesheet" type="text/css" href="{{url('/')}}/app-assets/css/colors.css">
<link rel="stylesheet" type="text/css" href="{{url('/')}}/app-assets/css/components.css">
<link rel="stylesheet" type="text/css" href="{{url('/')}}/app-assets/css/themes/dark-layout.css">
<link rel="stylesheet" type="text/css" href="{{url('/')}}/app-assets/css/themes/semi-dark-layout.css">
<!-- BEGIN: Page CSS-->
<link rel="stylesheet" type="text/css" href="{{url('/')}}/app-assets/css/core/menu/menu-types/vertical-menu.css">
<link rel="stylesheet" type="text/css" href="{{url('/')}}/app-assets/css/core/colors/palette-gradient.css">
<link rel="stylesheet" type="text/css" href="{{url('/')}}/app-assets/css/pages/dashboard-analytics.css">
<link rel="stylesheet" type="text/css" href="{{url('/')}}/app-assets/css/pages/card-analytics.css">
<link rel="stylesheet" type="text/css" href="{{url('/')}}/app-assets/css/plugins/tour/tour.css">
<link rel="stylesheet" type="text/css" href="{{url('/')}}/app-assets/css/pages/card-analytics.css">
<link rel="stylesheet" type="text/css" href="{{url('/')}}/app-assets/vendors/css/pickers/pickadate/pickadate.css">
<link rel="stylesheet" type="text/css" href="{{url('/')}}/assets/css/style.css">
#endif
</head>
<!-- END: Head-->
<!-- BEGIN: Body-->
<body>
when update the page or when open the project the application It appears this way in the beginning
Unable to obtain all HTML content of webpage using BeautifulSoup,Selenium
I am trying to extract all the locations of Ports from this web page: https://directories.lloydslist.com/var/recordset/65237/pos/11
I started with basic code using BeautifulSoup:
url ='https://directories.lloydslist.com/var/recordset/65237/pos/11'
result = requests.get(url)
c = result.content
soup = BeautifulSoup(c)
print(soup)
OUTPUT:
<!DOCTYPE html>
<!-- CMS Strata (c)2003-2020 AMA DataSet Limited (www.ama.uk.com) [CONTENT MANAGEMENT SYSTEM 0.9.40-alpha-lloyds-cms11-lloyds_list_2002] start:0.150--><html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type"/><script type="text/javascript">(window.NREUM||(NREUM={})).loader_config={licenseKey:"154740f801",applicationID:"14826849"};window.NREUM||(NREUM={}),__nr_require=function(n,e,t){function r(t){if(!e[t]){var i=e[t]={exports:{}};n[t][0].call(i.exports,function(e){var i=n[t][1][e];return r(i||e)},i,i.exports)}return e[t].exports}if("function"==typeof __nr_require)return __nr_require;for(var i=0;i<t.length;i++)r(t[i]);return r}({1:[function(n,e,t){function r(){}function i(n,e,t){return function(){return o(n,[u.now()].concat(f(arguments)),e?null:this,t),e?void 0:this}}var o=n("handle"),a=n(4),f=n(5),c=n("ee").get("tracer"),u=n("loader"),s=NREUM;"undefined"==typeof window.newrelic&&(newrelic=s);var p=["setPageViewName","setCustomAttribute","setErrorHandler","finished","addToTrace","inlineHit","addRelease"],d="api-",l=d+"ixn-";a(p,function(n,e){s[e]=i(d+e,!0,"api")}),s.addPageAction=i(d+"addPageAction",!0),s.setCurrentRouteName=i(d+"routeName",!0),e.exports=newrelic,s.interaction=function(){return(new r).get()};var m=r.prototype={createTracer:function(n,e){var t={},r=this,i="function"==typeof e;return o(l+"tracer",[u.now(),n,t],r),function(){if(c.emit((i?"":"no-")+"fn-start",[u.now(),r,i],t),i)try{return e.apply(this,arguments)}catch(n){throw c.emit("fn-err",[arguments,this,n],t),n}finally{c.emit("fn-end",[u.now()],t)}}}};a("actionText,setName,setAttribute,save,ignore,onEnd,getContext,end,get".split(","),function(n,e){m[e]=i(l+e)}),newrelic.noticeError=function(n,e){"string"==typeof n&&(n=new Error(n)),o("err",[n,u.now(),!1,e])}},{}],2:[function(n,e,t){function r(n,e){var t=n.getEntries();t.forEach(function(n){"first-paint"===n.name?a("timing",["fp",Math.floor(n.startTime)]):"first-contentful-paint"===n.name&&a("timing",["fcp",Math.floor(n.startTime)])})}function i(n){if(n instanceof c&&!s){var e,t=Math.round(n.timeStamp);e=t>1e12?Date.now()-t:f.now()-t,s=!0,a("timing",["fi",t,{type:n.type,fid:e}])}}if(!("init"in NREUM&&"page_view_timing"in NREUM.init&&"enabled"in NREUM.init.page_view_timing&&NREUM.init.page_view_timing.enabled===!1)){var o,a=n("handle"),f=n("loader"),c=NREUM.o.EV;if("PerformanceObserver"in window&&"function"==typeof window.PerformanceObserver){o=new PerformanceObserver(r);try{o.observe({entryTypes:["paint"]})}catch(u){}}if("addEventListener"in document){var s=!1,p=["click","keydown","mousedown","pointerdown","touchstart"];p.forEach(function(n){document.addEventListener(n,i,!1)})}}},{}],3:[function(n,e,t){function r(n,e){if(!i)return!1;if(n!==i)return!1;if(!e)return!0;if(!o)return!1;for(var t=o.split("."),r=e.split("."),a=0;a<r.length;a++)if(r[a]!==t[a])return!1;return!0}var i=null,o=null,a=/Version\/(\S+)\s+Safari/;if(navigator.userAgent){var f=navigator.userAgent,c=f.match(a);c&&f.indexOf("Chrome")===-1&&f.indexOf("Chromium")===-1&&(i="Safari",o=c[1])}e.exports={agent:i,version:o,match:r}},{}],4:[function(n,e,t){function r(n,e){var t=[],r="",o=0;for(r in n)i.call(n,r)&&(t[o]=e(r,n[r]),o+=1);return t}var i=Object.prototype.hasOwnProperty;e.exports=r},{}],5:[function(n,e,t){function r(n,e,t){e||(e=0),"undefined"==typeof t&&(t=n?n.length:0);for(var r=-1,i=t-e||0,o=Array(i<0?0:i);++r<i;)o[r]=n[e+r];return o}e.exports=r},{}],6:[function(n,e,t){e.exports={exists:"undefined"!=typeof window.performance&&window.performance.timing&&"undefined"!=typeof window.performance.timing.navigationStart}},{}],ee:[function(n,e,t){function r(){}function i(n){function e(n){return n&&n instanceof r?n:n?c(n,f,o):o()}function t(t,r,i,o){if(!d.aborted||o){n&&n(t,r,i);for(var a=e(i),f=v(t),c=f.length,u=0;u<c;u++)f[u].apply(a,r);var p=s[y[t]];return p&&p.push([b,t,r,a]),a}}function l(n,e){h[n]=v(n).concat(e)}function m(n,e){var t=h[n];if(t)for(var r=0;r<t.length;r++)t[r]===e&&t.splice(r,1)}function v(n){return h[n]||[]}function g(n){return p[n]=p[n]||i(t)}function w(n,e){u(n,function(n,t){e=e||"feature",y[t]=e,e in s||(s[e]=[])})}var h={},y={},b={on:l,addEventListener:l,removeEventListener:m,emit:t,get:g,listeners:v,context:e,buffer:w,abort:a,aborted:!1};return b}function o(){return new r}function a(){(s.api||s.feature)&&(d.aborted=!0,s=d.backlog={})}var f="nr#context",c=n("gos"),u=n(4),s={},p={},d=e.exports=i();d.backlog=s},{}],gos:[function(n,e,t){function r(n,e,t){if(i.call(n,e))return n[e];var r=t();if(Object.defineProperty&&Object.keys)try{return Object.defineProperty(n,e,{value:r,writable:!0,enumerable:!1}),r}catch(o){}return n[e]=r,r}var i=Object.prototype.hasOwnProperty;e.exports=r},{}],handle:[function(n,e,t){function r(n,e,t,r){i.buffer([n],r),i.emit(n,e,t)}var i=n("ee").get("handle");e.exports=r,r.ee=i},{}],id:[function(n,e,t){function r(n){var e=typeof n;return!n||"object"!==e&&"function"!==e?-1:n===window?0:a(n,o,function(){return i++})}var i=1,o="nr#id",a=n("gos");e.exports=r},{}],loader:[function(n,e,t){function r(){if(!x++){var n=E.info=NREUM.info,e=l.getElementsByTagName("script")[0];if(setTimeout(s.abort,3e4),!(n&&n.licenseKey&&n.applicationID&&e))return s.abort();u(y,function(e,t){n[e]||(n[e]=t)}),c("mark",["onload",a()+E.offset],null,"api");var t=l.createElement("script");t.src="https://"+n.agent,e.parentNode.insertBefore(t,e)}}function i(){"complete"===l.readyState&&o()}function o(){c("mark",["domContent",a()+E.offset],null,"api")}function a(){return O.exists&&performance.now?Math.round(performance.now()):(f=Math.max((new Date).getTime(),f))-E.offset}var f=(new Date).getTime(),c=n("handle"),u=n(4),s=n("ee"),p=n(3),d=window,l=d.document,m="addEventListener",v="attachEvent",g=d.XMLHttpRequest,w=g&&g.prototype;NREUM.o={ST:setTimeout,SI:d.setImmediate,CT:clearTimeout,XHR:g,REQ:d.Request,EV:d.Event,PR:d.Promise,MO:d.MutationObserver};var h=""+location,y={beacon:"bam.nr-data.net",errorBeacon:"bam.nr-data.net",agent:"js-agent.newrelic.com/nr-1158.min.js"},b=g&&w&&w[m]&&!/CriOS/.test(navigator.userAgent),E=e.exports={offset:f,now:a,origin:h,features:{},xhrWrappable:b,userAgent:p};n(1),n(2),l[m]?(l[m]("DOMContentLoaded",o,!1),d[m]("load",r,!1)):(l[v]("onreadystatechange",i),d[v]("onload",r)),c("mark",["firstbyte",f],null,"api");var x=0,O=n(6)},{}],"wrap-function":[function(n,e,t){function r(n){return!(n&&n instanceof Function&&n.apply&&!n[a])}var i=n("ee"),o=n(5),a="nr#original",f=Object.prototype.hasOwnProperty,c=!1;e.exports=function(n,e){function t(n,e,t,i){function nrWrapper(){var r,a,f,c;try{a=this,r=o(arguments),f="function"==typeof t?t(r,a):t||{}}catch(u){d([u,"",[r,a,i],f])}s(e+"start",[r,a,i],f);try{return c=n.apply(a,r)}catch(p){throw s(e+"err",[r,a,p],f),p}finally{s(e+"end",[r,a,c],f)}}return r(n)?n:(e||(e=""),nrWrapper[a]=n,p(n,nrWrapper),nrWrapper)}function u(n,e,i,o){i||(i="");var a,f,c,u="-"===i.charAt(0);for(c=0;c<e.length;c++)f=e[c],a=n[f],r(a)||(n[f]=t(a,u?f+i:i,o,f))}function s(t,r,i){if(!c||e){var o=c;c=!0;try{n.emit(t,r,i,e)}catch(a){d([a,t,r,i])}c=o}}function p(n,e){if(Object.defineProperty&&Object.keys)try{var t=Object.keys(n);return t.forEach(function(t){Object.defineProperty(e,t,{get:function(){return n[t]},set:function(e){return n[t]=e,e}})}),e}catch(r){d([r])}for(var i in n)f.call(n,i)&&(e[i]=n[i]);return e}function d(e){try{n.emit("internal-error",e)}catch(t){}}return n||(n=i),t.inPlace=u,t.flag=a,t}},{}]},{},["loader"]);</script>
<meta content="blendTrans(Duration=0.1)" http-equiv="Page-Enter"/>
<meta content="blendTrans(Duration=0.1)" http-equiv="Page-Exit"/>
<meta content="support#ama.uk.com" http-equiv="Reply-to"/>
<meta content="CMS Strata - AMA DataSet Limited" name="generator"/>
<meta content="" name="description"/>
<meta content="" name="keywords"/>
<meta content="index, follow" name="robots"/>
<meta content="http://directories.lloydslist.com/var/recordset/65237/pos/11" property="og:url"/>
<meta content="width=device-width, initial-scale=1" name="viewport"/>
<title>Lloyd's List - Directories</title>
<link href="/ll/images/favicon.ico" rel="icon" type="image/vnd.microsoft.icon"/>
<link href="/ll/images/favicon.ico" rel="shortcut icon" type="image/x-icon"/>
<link href="/ll/images/favicon.ico" rel="apple-touch-icon"/>
<link href="/cms/css/bootstrap/3.3.5/bootstrap.min.css?1468311567" media="all" rel="stylesheet" type="text/css"/>
<link href="/cms/css/ama.strata.css?1488964337" media="all" rel="stylesheet" type="text/css"/>
<link href="/css/head_footer.css?1495717019" media="all" rel="stylesheet" type="text/css"/>
<link href="/css/fonts.css?1492593457" media="all" rel="stylesheet" type="text/css"/>
<link href="/dist/index-generated.css?1562066943" media="all" rel="stylesheet" type="text/css"/>
<link href="/css/directories.css?1562066740" media="all" rel="stylesheet" type="text/css"/>
<link href="/css/font-awesome/font-awesome.css?1421945712" media="all" rel="stylesheet" type="text/css"/>
<link href="/css/site.css?1495446562" media="all" rel="stylesheet" type="text/css"/>
<link href="/css/survey_responsive.css?1495718076" media="all" rel="stylesheet" type="text/css"/>
<script src="/cms/includes/js/jquery/jquery-1.9.1.js?1470319420" type="text/javascript"></script>
<script src="/cms/includes/js/bootstrap/bootstrap.min.js?1396702205" type="text/javascript"></script>
<script src="/js/jquery/jquery-migrate-1.2.1.min.js?1490174098" type="text/javascript"></script>
<script src="/js/ajax/jqueryui/1.9.1/googleapis.jquery-ui.min.js?1489506075" type="text/javascript"></script>
<script src="/scripts/jquery.ui.map.full.min.js?1489420109" type="text/javascript"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCMhyPGe9zmfvZQz876tu40kbbzEqBebJk&sensor=false?1490802358" type="text/javascript"></script>
<script src="/cms/includes/js/jquery.watermarkinput.js?1485525553" type="text/javascript"></script>
<script src="/cms/includes/js/jquery.autocomplete.js?1490112323" type="text/javascript"></script>
<script src="/cms/includes/js/ama.ajax.js?1468311510" type="text/javascript"></script>
<script src="/js/compare-ports.js?1491468859" type="text/javascript"></script>
<script src="/js/expand-section.js?1490182977" type="text/javascript"></script>
</head>
<body id="ama-page-">
<div class="ama-level-0" id="ama-layout-">
</div>
<!-- foot body -->
<!-- foot js -->
<script src="/dist/js/index.js?1497352833" type="text/javascript"></script>
<link href="/css/lloydslist.css?1562065235" media="all" rel="stylesheet" type="text/css"/>
<link href="/css/print.css?1492684720" media="print" rel="stylesheet" type="text/css"/>
<!-- BODY clode --> <script type="text/javascript">window.NREUM||(NREUM={});NREUM.info={"beacon":"bam.nr-data.net","licenseKey":"154740f801","applicationID":"14826849,14828730,26854960","transactionName":"NldbbUJZV0tXAEFRXQ8dbEtZF1BWUgZNFloVX1U=","queueTime":0,"applicationTime":153,"atts":"GhBYGwpDREU=","errorBeacon":"bam.nr-data.net","agent":""}</script></body>
</html>
The output is not complete. It is missing the entirety of the HTML body and for some reason, the output is incorrectly naming the body ID and div class tags:
</head>
<body id="ama-page-">
<div class="ama-level-0" id="ama-layout-">
</div>
<!-- foot body -->
<!-- foot js -->
COMPARING this to the 'View Page Source' option on the browser (Chrome):
</head>
<body id='ama-page-21397'>
<div id='ama-layout-21687' class='xsite_container ama-level-0'>
<div id='ama-layout-21337' class='lloydslist-header ama-level-1'>
<div id='ama-section-14735' class='ama-section'>
<div id='ama-section-body-14735' class='sectionbody'>
<div id='ama-field-64687' class='ama-field-html-php'>
<script async src='https://securepubads.g.doubleclick.net/tag/js/gpt.js'></script>
<script>
So you can see that the body id, and div class differ slightly:
e.g
<body id="ama-page-">
vs
<body id='ama-page-21397'>
So this may be where the problem lies, but I am new to web scraping and I am struggling to find a solution.
Here is the full 'View Page Source' Code which I want:
view-source:https://directories.lloydslist.com/var/recordset/65237/pos/11
Any help greatly appreciated!
NOTE: I've also tried using Selenium, but still no success:
url = "https://directories.lloydslist.com/var/recordset/65237/pos/11"
opts = Options()
opts.add_argument("user-agent=whatever you want")
driver = webdriver.Chrome(chrome_options=opts)
driver.get(url)
time.sleep(3)
print(driver.page_source)
Bootstrap Js file is not applying in Angular 8
I have bootstrap js file inside assets folder like> assets/js/bootstrap.min.js and I have added in my index.HTML page with scrip tag <script src="assets/js/bootstrap.min.js"></script> but is not applying in my component. What is wrong here or is there any way to use it. <!doctype html> <html lang="en"> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta property="og:image:type" content="image/png"> <meta property="og:image:width" content="96"> <meta property="og:image:height" content="96"> <meta content="width=2000" name="viewport"> <!-- <meta name="viewport" content="width=device-width, initial-scale=1"> --> <meta charset="utf-8"> <title>HomeClueWebApp</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="assets/css/font-awesome.min.css"> <link rel="stylesheet" type="text/css" href="assets/css/icofont.css"> <link rel="stylesheet" type="text/css" href="assets/css/stellarnav.min.css"> <link rel="stylesheet" type="text/css" href="assets/css/featherlight.min.css"> <link rel="stylesheet" type="text/css" href="assets/css/featherlight.gallery.min.css"> <link rel="stylesheet" type="text/css" href="assets/css/hover.css"> <link rel="stylesheet" type="text/css" href="assets/css/flexslider.css"> <link rel="stylesheet" type="text/css" href="assets/css/owl.carousel.min.css"> <link rel="stylesheet" type="text/css" href="assets/css/owl.theme.default.min.css"> <link rel="stylesheet" type="text/css" href="assets/css/slick.css"> <link rel="stylesheet" type="text/css" href="assets/css/slick-theme.css"> <link rel="stylesheet" type="text/css" href="assets/css/jquery-ui.css"> <link rel="stylesheet" type="text/css" href="assets/css/animations.css"> <link rel="stylesheet" type="text/css" href="assets/css/animate.min.css"> <link rel="stylesheet" type="text/css" href="assets/css/morphext.css"> <link rel="stylesheet" type="text/css" href="assets/css/owl.carousel.min.css"> <link rel="stylesheet" type="text/css" href="assets/css/owl.theme.default.css"> <link rel="stylesheet" type="text/css" href="assets/css/jquery.mb.YTPlayer.min.css"> <!-- Main stylesheet --> <link rel="stylesheet" type="text/css" href="assets/css/style.css"> <!-- Responsive stylesheet --> <link rel="stylesheet" type="text/css" href="assets/css/responsive.css"> <!-- Favicon --> <link href="assets/images/favicon.png" rel="shortcut icon" type="image/png"> <link href="assets/images/apple-icon.png" rel="icon" type="image/png"> <link href="assets/css/bootstrap.min.css" rel="stylesheet"> </head> <body> <!-- jQuery --> <script src="assets/js/jquery.min.js"></script> <script src="assets/js/bootstrap.min.js"></script> <!-- Bootstrap Core JavaScript --> <script src="assets/js/popper.min.js"></script> <!-- all plugins and JavaScript --> <script type="text/javascript" src="assets/js/css3-animate-it.js"></script> <script type="text/javascript" src="assets/js/stellarnav.min.js"></script> <script type="text/javascript" src="assets/js/featherlight.min.js"></script> <script type="text/javascript" src="assets/js/featherlight.gallery.min.js"></script> <script type="text/javascript" src="assets/js/jquery.flexslider.js"></script> <script type="text/javascript" src="assets/js/owl.carousel.min.js"></script> <script type="text/javascript" src="assets/js/jarallax.js"></script> <script type="text/javascript" src="assets/js/slick.min.js"></script> <script type="text/javascript" src="assets/js/jquery-ui.js"></script> <script type="text/javascript" src="assets/js/jquery-scrolltofixed-min.js"></script> <script type="text/javascript" src="assets/js/morphext.min.js"></script> <script type="text/javascript" src="assets/js/dyscrollup.js"></script> <script type="text/javascript" src="assets/js/jquery.ripples.js"></script> <script type="text/javascript" src="assets/js/jquery.mb.YTPlayer.min.js"></script> <script type="text/javascript" src="assets/js/app.js"></script> <!-- Main Custom JS --> <script type="text/javascript" src="assets/js/main.js"></script> <app-root></app-root> </body> </html> file structure is here https://kuldeepkoranga-connekt.tinytake.com/tt/Mzk1NjkyMl8xMjE0NjIyMw https://kuldeepkoranga-connekt.tinytake.com/tt/Mzk1NjkyNF8xMjE0NjIyNQ Thanks for any response
you should add jquery and bootstrap scripts in angular.json scripts section.
As all the scripts and styles you are trying to load are inside some folders in assets so you need to tell angular to load and consider those folders as assets. You can do that in angular.json file as follows: "assets": [ "src/favicon.ico", "src/assets", "src/assets/*" // Add this line at end. ], With this line at end we are telling angular to build other folders inside assets folder to consider as assets. As already suggested by #Chirag Chaudhari This is normally not a good way to load scripts and styles as assets, instead load them with scripts and styles array present in angular.json file. Hope it helps.
ng:btstrpd err App Already Bootstrapped with this Element?
It's entirely possible I'm doing something stupid ...
Full stack trace of the Error
Error: [ng:btstrpd] App Already Bootstrapped with this Element < html class="js flexbox flexboxlegacy canvas canvastext webgl no-touch geolocation postmessage no-websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients no-cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers applicationcache svg inlinesvg smil svgclippaths ng-scope mdl-js js flexbox flexboxlegacy canvas canvastext webgl no-touch geolocation postmessage no-websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients no-cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers applicationcache
This Error is occuring in my index.html file.by default i route to login.html.it goes on continous loop.so many ng-view are getting created.
this is my script.js and index.html
// create the module and name it app
var app = angular.module('app', ['ngRoute','luegg.directives']);
// configure our routes
app.factory("Data", function(){
var pagesData = {};
var loginData = {};
var data = {};
// var setPageName = function(x){
// pagesData.pageName = x;
// console.log(x);
// };
//
// var setPageId = function(x){
// pagesData.pageId = x;
// console.log(x);
// };
// var getPageData = function(){
// return pagesData;
// };
// return {pageData : pagesData.pageName};
return {
getpageData : function () {
console.log(pagesData);
return pagesData;
},
setPageName : function (name) {
pagesData.pageName = name;
console.log("1111111111111");
console.log(pagesData);
},
setPageId : function (id) {
pagesData.pageId = id;
console.log("1111111111111");
console.log(pagesData);
},
setUserName : function (name) {
loginData.userName = name;
console.log("1111111111111");
console.log(pagesData);
},
setUserEmail : function (mail) {
loginData.userEmail = mail;
console.log("1111111111111");
console.log(pagesData);
},
getLoginData : function () {
console.log(pagesData);
return loginData;
}
}
});
app.config(function($routeProvider) {
$routeProvider
.when('/', {
templateUrl : 'login-2.html',
controller : 'loginCtrl'
})
.when('/page', {
templateUrl : 'pages.html',
controller : 'myPagesCtrl'
})
.when('/try', {
templateUrl : 'try.html',
controller : 'myctrl'
});
});
app.controller('myPagesCtrl', function($scope) {
// create a message to display in our view
$scope.message = 'Everyone come and see how good I look!';
});
app.controller('myctrl', function($scope) {
$scope.message = 'Look! I am an about page.';
});
app.controller('mainController', function($scope,$location) {
scope.message = 'Look! I am an about page.';
});
<!DOCTYPE html>
<html lang="en" ng-app="app" ng-controller="mainController">
<head>
<meta charset="UTF-8">
<!--[if IE]><meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'><![endif]-->
<title> Monarch UI - Bootstrap Frontend & Admin Template </title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link rel="stylesheet" href="https://code.getmdl.io/1.2.1/material.light_blue-blue.min.css" />
<script defer src="https://code.getmdl.io/1.2.1/material.min.js"></script>
<!-- Favicons -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="../../assets/images/icons/apple-touch-icon-144-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="../../assets/images/icons/apple-touch-icon-114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="../../assets/images/icons/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="../../assets/images/icons/apple-touch-icon-57-precomposed.png">
<link rel="shortcut icon" href="../../assets/images/icons/favicon.png">
<link rel="stylesheet" type="text/css" href="../../assets/bootstrap/css/bootstrap.css">
<!-- HELPERS -->
<link rel="stylesheet" type="text/css" href="../../assets/helpers/animate.css">
<link rel="stylesheet" type="text/css" href="../../assets/helpers/backgrounds.css">
<link rel="stylesheet" type="text/css" href="../../assets/helpers/boilerplate.css">
<link rel="stylesheet" type="text/css" href="../../assets/helpers/border-radius.css">
<link rel="stylesheet" type="text/css" href="../../assets/helpers/grid.css">
<link rel="stylesheet" type="text/css" href="../../assets/helpers/page-transitions.css">
<link rel="stylesheet" type="text/css" href="../../assets/helpers/spacing.css">
<link rel="stylesheet" type="text/css" href="../../assets/helpers/typography.css">
<link rel="stylesheet" type="text/css" href="../../assets/helpers/utils.css">
<link rel="stylesheet" type="text/css" href="../../assets/helpers/colors.css">
<!-- ELEMENTS -->
<link rel="stylesheet" type="text/css" href="../../assets/elements/badges.css">
<link rel="stylesheet" type="text/css" href="../../assets/elements/buttons.css">
<link rel="stylesheet" type="text/css" href="../../assets/elements/content-box.css">
<link rel="stylesheet" type="text/css" href="../../assets/elements/dashboard-box.css">
<link rel="stylesheet" type="text/css" href="../../assets/elements/forms.css">
<link rel="stylesheet" type="text/css" href="../../assets/elements/images.css">
<link rel="stylesheet" type="text/css" href="../../assets/elements/info-box.css">
<link rel="stylesheet" type="text/css" href="../../assets/elements/invoice.css">
<link rel="stylesheet" type="text/css" href="../../assets/elements/loading-indicators.css">
<link rel="stylesheet" type="text/css" href="../../assets/elements/menus.css">
<link rel="stylesheet" type="text/css" href="../../assets/elements/panel-box.css">
<link rel="stylesheet" type="text/css" href="../../assets/elements/response-messages.css">
<link rel="stylesheet" type="text/css" href="../../assets/elements/responsive-tables.css">
<link rel="stylesheet" type="text/css" href="../../assets/elements/ribbon.css">
<link rel="stylesheet" type="text/css" href="../../assets/elements/social-box.css">
<link rel="stylesheet" type="text/css" href="../../assets/elements/tables.css">
<link rel="stylesheet" type="text/css" href="../../assets/elements/tile-box.css">
<link rel="stylesheet" type="text/css" href="../../assets/elements/timeline.css">
<!-- ICONS -->
<link rel="stylesheet" type="text/css" href="../../assets/icons/fontawesome/fontawesome.css">
<link rel="stylesheet" type="text/css" href="../../assets/icons/linecons/linecons.css">
<link rel="stylesheet" type="text/css" href="../../assets/icons/spinnericon/spinnericon.css">
<!-- WIDGETS -->
<link rel="stylesheet" type="text/css" href="../../assets/widgets/accordion-ui/accordion.css">
<link rel="stylesheet" type="text/css" href="../../assets/widgets/calendar/calendar.css">
<link rel="stylesheet" type="text/css" href="../../assets/widgets/carousel/carousel.css">
<link rel="stylesheet" type="text/css" href="../../assets/widgets/charts/justgage/justgage.css">
<link rel="stylesheet" type="text/css" href="../../assets/widgets/charts/morris/morris.css">
<link rel="stylesheet" type="text/css" href="../../assets/widgets/charts/piegage/piegage.css">
<link rel="stylesheet" type="text/css" href="../../assets/widgets/charts/xcharts/xcharts.css">
<link rel="stylesheet" type="text/css" href="../../assets/widgets/chosen/chosen.css">
<link rel="stylesheet" type="text/css" href="../../assets/widgets/colorpicker/colorpicker.css">
<link rel="stylesheet" type="text/css" href="../../assets/widgets/datatable/datatable.css">
<link rel="stylesheet" type="text/css" href="../../assets/widgets/datepicker/datepicker.css">
<link rel="stylesheet" type="text/css" href="../../assets/widgets/datepicker-ui/datepicker.css">
<link rel="stylesheet" type="text/css" href="../../assets/widgets/daterangepicker/daterangepicker.css">
<link rel="stylesheet" type="text/css" href="../../assets/widgets/dialog/dialog.css">
<link rel="stylesheet" type="text/css" href="../../assets/widgets/dropdown/dropdown.css">
<link rel="stylesheet" type="text/css" href="../../assets/widgets/dropzone/dropzone.css">
<link rel="stylesheet" type="text/css" href="../../assets/widgets/file-input/fileinput.css">
<link rel="stylesheet" type="text/css" href="../../assets/widgets/input-switch/inputswitch.css">
<link rel="stylesheet" type="text/css" href="../../assets/widgets/input-switch/inputswitch-alt.css">
<link rel="stylesheet" type="text/css" href="../../assets/widgets/ionrangeslider/ionrangeslider.css">
<link rel="stylesheet" type="text/css" href="../../assets/widgets/jcrop/jcrop.css">
<link rel="stylesheet" type="text/css" href="../../assets/widgets/jgrowl-notifications/jgrowl.css">
<link rel="stylesheet" type="text/css" href="../../assets/widgets/loading-bar/loadingbar.css">
<link rel="stylesheet" type="text/css" href="../../assets/widgets/maps/vector-maps/vectormaps.css">
<link rel="stylesheet" type="text/css" href="../../assets/widgets/markdown/markdown.css">
<link rel="stylesheet" type="text/css" href="../../assets/widgets/modal/modal.css">
<link rel="stylesheet" type="text/css" href="../../assets/widgets/multi-select/multiselect.css">
<link rel="stylesheet" type="text/css" href="../../assets/widgets/multi-upload/fileupload.css">
<link rel="stylesheet" type="text/css" href="../../assets/widgets/nestable/nestable.css">
<link rel="stylesheet" type="text/css" href="../../assets/widgets/noty-notifications/noty.css">
<link rel="stylesheet" type="text/css" href="../../assets/widgets/popover/popover.css">
<link rel="stylesheet" type="text/css" href="../../assets/widgets/pretty-photo/prettyphoto.css">
<link rel="stylesheet" type="text/css" href="../../assets/widgets/progressbar/progressbar.css">
<link rel="stylesheet" type="text/css" href="../../assets/widgets/range-slider/rangeslider.css">
<link rel="stylesheet" type="text/css" href="../../assets/widgets/slidebars/slidebars.css">
<link rel="stylesheet" type="text/css" href="../../assets/widgets/slider-ui/slider.css">
<link rel="stylesheet" type="text/css" href="../../assets/widgets/summernote-wysiwyg/summernote-wysiwyg.css">
<link rel="stylesheet" type="text/css" href="../../assets/widgets/tabs-ui/tabs.css">
<link rel="stylesheet" type="text/css" href="../../assets/widgets/theme-switcher/themeswitcher.css">
<link rel="stylesheet" type="text/css" href="../../assets/widgets/timepicker/timepicker.css">
<link rel="stylesheet" type="text/css" href="../../assets/widgets/tocify/tocify.css">
<link rel="stylesheet" type="text/css" href="../../assets/widgets/tooltip/tooltip.css">
<link rel="stylesheet" type="text/css" href="../../assets/widgets/touchspin/touchspin.css">
<link rel="stylesheet" type="text/css" href="../../assets/widgets/uniform/uniform.css">
<link rel="stylesheet" type="text/css" href="../../assets/widgets/wizard/wizard.css">
<link rel="stylesheet" type="text/css" href="../../assets/widgets/xeditable/xeditable.css">
<!-- SNIPPETS -->
<link rel="stylesheet" type="text/css" href="../../assets/snippets/chat.css">
<link rel="stylesheet" type="text/css" href="../../assets/snippets/files-box.css">
<link rel="stylesheet" type="text/css" href="../../assets/snippets/login-box.css">
<link rel="stylesheet" type="text/css" href="../../assets/snippets/notification-box.css">
<link rel="stylesheet" type="text/css" href="../../assets/snippets/progress-box.css">
<link rel="stylesheet" type="text/css" href="../../assets/snippets/todo.css">
<link rel="stylesheet" type="text/css" href="../../assets/snippets/user-profile.css">
<link rel="stylesheet" type="text/css" href="../../assets/snippets/mobile-navigation.css">
<!-- APPLICATIONS -->
<link rel="stylesheet" type="text/css" href="../../assets/applications/mailbox.css">
<!-- Admin theme -->
<link rel="stylesheet" type="text/css" href="../../assets/themes/admin/layout.css">
<link rel="stylesheet" type="text/css" href="../../assets/themes/admin/color-schemes/default.css">
<!-- Components theme -->
<link rel="stylesheet" type="text/css" href="../../assets/themes/components/default.css">
<link rel="stylesheet" type="text/css" href="../../assets/themes/components/border-radius.css">
<!-- Admin responsive -->
<link rel="stylesheet" type="text/css" href="../../assets/helpers/responsive-elements.css">
<link rel="stylesheet" type="text/css" href="../../assets/helpers/admin-responsive.css">
<!-- JS Core -->
<script type="text/javascript" src="../../assets/js-core/jquery-core.js"></script>
<script type="text/javascript" src="../../assets/js-core/jquery-ui-core.js"></script>
<script type="text/javascript" src="../../assets/js-core/jquery-ui-widget.js"></script>
<script type="text/javascript" src="../../assets/js-core/jquery-ui-mouse.js"></script>
<script type="text/javascript" src="../../assets/widgets/interactions-ui/sortable.js"></script>
<script type="text/javascript" src="../../assets/jquery.ns-autogrow/dist/jquery.ns-autogrow.js"></script>
<script type="text/javascript" src="../../assets/js-core/jquery-ui-position.js"></script>
<!--<script type="text/javascript" src="../../assets/js-core/transition.js"></script>-->
<script type="text/javascript" src="../../assets/js-core/modernizr.js"></script>
<script type="text/javascript" src="../../assets/js-core/jquery-cookie.js"></script>
<script src="https://code.angularjs.org/1.2.13/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular-route.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular-animate.js"></script>
<script type="text/javascript" src="../../assets/angular/app.js"></script>
<link rel="stylesheet" type="text/css" href="../../assets/angular/page-animations.css">
<script type="text/javascript" src="scripts/script.js"></script>
<script type="text/javascript" src="scripts/myPagesController.js"></script>
<script type="text/javascript" src="scripts/about.js"></script>
<script type="text/javascript" src="scripts/loginController.js"></script>
<script src="https://cdn.auth0.com/js/lock/10.0/lock.min.js"></script>
<script type="text/javascript" src="scripts/chosen-sort.js"></script>
<script type="text/javascript" src="scripts/ui-bootstrap-tpls-2.4.0.min.js"></script>
<script type="text/javascript" src="../../assets/widgets/chosen/chosen.js"></script>
<script type="text/javascript" src="../../assets/widgets/chosen/chosen-demo.js"></script>
<script type="text/javascript" src="../../assets/widgets/accordion-ui/accordion.js"></script>
<script type="text/javascript" src="../../assets/angularjs-scroll-glue/src/scrollglue.js"></script>
<script type="text/javascript" src="../../assets/angular-xeditable/js/xeditable.js"></script>
<script type="text/javascript" src="../../assets/bootstrap/js/bootstrap.js"></script>
<script type="text/javascript" src="../../assets/widgets/wizard/wizard.js"></script>
<script type="text/javascript" src="../../assets/widgets/wizard/wizard-demo.js"></script>
<script src="https://sdk.amazonaws.com/js/aws-sdk-2.3.0.min.js"></script>
<script type="text/javascript" src="../../assets/widgets/dropzone/dropzone.js"></script>
<script src="https://cdn.pubnub.com/pubnub.min.js"></script>
<script type="text/javascript" src="../../assets/widgets/tabs/tabs.js"></script>
<script type="text/javascript" src="../../assets/widgets/parsley/parsley.js"></script>
</head>
<body>
<div ng-view>
</div>
<!-- <button><i class="fa fa-home"></i> Home</button>
<i class="fa fa-shield"></i> About -->
</body>
</html>
Your issue is this:
.when('/', {
templateUrl : 'index.html',
controller : 'mainController'
})
You don't need to specify 'index.html' here. index.html will be loaded by your server. You need to pass what template file to load into the ng-view that is in that index.html when the '/' path is detected.
edit: As mentioned in my comments. You also should only have 1 ng-app directive in your application. This directive bootstraps angular and is only needed once.
Loopback is not loading css files
I have the follow code:
app.middleware('files', '/lib', loopback.static(path.normalize(__dirname + '/lib')));
But I am getting this error on cosole:
Failed to load resource: the server responded with a status of 404 (Not Found)
Any idea why? The location of my css files is correct and the file is there.
Thanks
I am trying to integrate Raneto with Loopback, if someone can give me a hand I would apretiate it.
Here my html code:
<!DOCTYPE html>
<html lang="{{config.locale}}">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>{{#meta.title}}{{meta.title}} - {{/meta.title}}{{config.site_title}}</title>
{{#meta.description}}<meta name="description" content="{{meta.description}}">{{/meta.description}}
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon", href="http://buildmetric.com/favicon.ico?v=2">
<link rel="stylesheet" href="{{config.base_url}}/lib/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="{{config.base_url}}/lib/highlightjs/styles/solarized_light.css">
<link rel="stylesheet" href="{{config.base_url}}/styles/raneto.css">
<link rel="stylesheet" href="{{config.base_url}}/styles/ghostdown.css">
<link type="text/css" rel="stylesheet" href="{{config.base_url}}/lib/bootstrap/dist/css/font-awesome.min.css" />
<link type="text/css" rel="stylesheet" href="{{config.base_url}}/lib/bootstrap/dist/css/animate.css" />
<link type="text/css" rel="stylesheet" href="{{config.base_url}}/lib/bootstrap/dist/css/hover.css" />
<link type="text/css" rel="stylesheet" href="{{config.base_url}}/lib/bootstrap/dist/css/style.css" />
{{{config.analytics}}}
</head>
<body class="{{body_class}}">
Full path:
http://localhost:5000/lib/bootstrap/dist/css/bootstrap.min.css