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.
Related
The preloader I implemented into my website is loading indefinitely. It keeps loading and never goes to the homepage of the website and I'm not really sure what the issue is as the problem started without me seemingly changing anything.
The HTML Code for the preloader:
<link href="https://fonts.googleapis.com/css?family=Poppins:100,200,400,300,500,600,700" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,600,700,900" rel="stylesheet">
<!--
CSS
============================================= -->
<link rel="stylesheet" href="css/linearicons.css">
<link rel="stylesheet" href="css/font-awesome.min.css">
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/magnific-popup.css">
<link rel="stylesheet" href="css/nice-select.css">
<link rel="stylesheet" href="css/animate.min.css">
<link rel="stylesheet" href="css/owl.carousel.css">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" type="text/css" href="vendor/bootstrap/css/bootstrap.min.css">
<!--===============================================================================================-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!--===============================================================================================-->
<link rel="stylesheet" type="text/css" href="vendor/animate/animate.css">
<!--===============================================================================================-->
<link rel="stylesheet" type="text/css" href="vendor/css-hamburgers/hamburgers.min.css">
<!--===============================================================================================-->
<link rel="stylesheet" type="text/css" href="vendor/animsition/css/animsition.min.css">
<!--===============================================================================================-->
<link rel="stylesheet" type="text/css" href="vendor/select2/select2.min.css">
<!--===============================================================================================-->
<link rel="stylesheet" type="text/css" href="vendor/daterangepicker/daterangepicker.css">
<!--===============================================================================================-->
<link rel="stylesheet" type="text/css" href="css/util.css">
<link rel="stylesheet" type="text/css" href="css/maincontact.css">
</head>
<body>
<!-- Start Preloader Area -->
<div class="preloader-area">
<div class="loader-box">
<div class="loader"></div>
</div>
</div>
<!-- End Preloader Area -->
Javascript:
//------- Pre Loader --------//
$(window).on('load', function () {
$(".preloader-area").delay(200).fadeOut(500);
})
That's the only code that's been touched at all between now and when the preloader started loading indefinitely. I would appreciate any suggestions.
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
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.
I have the following files
<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<link href="css/style2.css" rel="stylesheet" type="text/css" />
<link href="css/default.css" rel="stylesheet" type="text/css" />
<link href="css/index.css" rel="stylesheet" type="text/css" />
<script src="js/jquery.js" type="text/javascript"></script>
That was working fine but when I added other JS files like DateTimepicker then my autocomplete function stops working.
<script src="js/jquery.datetimepicker.full.js" type="text/javascript"></script>
<link href="css/jquery.datetimepicker.css" rel="stylesheet" type="text/css" />
Error:
Uncaught TypeError: $(...).autocomplete is not a function
The issue is because you're including two versions of jQuery. The first one has jQueryUI methods added to it. The second one then overwrites the first. Remove the last jQuery script include.
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<!-- REMOVE THIS >> <script src="js/jquery.js" type="text/javascript"></script> -->
<script src="js/jquery.datetimepicker.full.js"></script>
<link rel="stylesheet" type="text/css" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="/resources/demos/style.css">
<link rel="stylesheet" type="text/css" href="css/jquery.datetimepicker.css" />
<link rel="stylesheet" type="text/css" href="css/style2.css" />
<link rel="stylesheet" type="text/css" href="css/default.css" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
seems like you have added jQuery library twice.
keep it only once.
Either this one <script src="//code.jquery.com/jquery-1.10.2.js"></script> or <script src="js/jquery.js" type="text/javascript"></script>
I have a code to call kendoJS library like this:
jQuery(function(){
jQuery("#TabStrip").kendoTabStrip({
"animation":false
});
});
When I run the code, in console I found an error like this:
When I try to add kendo library:
<link href="http://localhost/CST/public/kendo/2013.1.514/kendo.common.min.css" rel="stylesheet" type="text/css" />
<link href="http://localhost/CST/public/kendo/2013.1.514/kendo.default.min.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://localhost/CST/public/kendoJs/2013.1.514/kendo.all.min.js"></script>
<link href="http://localhost/CST/public/css/jquery.pnotify.default.css" rel="stylesheet" type="text/css" />
<link href="http://localhost/CST/public/css/jquery.jOrgChart.css" rel="stylesheet" type="text/css" />
<link href="http://localhost/CST/public/css/DataTable.css" rel="stylesheet" type="text/css" />
<link href="http://localhost/CST/public/css/custom.css" rel="stylesheet" type="text/css" />
<link href="http://localhost/CST/public/css/prettify.css" rel="stylesheet" type="text/css" />
<link href="http://localhost/CST/public/css/getorgchart.css" rel="stylesheet" type="text/css" />-->
<script type="text/javascript" src="http://localhost/CST/public/js/prettify.js"></script>
<script type="text/javascript" src="http://localhost/CST/public/js/data.js"></script>
<script type="text/javascript" src="http://localhost/CST/public/js/jquery.min.js"></script>
<script type="text/javascript" src="http://localhost/CST/public/js/jquery.jOrgChart.js"></script>
<script type="text/javascript" src="http://localhost/CST/public/js/jquery.jOrgChart3.js"></script>
<script type="text/javascript" src="http://localhost/CST/public/js/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://localhost/CST/public/js/setting.js"></script>
I found an error like this:
jQuery is not defined. Why I get an error like that?. The css and javascript in different library.
<link href="http://localhost/CST/public/kendo/2013.1.514/kendo.common.min.css" rel="stylesheet" type="text/css" />
<link href="http://localhost/CST/public/kendo/2013.1.514/kendo.default.min.css" rel="stylesheet" type="text/css" />
***<!--jquery.min.js should be before kendo.all.min.js -->***
<script type="text/javascript" src="http://localhost/CST/public/js/jquery.min.js"></script>
<script type="text/javascript" src="http://localhost/CST/public/kendoJs/2013.1.514/kendo.all.min.js"></script>
<link href="http://localhost/CST/public/css/jquery.pnotify.default.css" rel="stylesheet" type="text/css" />
<link href="http://localhost/CST/public/css/jquery.jOrgChart.css" rel="stylesheet" type="text/css" />
<link href="http://localhost/CST/public/css/DataTable.css" rel="stylesheet" type="text/css" />
<link href="http://localhost/CST/public/css/custom.css" rel="stylesheet" type="text/css" />
<link href="http://localhost/CST/public/css/prettify.css" rel="stylesheet" type="text/css" />
<link href="http://localhost/CST/public/css/getorgchart.css" rel="stylesheet" type="text/css" />-->
<script type="text/javascript" src="http://localhost/CST/public/js/prettify.js"></script>
<script type="text/javascript" src="http://localhost/CST/public/js/data.js"></script>
<script type="text/javascript" src="http://localhost/CST/public/js/jquery.jOrgChart.js"></script>
<script type="text/javascript" src="http://localhost/CST/public/js/jquery.jOrgChart3.js"></script>
<script type="text/javascript" src="http://localhost/CST/public/js/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://localhost/CST/public/js/setting.js"></script>