Issue
I just start working on Angular 4. My client gives me web template and asks me to convert it to Angular 4 project. The template has many JS and CSS file, so I include all JS and CSS that I need in index.html. BUT, the JS is not working on first load and need to refresh the page to get it work. Also, after refresh when i move to other routes the JS not working again.
I have filter some unused JS and remove it, i think if there is wrong or miss JS to include it will be show an error. But no error just need to refresh.
this is my index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Ui</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" href="assets/global/images/favicon.png" type="image/png">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link rel="shortcut icon" href="assets/global/images/favicon.png" type="image/png">
<link href="assets/global/plugins/datatables/dataTables.min.css" rel="stylesheet">
<!-- END PAGE STYLE -->
<link href="assets/global/css/style.css" rel="stylesheet">
<link href="assets/global/css/theme.css" rel="stylesheet">
<link href="assets/global/css/ui.css" rel="stylesheet">
<link href="assets/admin/md-layout1/material-design/css/material.css" rel="stylesheet">
<link href="assets/admin/md-layout1/css/layout.css" rel="stylesheet">
<script src="assets/global/plugins/modernizr/modernizr-2.6.2-respond-1.1.0.min.js"></script>
</head>
<body class="sidebar-condensed fixed-topbar fixed-sidebar theme-sdtl account separate-inputs dashboard" data-page="login">
<app-root></app-root>
<script src="assets/global/plugins/jquery/jquery-3.1.0.min.js"></script>
<script src="assets/global/plugins/jquery/jquery-migrate-3.0.0.min.js"></script>
<script src="assets/global/plugins/jquery-ui/jquery-ui.min.js"></script>
<script src="assets/global/plugins/bootstrap/js/bootstrap.min.js"></script>
<script src="assets/global/plugins/appear/jquery.appear.js"></script>
<script src="assets/global/plugins/jquery-cookies/jquery.cookies.min.js"></script>
<script src="assets/global/plugins/mcustom-scrollbar/jquery.mCustomScrollbar.concat.min.js"></script>
<script src="assets/global/plugins/bootstrap-dropdown/bootstrap-hover-dropdown.min.js"></script> <!-- Show Dropdown on Mouseover -->
<script src="assets/global/plugins/select2/dist/js/select2.full.min.js"></script> <!-- Select Inputs -->
<script src="assets/global/plugins/icheck/icheck.min.js"></script> <!-- Checkbox & Radio Inputs -->
<script src="assets/global/plugins/bootstrap-progressbar/bootstrap-progressbar.min.js"></script> <!-- Animated Progress Bar -->
<script src="assets/global/js/builder.js"></script>
<script src="assets/global/js/application.js"></script> <!-- Main Application Script -->
<script src="assets/global/js/plugins.js"></script> <!-- Main Plugin Initialization Script -->
<script src="assets/global/plugins/noty/jquery.noty.packaged.min.js"></script> <!-- Notifications -->
<script src="assets/global/plugins/charts-highstock/js/highstock.js"></script> <!-- financial Charts -->
<script src="assets/global/js/pages/dashboard.js"></script>
<script src="assets/global/plugins/bootstrap-loading/lada.min.js"></script>
<script src="assets/global/js/pages/login-v1.js"></script>
<script src="assets/global/plugins/datatables/jquery.dataTables.min.js"></script> <!-- Tables Filtering, Sorting & Editing -->
<script src="assets/global/plugins/datatables/dataTables.bootstrap.min.js"></script>
<script src="assets/global/js/pages/table_dynamic.js"></script>
<script src="assets/admin/md-layout1/material-design/js/material.js"></script>
<script src="assets/admin/layout.js"></script>
</body>
</html>
NOTE: I didn't add anything in .angular.cli.json, i have tried it and still the same.
Solution
I had the same issue.
What is happening is that your external scripts are modifying the DOM before it is has been renedered by angular, so they have no effect.
You have to find a way to load the scripts after the components have rendered. I found this to be very help on rendering scripts dynamically.
I know am answering this question late, but hope it helps someone somewhere.
Answered By - KevinKimaru
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.