外部 Javascript 在 angular 中首次加载时不工作

Question

我刚刚开始 Angular 4 的工作。我的客户给了我 web 模板，并要求我将其转换为 Angular 4 项目。模板有很多JS和CSS文件，所以我在index.html中包含了我需要的所有JS和CSS。但是，JS 在第一次加载时不工作，需要刷新页面才能使其工作。另外，当我移动到其他路线时刷新后，JS 不再工作。

我过滤了一些未使用的 JS 并将其删除，我想如果有错误或遗漏的 JS 包含它会显示错误。但是没有错误只需要刷新即可。

这是我的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>

注意：我没有在.angular.cli.json中添加任何东西，我试过了，还是一样。

Answer 1

首先你在脚本中添加了这个值(type="text/javascript")然后看到它。

如果再次无法正常工作，请将所有 css 和 js 文件插入 angular-cli.json。这是代码

"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"
            ]

Answer 2

我遇到了同样的问题。

发生的事情是您的外部脚本在 DOM 被 angular 重新渲染之前修改它，因此它们没有任何效果。

您必须找到一种在组件呈现后加载脚本的方法。我发现 this 对动态呈现脚本很有帮助。

我知道我回答这个问题晚了，但希望它能对某个地方的人有所帮助。

外部 Javascript 在 angular 中首次加载时不工作

External Javascript is not working on first load in angular

javascript

angular-ui-router

angular