CODEWITHSUNDEEP
angularbootstrap-modal
L. Kvri
L. Kvri

Reputation: 1733

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

I created a new Angular 2 project with ng new klw

  1. I installed bootstrap: npm install bootstrap@next

  2. added style and scripts into 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. Integrated bootstrap 4 to angular-cli: npm install --save @ng-bootstrap/ngbootstrap

  4. added NgbModule import into app.module.ts
  5. added to import section NgbModule into app.module.ts
  6. modified app.module.html added: <NgbAlert> Alert text </NgbAlert>

Which was what I missed to do?

When I run ng serve I got the following ERRORS:

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.

Upvotes: 5

Views: 8094

Answers (4)

nandhakumar
nandhakumar

Reputation: 1

I had same issue but fixed. Please check inside .angular-cli.json all the linked scripts files are available or not. if any one script file is not available the @ multi script-loader error will come. Properly link all the script path. Please check here:https://github.com/angular/angular-cli/issues/5665#issuecomment-452282834

Upvotes: 0

Dmitry Grinko
Dmitry Grinko

Reputation: 15212

  1. remove symbol ^ for @angular/cdk and @angular/material in package.json
  2. remove node_modules and package-lock.json
  3. npm cache clean -f
  4. npm i

It works in my case. Hope it helps you

Upvotes: 2

Emir Hazır
Emir Hazır

Reputation: 1

The correct way:

npm install --save bootstrap@next

Upvotes: 0

Subhajit Das
Subhajit Das

Reputation: 499

I had the same issue. But I have solved it. Main error is in the scripts and css which are coming from the 'node_modules' folder. Go to '.angular-cli.json' file and delete all 'node_modules' files and manually type the path of your all SCRIPTS and CSS ..

Thanks

Upvotes: 0

Related Questions