Guide "How to use Bootstrap 4 and Sass (and jQuery)" is deprecated

[Andrey-Pavlov]

This guide is deprecated https://github.com/AngularClass/angular2-webpack-starter/wiki/How-to-use-Bootstrap-4-and-Sass-(and-jQuery)

[kjartanvalur]

@Andrey-Pavlov I´m currentry struggling to do this right... Can you please share some guidance?

[kjartanvalur]

And I dont need any jquery dependancy

[Andrey-Pavlov]

@kjartanvalur Sure, but without jquery not all bootstrap features will be available.

1) npm i --save-dev bootstrap@alpha.5 bootstrap-loader tether jquery (but it's optional)

2) webpack.common.js

after new LoaderOptionsPlugin({}) add:

 new webpack.ProvidePlugin({
        $: "jquery",
        jQuery: "jquery",
        "window.jQuery": "jquery",
        Tether: "tether",
        "window.Tether": "tether",
        Tooltip: "exports?Tooltip!bootstrap/js/dist/tooltip",
        Alert: "exports?Alert!bootstrap/js/dist/alert",
        Button: "exports?Button!bootstrap/js/dist/button",
        Carousel: "exports?Carousel!bootstrap/js/dist/carousel",
        Collapse: "exports?Collapse!bootstrap/js/dist/collapse",
        Dropdown: "exports?Dropdown!bootstrap/js/dist/dropdown",
        Modal: "exports?Modal!bootstrap/js/dist/modal",
        Popover: "exports?Popover!bootstrap/js/dist/popover",
        Scrollspy: "exports?Scrollspy!bootstrap/js/dist/scrollspy",
        Tab: "exports?Tab!bootstrap/js/dist/tab",
        Util: "exports?Util!bootstrap/js/dist/util"
      })

3) Add loaders for sass under (npm i --save-dev sass-loader) and all UNMEET DEPENDENCIES

        {
          test: /\.css$/,
          loaders: ['to-string-loader', 'css-loader']
        },

        {
          test: /\.scss$/,
          loaders: ['to-string-loader', 'css-loader', 'sass-loader']
        },

4) vendor.ts

import 'bootstrap-loader';
import 'jquery';

Frequently errors:

• resolve-url-loader, 'path' of undefined
• Path must be a string. Received undefined

You need to add next rows to LoaderOptionPlugin context: helpers.root(), output: { path: helpers.root('dist') },

  /**
       * Plugin LoaderOptionsPlugin (experimental)
       *
       * See: https://gist.github.com/sokra/27b24881210b56bbaff7
       */
      new LoaderOptionsPlugin({
        debug: true,
        options: {
           context: helpers.root(),
          output: {
              path: helpers.root('dist')
          },
          /**
           * Static analysis linter for TypeScript advanced options configuration
           * Description: An extensible linter for the TypeScript language.
           *
           * See: https://github.com/wbuchwalter/tslint-loader
           */
          tslint: {
            emitErrors: false,
            failOnHint: false,
            resourcePath: 'src'
          }
        }
      })
    ],

