Question

我用ng new klw

创建了一个新的Angular 2项目

我安装了bootstrap：npm install bootstrap@next

将样式和脚本添加到角度

"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"
  ],

集成bootstrap 4到angular-cli: npm install --save @ng-bootstrap/ngbootstrap
将NgbModule导入添加到 app.module.ts
将导入部分NgbModule添加到 app.module.ts
修改了app.module.html 已添加：<NgbAlert> Alert text </NgbAlert>

我错过了哪个？

当我运行服务时，我得到以下错误：

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.

Answer 1

删除@ angular / cdk中的符号^和package.json中的@ angular / material
删除node_modules和package-lock.json
npm cache clean -f
npm i

它适用于我的情况。希望它能帮到你

Answer 2

我有同样的问题。但我已经解决了。主要错误在脚本和css中，来自“node_modules”＆＃39;夹。转到＆＃39; .angular-cli.json＆＃39;提交并删除所有＆＃39; node_modules＆＃39;文件并手动键入所有SCRIPTS和CSS的路径..

由于

Answer 3

正确的方法：

npm install --save bootstrap@next

Answer 4

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

Bootstrap vs Angular 2：多脚本加载器中的错误！找不到模块：错误：/〜/ bootstrap / did / js / bootstrap.js

4 个答案: