generator-ng2-webpack
generator-ng2-webpack copied to clipboard
cmelion
Issues with Twitter Bootstrap
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: [email protected]
npm WARN [email protected] requires a peer of es6-shim@^0.33.3 but none was installed.
npm WARN [email protected] No description
npm WARN [email protected] No repository field.
...
[email protected] /home/jacob/workspace/scion/scxml.io
├── [email protected]
├── UNMET PEER DEPENDENCY [email protected]
├── 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: [email protected]
npm WARN [email protected] requires a peer of es6-shim@^0.33.3 but none was installed.
npm WARN [email protected] requires a peer of less-loader@>=0.6.2 but none was installed.
npm WARN [email protected] requires a peer of imports-loader@>=0.6.3 but none was installed.
npm WARN [email protected] requires a peer of exports-loader@>=0.6.2 but none was installed.
npm WARN [email protected] No description
npm WARN [email protected] 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)
I'm looking into http://valor-software.com/ng2-bootstrap/, will post my results and a link to the repo here.
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.