Question

我正在尝试在Angular 4应用程序中使用预先设计的引导程序模板（模板 - https://startbootstrap.com/template-overviews/agency/）。 css样式已成功加载。但是在加载所需的.js文件时，它会发出以下警告。此外，.js文件应提供的效果不起作用。 我应该如何正确加载这些样式和.js文件？

在angular-cli.json
中

"scripts": [
    "../node_modules/jquery/dist/jquery.min.js",
    "assets/vendor/bootstrap/js/bootstrap.bundle.min.js",
    "assets/vendor/jquery-easing/jquery.easing.min.js",
    "assets/js/jqBootstrapValidation.js",
    "assets/js/contact_me.js",
    "assets/js/agency.min.js",
    "assets/js/agency.js"
  ],

在styles.css
中

@import "~bootstrap/dist/css/bootstrap.min.css";
@import "~font-awesome/css/font-awesome.css";

在index.html中

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css">
<link href='https://fonts.googleapis.com/css?family=Kaushan+Script' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Roboto+Slab:400,100,300,700' rel='stylesheet' type='text/css'>
<!-- Custom Style  -->
<link rel="stylesheet" href="styles.css">

运行ng build
时收到的警告

WARNING in ./~/raw-loader!./~/source-map-loader!./src/assets/vendor/bootstrap/js/bootstrap.bundle.min.js
Cannot find SourceMap 'bootstrap.bundle.min.js.map': Error: Can't resolve './bootstrap.bundle.min.js.map' in 'E:\MEAN 2\MEGATRON\src\assets\vendor\bootstrap\js'
@ ./~/script-loader!./src/assets/vendor/bootstrap/js/bootstrap.bundle.min.js 1:77-292
@ multi script-loader!./~/jquery/dist/jquery.min.js script-loader!./src/assets/vendor/bootstrap/js/bootstrap.bundle.min.js script-loader!./src/assets/vendor/jquery-easing/jquery.
easing.min.js script-loader!./src/assets/js/jqBootstrapValidation.js script-loader!./src/assets/js/contact_me.js script-loader!./src/assets/js/agency.min.js script-loader!./src/as
sets/js/agency.js

Answer 1

确保供应商/目录中存在bootstrap.bundle.min.js。我想你应该从node_modules /目录中导入它。

"scripts": [
"../node_modules/jquery/dist/jquery.min.js",
"../node_modules/bootstrap/js/bootstrap.bundle.min.js",
"../node_modules/jquery-easing/jquery.easing.min.js",
...
]

无法将.js文件加载到Angular 4应用程序中

1 个答案: