Issues with Twitter Bootstrap

[cmelion]

I read the documentation on webpack and found it impressive. Uniform loading for all your resources! Use npm for package management! But I soon ran into problems. After generating the initial project, my goal was to modify it slightly to load Twitter Bootstrap, so I tried using npm to install bootstrap-webpack. The following are examples of errors I encountered around unmet peer dependencies:

npm WARN optional Skipping failed optional dependency /chokidar/fsevents:
npm WARN notsup Not compatible with your operating system or architecture: fsevents@1.0.11
npm WARN angular2@2.0.0-beta.9 requires a peer of es6-shim@^0.33.3 but none was installed.
npm WARN app@0.0.0 No description
npm WARN app@0.0.0 No repository field.


...

app@0.0.0 /home/jacob/workspace/scion/scxml.io
├── bootstrap-webpack@0.0.5
├── UNMET PEER DEPENDENCY es6-shim@0.35.0
├── UNMET PEER DEPENDENCY exports-loader@>=0.6.2
├── UNMET PEER DEPENDENCY imports-loader@>=0.6.3
└── UNMET PEER DEPENDENCY less-loader@>=0.6.2

npm WARN optional Skipping failed optional dependency /chokidar/fsevents:
npm WARN notsup Not compatible with your operating system or architecture: fsevents@1.0.11
npm WARN angular2@2.0.0-beta.9 requires a peer of es6-shim@^0.33.3 but none was installed.
npm WARN bootstrap-webpack@0.0.5 requires a peer of less-loader@>=0.6.2 but none was installed.
npm WARN bootstrap-webpack@0.0.5 requires a peer of imports-loader@>=0.6.3 but none was installed.
npm WARN bootstrap-webpack@0.0.5 requires a peer of exports-loader@>=0.6.2 but none was installed.
npm WARN app@0.0.0 No description
npm WARN app@0.0.0 No repository field.

This is the first time I have seen errors about peer dependencies from npm. After working on this for awhile, I reached a point where it seemed like all dependencies were available in node_modules, so I tried loading bootstrap-webpack in bootstrap.ts, but this caused the following runtime error:

VM11030:76 EXCEPTION: Tried to get instruction before the type was loaded.BrowserDomAdapter.logError @ VM11030:76BrowserDomAdapter.logGroup @ VM11030:86ExceptionHandler.call @ VM10867:56(anonymous function) @ VM10934:192NgZone._notifyOnError @ VM10935:431collection_1.StringMapWrapper.merge.onError @ VM10935:326Zone.run @ VM10852:1247(anonymous function) @ VM10935:344zoneBoundFn @ VM10852:1220lib$es6$promise$$internal$$tryCatch @ VM10852:468lib$es6$promise$$internal$$invokeCallback @ VM10852:480lib$es6$promise$$internal$$publish @ VM10852:451(anonymous function) @ VM10852:123Zone.run @ VM10852:1243zoneBoundFn @ VM10852:1220lib$es6$promise$asap$$flush @ VM10852:262
VM11030:76 STACKTRACE:BrowserDomAdapter.logError @ VM11030:76ExceptionHandler.call @ VM10867:58(anonymous function) @ VM10934:192NgZone._notifyOnError @ VM10935:431collection_1.StringMapWrapper.merge.onError @ VM10935:326Zone.run @ VM10852:1247(anonymous function) @ VM10935:344zoneBoundFn @ VM10852:1220lib$es6$promise$$internal$$tryCatch @ VM10852:468lib$es6$promise$$internal$$invokeCallback @ VM10852:480lib$es6$promise$$internal$$publish @ VM10852:451(anonymous function) @ VM10852:123Zone.run @ VM10852:1243zoneBoundFn @ VM10852:1220lib$es6$promise$asap$$flush @ VM10852:262
VM11030:76 Error: Tried to get instruction before the type was loaded.
    at new BaseException (eval at <anonymous> (http://localhost:8080/js/common.js:1142:2), <anonymous>:16:23)
    at RouteRule._getInstruction (eval at <anonymous> (http://localhost:8080/js/common.js:2426:2), <anonymous>:107:19)
    at eval (eval at <anonymous> (http://localhost:8080/js/common.js:2426:2), <anonymous>:92:46)
    at Zone.run (eval at <anonymous> (http://localhost:8080/js/vendor.js:640:2), <anonymous>:1243:24)
    at Zone.eval [as run] (eval at <anonymous> (http://localhost:8080/js/common.js:1544:2), <anonymous>:344:42)
    at zoneBoundFn (eval at <anonymous> (http://localhost:8080/js/vendor.js:640:2), <anonymous>:1220:26)
    at lib$es6$promise$$internal$$tryCatch (eval at <anonymous> (http://localhost:8080/js/vendor.js:640:2), <anonymous>:468:17)
    at lib$es6$promise$$internal$$invokeCallback (eval at <anonymous> (http://localhost:8080/js/vendor.js:640:2), <anonymous>:480:18)
    at lib$es6$promise$$internal$$publish (eval at <anonymous> (http://localhost:8080/js/vendor.js:640:2), <anonymous>:451:12)
    at eval (eval at <anonymous> (http://localhost:8080/js/vendor.js:640:2), <anonymous>:123:10)

--- Want to back this issue? **[Post a bounty on it!](https://www.bountysource.com/issues/33459951-issues-with-twitter-bootstrap?utm_campaign=plugin&utm_content=tracker%2F32095848&utm_medium=issues&utm_source=github)** We accept bounties via [Bountysource](https://www.bountysource.com/?utm_campaign=plugin&utm_content=tracker%2F32095848&utm_medium=issues&utm_source=github).

[cmelion]

I'm looking into http://valor-software.com/ng2-bootstrap/, will post my results and a link to the repo here.

[cmelion]

I'm still thinking about this, including bootstrap should be similar to including Material Design Lite.

The Demo project has a working example, see Working with MDL for more details.