H. DJEMAI H. DJEMAI - 1 month ago 13
Node.js Question

How to import bootstrap 3.3.7 module - to be used in angular2 component

I have a trouble importing bootstrap 3.3.7 module and use it:

In package.json: i have bootstrap 3.3.7 as dependency:

{
"name": "plan",
"version": "0.0.0",
"license": "MIT",
"angular-cli": {},
"scripts": {
"start": "ng serve",
"lint": "tslint \"src/**/*.ts\"",
"test": "ng test",
"pree2e": "webdriver-manager update",
"e2e": "protractor"
},
"private": true,
"dependencies": {
"@angular/common": "~2.1.0",
"@angular/compiler": "~2.1.0",
"@angular/core": "~2.1.0",
"@angular/forms": "~2.1.0",
"@angular/http": "~2.1.0",
"@angular/platform-browser": "~2.1.0",
"@angular/platform-browser-dynamic": "~2.1.0",
"@angular/router": "~3.1.0",
"angular2-text-mask": "^1.0.1",
"bootstrap": "^3.3.7",
"core-js": "^2.4.1",
"font-awesome": "^4.7.0",
"jquery": "^3.1.1",
"ng2-bootstrap": "^1.1.16",
"rxjs": "5.0.0-beta.12",
"tether": "^1.3.7",
"ts-helpers": "^1.1.1",
"zone.js": "^0.6.23"
},
"devDependencies": {
"@types/jasmine": "^2.2.30",
"@types/node": "^6.0.42",
"angular-cli": "1.0.0-beta.19-3",
"codelyzer": "1.0.0-beta.1",
"jasmine-core": "2.4.1",
"jasmine-spec-reporter": "2.5.0",
"karma": "1.2.0",
"karma-chrome-launcher": "^2.0.0",
"karma-cli": "^1.0.1",
"karma-jasmine": "^1.0.2",
"karma-remap-istanbul": "^0.2.1",
"protractor": "4.0.9",
"ts-node": "1.2.1",
"tslint": "3.13.0",
"typescript": "~2.0.3",
"webdriver-manager": "10.2.5"
}
}


And in app.modules.ts I have the folowing error when trying to import the module:

Error: Cannot find module ../../../node_modules/bootstrap/dist/js/bootstrap
at line 16 col 27

enter image description here

I have already looked to some questions in SO but it didn't help

Angular2 webpack: how to import bootstrap css

Answer

According to https://angular.io/docs/ts/latest/guide/webpack.html#!#loaders

In your webpack.config.js you should

teach it to process such files into JavaScript with loaders

loaders: [
  {
    test: /\.ts$/
    loaders: 'ts'
  },
  {
    test: /\.css$/
    loaders: 'style!css'
  }
]

And do you imports like this:

import 'uiframework/dist/uiframework.css';