Spend 6 hours to resolve that 2 issues. :( https://github.com/shakacode/bootstrap-loader/issues/191

[sky-coding]

@Andrey-Pavlov thank you so much for doing the leg-work on this.

Updating webpack.common.js's LoaderOptionsPlugin was ineffective for me, I also had to update webpack.dev.js's LoaderOptionsPlugin for dev, and I'm assuming the prod config as well.

[kjartanvalur]

Well done @Andrey-Pavlov 👍

[byhoratiss]

I've managed to get rid of the issue by following @Andrey-Pavlov steps, but when using the npm run server:dev command I get: (sorry for the long dump)

ERROR in ./~/bootstrap-loader/lib/bootstrap.scripts.loader.js?{"bootstrapVersion":4,"useCustomIconFontPath":false,"extractStyles":false,"styleLoaders":["style","css","sass"],"styles":["mixins","normalize","print","glyphicons","scaffolding","type","code","grid","tables","forms","buttons","component-animations","dropdowns","button-groups","input-groups","navs","navbar","breadcrumbs","pagination","pager","labels","badges","jumbotron","thumbnails","alerts","progress-bars","media","list-group","panels","wells","responsive-embed","close","modals","tooltip","popovers","carousel","utilities","responsive-utilities"],"scripts":["transition","alert","button","carousel","collapse","dropdown","modal","tooltip","popover","scrollspy","tab","affix"],"configFilePath":"/home/horacio/Sites/angular2-webpack-starter/.bootstraprc","bootstrapPath":"/home/horacio/Sites/angular2-webpack-starter/~/bootstrap","bootstrapRelPath":"../bootstrap"}!./~/bootstrap-loader/no-op.js
Module not found: Error: Can't resolve '../bootstrap/js/dist/transition' in '/home/horacio/Sites/angular2-webpack-starter/node_modules/bootstrap-loader'
 @ ./~/bootstrap-loader/lib/bootstrap.scripts.loader.js?{"bootstrapVersion":4,"useCustomIconFontPath":false,"extractStyles":false,"styleLoaders":["style","css","sass"],"styles":["mixins","normalize","print","glyphicons","scaffolding","type","code","grid","tables","forms","buttons","component-animations","dropdowns","button-groups","input-groups","navs","navbar","breadcrumbs","pagination","pager","labels","badges","jumbotron","thumbnails","alerts","progress-bars","media","list-group","panels","wells","responsive-embed","close","modals","tooltip","popovers","carousel","utilities","responsive-utilities"],"scripts":["transition","alert","button","carousel","collapse","dropdown","modal","tooltip","popover","scrollspy","tab","affix"],"configFilePath":"/home/horacio/Sites/angular2-webpack-starter/.bootstraprc","bootstrapPath":"/home/horacio/Sites/angular2-webpack-starter/~/bootstrap","bootstrapRelPath":"../bootstrap"}!./~/bootstrap-loader/no-op.js 1:0-43
 @ ./~/bootstrap-loader/lib/bootstrap.loader.js!./~/bootstrap-loader/no-op.js
 @ ./~/bootstrap-loader/loader.js
 @ ./src/vendor.browser.ts
 @ multi vendor

ERROR in ./~/bootstrap-loader/lib/bootstrap.scripts.loader.js?{"bootstrapVersion":4,"useCustomIconFontPath":false,"extractStyles":false,"styleLoaders":["style","css","sass"],"styles":["mixins","normalize","print","glyphicons","scaffolding","type","code","grid","tables","forms","buttons","component-animations","dropdowns","button-groups","input-groups","navs","navbar","breadcrumbs","pagination","pager","labels","badges","jumbotron","thumbnails","alerts","progress-bars","media","list-group","panels","wells","responsive-embed","close","modals","tooltip","popovers","carousel","utilities","responsive-utilities"],"scripts":["transition","alert","button","carousel","collapse","dropdown","modal","tooltip","popover","scrollspy","tab","affix"],"configFilePath":"/home/horacio/Sites/angular2-webpack-starter/.bootstraprc","bootstrapPath":"/home/horacio/Sites/angular2-webpack-starter/~/bootstrap","bootstrapRelPath":"../bootstrap"}!./~/bootstrap-loader/no-op.js
Module not found: Error: Can't resolve '../bootstrap/js/dist/affix' in '/home/horacio/Sites/angular2-webpack-starter/node_modules/bootstrap-loader'
 @ ./~/bootstrap-loader/lib/bootstrap.scripts.loader.js?{"bootstrapVersion":4,"useCustomIconFontPath":false,"extractStyles":false,"styleLoaders":["style","css","sass"],"styles":["mixins","normalize","print","glyphicons","scaffolding","type","code","grid","tables","forms","buttons","component-animations","dropdowns","button-groups","input-groups","navs","navbar","breadcrumbs","pagination","pager","labels","badges","jumbotron","thumbnails","alerts","progress-bars","media","list-group","panels","wells","responsive-embed","close","modals","tooltip","popovers","carousel","utilities","responsive-utilities"],"scripts":["transition","alert","button","carousel","collapse","dropdown","modal","tooltip","popover","scrollspy","tab","affix"],"configFilePath":"/home/horacio/Sites/angular2-webpack-starter/.bootstraprc","bootstrapPath":"/home/horacio/Sites/angular2-webpack-starter/~/bootstrap","bootstrapRelPath":"../bootstrap"}!./~/bootstrap-loader/no-op.js 12:0-38
 @ ./~/bootstrap-loader/lib/bootstrap.loader.js!./~/bootstrap-loader/no-op.js
 @ ./~/bootstrap-loader/loader.js
 @ ./src/vendor.browser.ts
 @ multi vendor

ERROR in ./~/css-loader!./~/to-string-loader/src/to-string.js!./~/css-loader!./src/app/app.component.css
Module build failed: Unknown word (2:9)

  1 | 
> 2 |         var result = require("!!./../../node_modules/css-loader/index.js!./app.component.css");
    |         ^
  3 | 
  4 |         if (typeof result === "string") {
  5 |             module.exports = result;

 @ ./src/app/app.component.css 2:21-190
 @ ./src/app/app.component.ts
 @ ./src/app/app.module.ts
 @ ./src/app/index.ts
 @ ./src/main.browser.ts
 @ multi main

ERROR in ./~/css-loader!./~/to-string-loader/src/to-string.js!./~/css-loader!./src/app/home/home.component.css
Module build failed: Unknown word (2:9)

  1 | 
> 2 |         var result = require("!!./../../../node_modules/css-loader/index.js!./home.component.css");
    |         ^
  3 | 
  4 |         if (typeof result === "string") {
  5 |             module.exports = result;

 @ ./src/app/home/home.component.css 2:21-200
 @ ./src/app/home/home.component.ts
 @ ./src/app/home/index.ts
 @ ./src/app/app.module.ts
 @ ./src/app/index.ts
 @ ./src/main.browser.ts
 @ multi main

ERROR in ./~/css-loader!./~/resolve-url-loader!./~/sass-loader?sourceMap!./~/bootstrap-loader/lib/bootstrap.styles.loader.js?{"bootstrapVersion":4,"useCustomIconFontPath":false,"extractStyles":false,"styleLoaders":["style","css","sass"],"styles":["mixins","normalize","print","glyphicons","scaffolding","type","code","grid","tables","forms","buttons","component-animations","dropdowns","button-groups","input-groups","navs","navbar","breadcrumbs","pagination","pager","labels","badges","jumbotron","thumbnails","alerts","progress-bars","media","list-group","panels","wells","responsive-embed","close","modals","tooltip","popovers","carousel","utilities","responsive-utilities"],"scripts":["transition","alert","button","carousel","collapse","dropdown","modal","tooltip","popover","scrollspy","tab","affix"],"configFilePath":"/home/horacio/Sites/angular2-webpack-starter/.bootstraprc","bootstrapPath":"/home/horacio/Sites/angular2-webpack-starter/~/bootstrap","bootstrapRelPath":"../bootstrap"}!./~/bootstrap-loader/no-op.js
Module build failed: 
undefined
^
      File to import not found or unreadable: ../bootstrap/scss/_glyphicons
Parent style sheet: stdin
      in /home/horacio/Sites/angular2-webpack-starter/node_modules/bootstrap-loader/no-op.js (line 5, column 1)
 @ ./~/style-loader!./~/css-loader!./~/resolve-url-loader!./~/sass-loader?sourceMap!./~/bootstrap-loader/lib/bootstrap.styles.loader.js?{"bootstrapVersion":4,"useCustomIconFontPath":false,"extractStyles":false,"styleLoaders":["style","css","sass"],"styles":["mixins","normalize","print","glyphicons","scaffolding","type","code","grid","tables","forms","buttons","component-animations","dropdowns","button-groups","input-groups","navs","navbar","breadcrumbs","pagination","pager","labels","badges","jumbotron","thumbnails","alerts","progress-bars","media","list-group","panels","wells","responsive-embed","close","modals","tooltip","popovers","carousel","utilities","responsive-utilities"],"scripts":["transition","alert","button","carousel","collapse","dropdown","modal","tooltip","popover","scrollspy","tab","affix"],"configFilePath":"/home/horacio/Sites/angular2-webpack-starter/.bootstraprc","bootstrapPath":"/home/horacio/Sites/angular2-webpack-starter/~/bootstrap","bootstrapRelPath":"../bootstrap"}!./~/bootstrap-loader/no-op.js 4:14-1174
 @ ./~/bootstrap-loader/lib/bootstrap.loader.js!./~/bootstrap-loader/no-op.js
 @ ./~/bootstrap-loader/loader.js
 @ ./src/vendor.browser.ts
 @ multi vendor

Any clues? I'm so lost!

[ValentinFunk]

@byhoratiss did you manage to fix it? I believe the first error can be fixed by going for 4.0.0-beta.4 for bootstrap but I still get

Module build failed: Unknown word (2:9)

  1 | 
> 2 |         var result = require("!!./../../node_modules/css-loader/index.js!./app.component.css");
    |         ^
  3 | 
  4 |         if (typeof result === "string") {
  5 |             module.exports = result;

 @ ./src/app/app.component.css 2:21-190
 @ ./src/app/app.component.ts
 @ ./src/app/app.module.ts
 @ ./src/app/index.ts
 @ ./src/main.browser.ts
 @ multi main

ERROR in ./~/css-loader!./~/to-string-loader/src/to-string.js!./~/css-loader!./src/app/home/home.component.css
Module build failed: Unknown word (2:9)

  1 | 
> 2 |         var result = require("!!./../../../node_modules/css-loader/index.js!./home.component.css");
    |         ^
  3 | 
  4 |         if (typeof result === "string") {
  5 |             module.exports = result;

 @ ./src/app/home/home.component.css 2:21-200
 @ ./src/app/home/home.component.ts
 @ ./src/app/home/index.ts
 @ ./src/app/app.module.ts
 @ ./src/app/index.ts
 @ ./src/main.browser.ts
 @ multi main

ERROR in ./~/css-loader!./~/postcss-loader!./~/resolve-url/resolve-url.js!./~/sass-loader?sourceMap!./~/bootstrap-loader/lib/bootstrap.styles.loader.js!./~/bootstrap-loader/no-op.js
Module build failed: ReferenceError: document is not defined
    at Object.resolveUrl (/home/valentin/angular2-webpack-starter/node_modules/resolve-url/resolve-url.js:21:16)
 @ ./~/style-loader!./~/css-loader!./~/postcss-loader!./~/resolve-url/resolve-url.js!./~/sass-loader?sourceMap!./~/bootstrap-loader/lib/bootstrap.styles.loader.js!./~/bootstrap-loader/no-op.js 4:14-192 13:2-17:4 14:20-198
 @ ./~/bootstrap-loader/lib/bootstrap.loader.js!./~/bootstrap-loader/no-op.js
 @ ./~/bootstrap-loader/loader.js
 @ ./src/vendor.browser.ts
 @ multi vendor

[byhoratiss]

No I couldn't. I tried a lot and desisted. 😩

El 22 nov. 2016 4:04 PM, "Valentin Funk" notifications@github.com escribió:

@byhoratiss https://github.com/byhoratiss did you manage to fix it? I believe the first error can be fixed by going for 4.0.0-beta.4 for bootstrap but I still get

Module build failed: Unknown word (2:9)

1 |

2 | var result = require("!!./../../node_modules/css-loader/index.js!./app.component.css"); | ^ 3 | 4 | if (typeof result === "string") { 5 | module.exports = result;

@ ./src/app/app.component.css 2:21-190 @ ./src/app/app.component.ts @ ./src/app/app.module.ts @ ./src/app/index.ts @ ./src/main.browser.ts @ multi main

ERROR in ./~/css-loader!./~/to-string-loader/src/to-string.js!./~/css-loader!./src/app/home/home.component.css Module build failed: Unknown word (2:9)

1 |

2 | var result = require("!!./../../../node_modules/css-loader/index.js!./home.component.css"); | ^ 3 | 4 | if (typeof result === "string") { 5 | module.exports = result;

@ ./src/app/home/home.component.css 2:21-200 @ ./src/app/home/home.component.ts @ ./src/app/home/index.ts @ ./src/app/app.module.ts @ ./src/app/index.ts @ ./src/main.browser.ts @ multi main

ERROR in ./~/css-loader!./~/postcss-loader!./~/resolve-url/resolve-url.js!./~/sass-loader?sourceMap!./~/bootstrap-loader/lib/bootstrap.styles.loader.js!./~/bootstrap-loader/no-op.js Module build failed: ReferenceError: document is not defined at Object.resolveUrl (/home/valentin/angular2-webpack-starter/node_modules/resolve-url/resolve-url.js:21:16) @ ./~/style-loader!./~/css-loader!./~/postcss-loader!./~/resolve-url/resolve-url.js!./~/sass-loader?sourceMap!./~/bootstrap-loader/lib/bootstrap.styles.loader.js!./~/bootstrap-loader/no-op.js 4:14-192 13:2-17:4 14:20-198 @ ./~/bootstrap-loader/lib/bootstrap.loader.js!./~/bootstrap-loader/no-op.js @ ./~/bootstrap-loader/loader.js @ ./src/vendor.browser.ts @ multi vendor

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/AngularClass/angular2-webpack-starter/issues/1156#issuecomment-262333323, or mute the thread https://github.com/notifications/unsubscribe-auth/AAd3mHvPWf9pyaPQnfTrDcPySEPLBRnbks5rAzxzgaJpZM4KqjfV .

[balakonda]

Too many issues with this already reported, and the guide is not useful. Please update soon.

[Marcdup1]

Has anyone figured out the solution to this issue?

[vadhavkar]

In .bootstraprc add '-loader' suffix to all the webpack loaders in 'styleLoaders'.

# Webpack loaders, order matters
styleLoaders:
  - style-loader
  - css-loader
  - postcss-loader
  - sass-loader  #<--- Beginning with Webpack v2.1.0-beta.26, the '-loader' suffix is required for all loaders.

[sebastianhaas]

I updated the wiki page according to my setup. Took me hours to get this running finally.

[DerZyklop]

I fixed it for my setup with @vadhavkar‘s comment and changed @Andrey-Pavlov‘s example. I added -loader to all exports like this:

new webpack.ProvidePlugin({
    $: "jquery",
    jQuery: "jquery",
    "window.jQuery": "jquery",
    Tether: "tether",
    "window.Tether": "tether",
    Tooltip: "exports-loader?Tooltip!bootstrap/js/dist/tooltip",
    Alert: "exports-loader?Alert!bootstrap/js/dist/alert",
    Button: "exports-loader?Button!bootstrap/js/dist/button",
    Carousel: "exports-loader?Carousel!bootstrap/js/dist/carousel",
    Collapse: "exports-loader?Collapse!bootstrap/js/dist/collapse",
    Dropdown: "exports-loader?Dropdown!bootstrap/js/dist/dropdown",
    Modal: "exports-loader?Modal!bootstrap/js/dist/modal",
    Popover: "exports-loader?Popover!bootstrap/js/dist/popover",
    Scrollspy: "exports-loader?Scrollspy!bootstrap/js/dist/scrollspy",
    Tab: "exports-loader?Tab!bootstrap/js/dist/tab",
    Util: "exports-loader?Util!bootstrap/js/dist/util"
})

[maitham]

anyone?

[sheerlox]

I personally recommend using ng-bootstrap, which integrate with Angular 2 nicely with directives, service and components !

The setup is easy: 1) npm install bootstrap@4.0.0-alpha.6 --save 2) Import the sass file into you app (import '../path/to/node_modules/bootstrap/scss/bootstrap.scss') 3) Import ng-bootstrap into your main module:

import { NgbModule } from '@ng-bootstrap/ng-bootstrap'

@NgModule({
  bootstrap: [ AppComponent ],
  declarations: [
    AppComponent,
  ],
  imports: [
    NgbModule.forRoot()
  ],
  providers: [
  ]
})
export class AppModule {
}