Bootstrap vs Angular 2:多脚本加载器中的错误!未找到模块:错误:/~/bootstrap/dist/js/bootstrap.js

Bootstrap vs Angular 2: ERROR in multi script-loader! Module not found: Error: /~/bootstrap/dist/js/bootstrap.js

提问人:L. Kvri 提问时间:3/21/2017 最后编辑:noufalcepL. Kvri 更新时间:1/8/2019 访问量:8085

问:

我用 ng new klw 创建了一个新的 Angular 2 项目

  1. 我安装了引导程序:npm install bootstrap@next
  2. 在 Angular 中添加了样式和脚本

    "styles": [
        "styles.css",
    "../node_modules/bootstrap/dist/css/bootstrap.css"
      ],
      "scripts": [
    "../node_modules/jquery/dist/jquery.js",
    "../node_modules/tether/dist/js/tether.js",
    "../node_modules/bootstrap/dist/js/bootstrap.js"
      ],
    
  3. 集成引导程序 4 到angular-cli: npm install --save @ng-bootstrap/ngbootstrap

  4. 添加了 NgbModule 导入到app.module.ts
  5. 已添加到将 NgbModule 部分导入app.module.ts
  6. 修改后的 app.module,.html 添加:<NgbAlert> Alert text </NgbAlert>

这是我错过的吗?

当我运行ng serve时,我收到以下错误:

ERROR in Error encountered resolving symbol values statically. Could not resolve @ng-bootstrap/ng-bootstrap relative to F:/src/prjs/angular2/pilot/klw/src/app/app.module.ts., resolving symbol AppModule in F:/src/prjs/angular2/pilot/klw/src/app/app.module.ts, resolving symbol AppModule in F:/src/prjs/angular2/pilot/klw/src/app/app.module.ts

ERROR in multi script-loader!./~/jquery/dist/jquery.js script-loader!./~/tether/dist/js/tether.js script-loader!./~/bootstrap/dist/js/bootstrap.js
Module not found: Error: Can't resolve 'F:\src\prjs\angular2\pilot\klw\node_modules\jquery\dist\jquery.js' in 'F:\src\prjs\angular2\pilot\klw'
 @ multi script-loader!./~/jquery/dist/jquery.js script-loader!./~/tether/dist/js/tether.js script-loader!./~/bootstrap/dist/js/bootstrap.js

ERROR in multi script-loader!./~/jquery/dist/jquery.js script-loader!./~/tether/dist/js/tether.js script-loader!./~/bootstrap/dist/js/bootstrap.js
Module not found: Error: Can't resolve 'F:\src\prjs\angular2\pilot\klw\node_modules\tether\dist\js\tether.js' in 'F:\src\prjs\angular2\pilot\klw'

ERROR in multi script-loader!./~/jquery/dist/jquery.js script-loader!./~/tether/dist/js/tether.js script-loader!./~/bootstrap/dist/js/bootstrap.js
Module not found: Error: Can't resolve 'F:\src\prjs\angular2\pilot\klw\node_modules\tether\dist\js\tether.js' in 'F:\src\prjs\angular2\pilot\klw'
 @ multi script-loader!./~/jquery/dist/jquery.js script-loader!./~/tether/dist/js/tether.js script-loader!./~/bootstrap/dist/js/bootstrap.js

ERROR in multi script-loader!./~/jquery/dist/jquery.js script-loader!./~/tether/dist/js/tether.js script-loader!./~/bootstrap/dist/js/bootstrap.js
Module not found: Error: Can't resolve 'F:\src\prjs\angular2\pilot\klw\node_modules\bootstrap\dist\js\bootstrap.js' in 'F:\src\prjs\angular2\pilot\klw'
 @ multi script-loader!./~/jquery/dist/jquery.js script-loader!./~/tether/dist/js/tether.js script-loader!./~/bootstrap/dist/js/bootstrap.js

ERROR in multi ./src/styles.css ./~/bootstrap/dist/css/bootstrap.css
Module not found: Error: Can't resolve 'F:\src\prjs\angular2\pilot\klw\node_modules\bootstrap\dist\css\bootstrap.css' in 'F:\src\prjs\angular2\pilot\klw'
 @ multi ./src/styles.css ./~/bootstrap/dist/css/bootstrap.css

ERROR in F:/src/prjs/angular2/pilot/klw/src/app/app.module.ts (8,25): Cannot find module '@ng-bootstrap/ng-bootstrap'.)

ERROR in ./src/app/app.module.ts
Module not found: Error: Can't resolve '@ng-bootstrap/ng-bootstrap' in 'F:\src\prjs\angular2\pilot\klw\src\app'
 @ ./src/app/app.module.ts 15:0-55
 @ ./src/main.ts
 @ multi webpack-dev-server/client?http://localhost:4200/ ./src/main.ts
webpack: Failed to compile.
角度 引导模态

评论

0赞 L. Kvri 3/21/2017
我不知道为什么没有找到系绳、jquery 和 bootstrap。
0赞 L. Kvri 3/21/2017
进一步澄清以下步骤 2.:我在 angular 中添加了样式和脚本,正好在 angular-cli.json 3 中。:将导入完全包含在app.module.ts中: - 文件顶部:从“@ng-bootstrap/ng-bootstrap”导入{NgbModule} - 添加到@NgModule添加的 NgbModule 的导入部分
0赞 pkozlowski.opensource 3/21/2017
使用提供原生 Angular 2 集成且不需要 jQuery、tether 或任何其他外部依赖项的 ng-bootstrap.github.io 怎么样?
0赞 L. Kvri 3/26/2017
您好,感谢您的评论!
1赞 pkozlowski.opensource 4/7/2017
你不需要 SASS,Bootstrap 4 自带预编译的 CSS。但是,如果你需要处理 SASS,你现在可以在 node.js 上没有 ruby 来做到这一点(猜想大多数人当时都在使用 node.js 来支持他们的构建工具)。

答:

0赞 Subhajit Das 5/15/2017 #1

我有同样的问题。但我已经解决了。 主要错误在于来自“node_modules”文件夹的脚本和 css。 转到“.angular-cli.json”文件并删除所有“node_modules”文件,然后手动键入所有脚本和CSS的路径。

谢谢

评论

0赞 napstercake 1/16/2018
转到“angular-cli.json”文件并删除所有“node_modules”文件?它有什么区别?
0赞 Emir Hazır 6/3/2017 #2

正确的方法:

npm install --save bootstrap@next
2赞 Dmitry Grinko 10/17/2017 #3
  1. 删除package.json中 @angular/CDK 和 @angular/material 的符号 ^
  2. 删除node_modules并package-lock.json
  3. npm 缓存清理 -f
  4. npm i

它适用于我的情况。希望对你有帮助

评论

0赞 DoubleA 1/9/2018
这对我来说非常有效。我跳过了步骤 1,因为我没有使用这些依赖项。下次我跑步时像发条一样奔跑ng serve
0赞 nandhakumar 1/8/2019 #4

我有同样的问题,但已修复。 请检查内部.angular-cli.json所有链接的脚本文件是否可用。 如果任何一个脚本文件不可用,则会出现 @ multi script-loader 错误。正确链接所有脚本路径。 请在这里查看:https://github.com/angular/angular-cli/issues/5665#issuecomment-452282834