导入bootstrap in angular 6 angular.json错误:ENOENT:没有这样的文件或目录

时间:2018-05-10 19:54:28

标签: angular bootstrap-4

在Angular 6中导入引导程序的正确方法是什么。在以前的版本中,我这样做了,它运行正常。

angular-cli.json (Angular 5)

"styles": [
    "styles.scss"
  ],
"scripts": [
    "../node_modules/jquery/dist/jquery.slim.min.js",
    "../node_modules/popper.js/dist/umd/popper.min.js",
    "../node_modules/bootstrap/dist/js/bootstrap.min.js"
  ],

angular.json (Angular 6)

"styles": [
          "src/styles.css"
        ],
"scripts": [
          "../node_modules/jquery/dist/jquery.slim.min.js",
          "../node_modules/popper.js/dist/umd/popper.min.js",
          "../node_modules/bootstrap/dist/js/bootstrap.min.js"
        ]

得到错误:

Error: ENOENT: no such file or directory, open '/Users/pacozevallos/myApp/node_modules/jquery/dist/jquery.slim.min.js'

2 个答案:

答案 0 :(得分:7)

此配置应该有效,因为您在angular.json文件中看到有用于导入文件的属性"root": "",,因此请按照下面的代码进行操作

"styles": [
   "src/styles.scss",
   "node_modules/bootstrap/dist/css/bootstrap.min.css"
],
"scripts": [
   "node_modules/jquery/dist/jquery.slim.min.js",
   "node_modules/popper.js/dist/umd/popper.min.js",
   "node_modules/bootstrap/dist/js/bootstrap.min.js"
]

答案 1 :(得分:0)

我看到你的错误显示缺少jquery文件。但是bootstrap 4不需要jquery。如果您正在使用该命令 来自angular-cli的npm install --save @ng-bootstrap/ng-bootstrap我认为不需要jquery依赖。 还需要添加到主模块和要实现引导样式的模块的import语句:

import {NgbModule} from '@ng-bootstrap/ng-bootstrap';

没有必要安装jquery,可能会干扰ng-bootstrap代码。 也许你需要删除你可能安装的任何jquery。