Wiki post: "How to use Bootstrap 3 and Sass and ng2 bootstrap" problems

[oli-ver]

Note: for support questions, please use one of these channels: Chat: AngularClass.slack or Twitter: @AngularClass

• I'm submitting a ...
  [ x ] bug report
  [ ] feature request
  [ ] question about the decisions made in the repository

• Do you want to request a feature or report a bug?

bug

• What is the current behavior?

After installing the dependencies and making the configuration as mentioned in the wiki I get the following error message:
C:\MY\PATH\angular2-starter>npm start

angular2-webpack-starter@5.1.1 start C:\MY\PATH\angular2-starter
npm run server:dev

angular2-webpack-starter@5.1.1 server:dev C:\MY\PATH\angular2-starter
webpack-dev-server --config config/webpack.dev.js --progress --profile --watch --content-base src/

10% building modules 3/3 modules 0 active
Project is running at http://localhost:3000/
webpack output is served from /
Content not from webpack is served from C:\MY\PATH\angular2-starter\src
404s will fallback to /index.html
69% building modules 949/950 modules 1 active ...r2-starter\src\app\app.component.scssTypeError: Path must be a string. Received undefined
at assertPath (path.js:7:11)
at Object.relative (path.js:538:5)
at Object.onRender (C:\MY\PATH\angular2-starter\node_modules\sass-loader\index.js:282:42)
at Object. (C:\MY\PATH\angular2-starter\node_modules\sass-loader\node_modules\async\dist\async.js:2234:31)
at apply (C:\MY\PATH\angular2-starter\node_modules\sass-loader\node_modules\async\dist\async.js:20:25)
at Object. (C:\MY\PATH\angular2-starter\node_modules\sass-loader\node_modules\async\dist\async.js:56:12)
at Object.callback (C:\MY\PATH\angular2-starter\node_modules\sass-loader\node_modules\async\dist\async.js:840:16)
at options.success (C:\MY\PATH\angular2-starter\node_modules\node-sass\lib\index.js:303:32)

npm ERR! Windows_NT 6.1.7601
npm ERR! argv "C:\Program Files\nodejs\node.exe" "C:\Users\user\AppData\Roaming\npm\node_modules\npm\bin\npm-cli.js" "run" "server:dev"
npm ERR! node v6.9.1
npm ERR! npm v3.10.9
npm ERR! code ELIFECYCLE
npm ERR! angular2-webpack-starter@5.1.1 server:dev: webpack-dev-server --config config/webpack.dev.js --progress --profile --watch --content-base src/
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the angular2-webpack-starter@5.1.1 server:dev script 'webpack-dev-server --config config/webpack.dev.js --progress --profile --watch --content-base src/'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the angular2-webpack-starter package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! webpack-dev-server --config config/webpack.dev.js --progress --profile --watch --content-base src/
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs angular2-webpack-starter
npm ERR! Or if that isn't available, you can get their info via:
npm ERR! npm owner ls angular2-webpack-starter
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR! C:\MY\PATH\angular2-starter\npm-debug.log

npm ERR! Windows_NT 6.1.7601
npm ERR! argv "C:\Program Files\nodejs\node.exe" "C:\Users\user\AppData\Roaming\npm\node_modules\npm\bin\npm-cli.js" "start"
npm ERR! node v6.9.1
npm ERR! npm v3.10.9
npm ERR! code ELIFECYCLE
npm ERR! angular2-webpack-starter@5.1.1 start: npm run server:dev
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the angular2-webpack-starter@5.1.1 start script 'npm run server:dev'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the angular2-webpack-starter package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! npm run server:dev
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs angular2-webpack-starter
npm ERR! Or if that isn't available, you can get their info via:
npm ERR! npm owner ls angular2-webpack-starter
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR! C:\MY\PATH\angular2-starter\npm-debug.log

• If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem via
  https://plnkr.co or similar (you can use this template as a starting point: http://plnkr.co/edit/tpl:AvJOMERrnz94ekVua0u5).

I used the steps described in the wiki, but used different package versions, because of incompatibilitites:

npm install --save-dev sass-loader@^4.0.2 css-to-string-loader resolve-url-loader file-loader url-loader tslint@^4.0.0 css-loader@^0.25.0 codelyzer@^2.0.0-beta.3 node-sass@^3.13.1
npm install --save bootstrap-sass ng2-bootstrap

Everything else I did according to the wiki entry.

• What is the expected behavior?

Bootstrap path is loaded in scss file

• What is the motivation / use case for changing the behavior?

Use of Bootstrap 3 and Sass and ng2-bootstrap

• Please tell us about your environment:
  "name": "angular2-webpack-starter",
  "version": "5.1.1",
  angular2-starter-bootstrap.zip

• Angular version: 2.2.1
• Browser: [ Firefox 50.0.2 ]

• Other information (e.g. detailed explanation, stacktraces, related issues, suggestions how to fix, links for us to have context, eg. stackoverflow, gitter, etc)

[oli-ver]

Following a post of @Bariyard in webpack-contrib/sass-loader#285 I changed the loaders as follows:

    {
             test: /\.scss$/,
             loaders: ['raw-loader', 'sass-loader']
    },
    { 
              test: /\.(woff2?|ttf|eot|svg)$/, 
              loader: 'url?limit=10000' 
    },

Now the CSS seems to work, but the components do not work in terms of JavaScript (Dropdowns do not open, etc.)

[oli-ver]

I had to add the ng2-bootstrap modules to app.module.ts. It works now. I edited the wiki post: https://github.com/AngularClass/angular2-webpack-starter/wiki/How-to-use-Bootstrap-3-and-Sass-and-ng2-bootstrap/ee7bbbbbde1632947d98989e980377dd3dc11e4e

[oli-ver]

I have to reopen the issue. Changing the loaders breaks the fonts of bootstrap. The loaders suggested by @ghillert did not work. If I add them the following error message is shown when starting:

404s will fallback to /index.html
69% building modules 977/978 modules 1 active ...k-starter\src\app\app.component.scssTypeError: Path must be a string. Received undefined
at assertPath (path.js:7:11)
at Object.relative (path.js:536:5)
at Object.onRender (C:\angular2-webpack-starter\node_modules\sass-loader\index.js:282:42)
at Object. (C:\angular2-webpack-starter\node_modules\sass-loader\node_modules\async\dist\async.js:2234:31)
at apply (C:\angular2-webpack-starter\node_modules\sass-loader\node_modules\async\dist\async.js:20:25)
at Object. (C:\angular2-webpack-starter\node_modules\sass-loader\node_modules\async\dist\async.js:56:12)
at Object.callback (C:\angular2-webpack-starter\node_modules\sass-loader\node_modules\async\dist\async.js:840:16)
at options.success (C:\angular2-webpack-starter\node_modules\node-sass\lib\index.js:303:32)