将多个JS文件添加到Angular中?

时间:2020-06-26 11:45:35

标签: javascript angular

我需要知道如何在Angular中全局导入所有这些js文件,以便每个组件都可以使用它。

<script src="assets/js/vendors/modernizr-3.7.1.min.js"></script>
<script src="assets/js/vendors/jquery-3.3.1.min.js"></script>
<script src="assets/js/vendors/bootstrap.bundle.min.js"></script>
<script src="assets/js/vendors/jquery.meanmenu.min.js"></script>
<script src="assets/js/vendors/slick.min.js"></script>
<script src="assets/js/vendors/jquery.nice-select.js"></script>
<script src="assets/js/vendors/jquery.countdown.min.js"></script>
<script src="assets/js/vendors/jquery.ajaxchimp.min.js"></script>
<script src="assets/js/vendors/jquery.fancybox.min.js"></script>
<script src="assets/js/vendors/imagesloaded.pkgd.min.js"></script>
<script src="assets/js/vendors/isotope.pkgd.min.js"></script>
<script src="assets/js/vendors/instafeed.min.js"></script>
<script src="assets/js/vendors/jquery.nstslider.min.js"></script>
<script src="assets/js/vendors/ScrollMagic.min.js"></script>
<script src="assets/js/main.js"></script>

我尝试将其添加到index.html中,就像通常情况下那样,但是我没有用。

2 个答案:

答案 0 :(得分:0)

您应该按需要的顺序加载Javascript。如果您使用的是jQuery插件,则应在这些插件之前加载jQuery,因为它们可能会实例化某些使用jQuery对象的对象,而您不知道。

答案 1 :(得分:0)

您必须使用来安装它们

npm install

例如npm install bootstrap

像这样将它们添加到angular.json文件中

"build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/RecipeBook",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.app.json",
            "aot": false,
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "node_modules/bootstrap/dist/css/bootstrap.min.css",
              "src/styles.css"
            ],
            "scripts": [
              "node_modules/bootstrap/dist/js/bootstrap.min.js"
            ]
          }