我刚开始研究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中添加任何内容，我已经尝试过但仍然是这样。
答案 0 :(得分：0)
首先，您已将该值添加到脚本中（类型=“ 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"
]
答案 1 :(得分：0)
我有同样的问题。
发生的事情是您的外部脚本在对DOM进行修改之前，已经对它进行了角度调整，因此它们没有任何作用。
您必须找到一种在渲染组件后加载脚本的方法。我发现 this对于动态呈现脚本非常有帮助。
我知道我要晚回答这个问题，但是希望它能对某人有所帮助。