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

首先，您已将该值添加到脚本中（类型=“ 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进行修改之前，已经对它进行了角度调整，因此它们没有任何作用。

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

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

外部Javascript无法首次加载角度

2 个答案: