External Javascript is not working on first load in angular

Question

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.

this link might help if you are trying to import js in Angular without typing — Rahul Singh
– Rahul Singh, Commented Sep 6, 2017 at 6:56

KevinKimaru · Accepted Answer · 2019-11-03 12:42:17Z

4

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 Nov 3, 2019 at 12:42

KevinKimaru

562 silver badges4 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Muhammad Usman Khan · Accepted Answer · 2019-05-22 12:47:09Z

0

Firstly you have add this value in script (type="text/javascript")then see it.

if again not working then please all css and js file insert in angular-cli.json. here is code

"styles": [
              "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
              "src/styles.scss",
              "../node_modules/videogular2/fonts/videogular.css",
              "../node_modules/owl.carousel/dist/assets/owl.carousel.css",
              "../node_modules/owl.carousel/dist/assets/owl.theme.default.css"
            ],
 "scripts": [
              "../node_modules/owl.carousel/dist/owl.carousel.js"
            ]

answered May 22, 2019 at 12:47

Muhammad Usman Khan

1

Collectives™ on Stack Overflow

External Javascript is not working on first load in angular

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related