These are chat archives for AngularClass/angular2-webpack-starter

3rd
Jan 2017
Berian
@chaiwa-berian
Jan 03 2017 07:11
Why is it so difficult to use Twitter Bootstrap with Angular2?
Abhishek Srivastava
@abhilive
Jan 03 2017 07:16
@chaiwa-berian Are you using ? @ng-bootstrap/ng-bootstrap
Berian
@chaiwa-berian
Jan 03 2017 07:33
@abhilive Nope! I want to use just standard Bootstrap. Is that possible?

@abhilive in my package.json, I have the line : "bootstrap": "^4.0.0-alpha.5" and ran npm install
Then in styles.css file I put *@import "../node_modules/bootstrap/dist/css/bootstrap.min.css";

In my app.component.html I do something like this:

<nav class="container">
        <ul class="nav nav-tabs">
          <li role="presentation" class="active">
            <a routerLink="/students-center" routerLinkActive="active">Students </a>
          </li>
          <li role="presentation">
            <a routerLink="/classes-dashboard" routerLinkActive="active">Classes</a>
          </li>
          <li role="presentation">
            <a routerLink="/courses-dashboard" routerLinkActive="active">Courses</a>
          </li>
          <li role="presentation">
            <a routerLink="/instructors-dashboard" routerLinkActive="active">Instructors</a>
          </li>
          <li role="presentation">
            <a routerLink="schools-dashboard" routerLinkActive="active">Schools</a>
          </li>
        </ul>
  </nav>

But nothing happens!!! I am using angular2-webpack too! Any ideas?

Abhishek Srivastava
@abhilive
Jan 03 2017 07:39
Is this logged any error in console ?
Berian
@chaiwa-berian
Jan 03 2017 07:40
let me check!
@abhilive I see a bunch of errors:
ncaught SyntaxError: Unexpected token :
vendor.bundle.js:592 Angular 2 is running in the development mode. Call enableProdMode() to enable the production mode.
vendor.bundle.js:69051 [WDS] Errors while compiling.
vendor.bundle.js:69093 ./~/css-loader!./~/postcss-loader!./src/styles.css
C:\Users\Berian Chaiwa\KoleWeb\src\styles.css:2:1: Unknown word  1 | /* You can add global styles to this file, and also import other style files */
> 2 | *@import "../node_modules/bootstrap/dist/css/bootstrap.min.css";
    | ^
  3 | 
 @ ./src/styles.css 4:14-119
 @ multi styles
errors @ vendor.bundle.js:69093
vendor.bundle.js:69093 ./~/css-loader!./~/postcss-loader!./src/styles.css
Module build failed: TypeError: Cannot read property 'toString' of undefined
    at new Input (C:\Users\Berian Chaiwa\KoleWeb\node_modules\postcss\lib\input.js:51:23)
    at parse (C:\Users\Berian Chaiwa\KoleWeb\node_modules\postcss\lib\parse.js:21:17)
    at new LazyResult (C:\Users\Berian Chaiwa\KoleWeb\node_modules\postcss\lib\lazy-result.js:70:24)
    at Processor.process (C:\Users\Berian Chaiwa\KoleWeb\node_modules\postcss\lib\processor.js:117:12)
    at processCss (C:\Users\Berian Chaiwa\KoleWeb\node_modules\css-loader\lib\processCss.js:188:11)
    at Object.module.exports (C:\Users\Berian Chaiwa\KoleWeb\node_modules\css-loader\lib\loader.js:24:2)
 @ ./src/styles.css 4:14-119
 @ multi styles
errors @ vendor.bundle.js:69093
vendor.bundle.js:69093 ./src/styles.css
Module build failed: ModuleError: C:\Users\Berian Chaiwa\KoleWeb\src\styles.css:2:1: Unknown word  1 | /* You can add global styles to this file, and also import other style files */
> 2 | *@import "../node_modules/bootstrap/dist/css/bootstrap.min.css";
    | ^
  3 | 
    at Object.emitError (C:\Users\Berian Chaiwa\KoleWeb\node_modules\webpack\lib\NormalModule.js:93:23)
    at C:\Users\Berian Chaiwa\KoleWeb\node_modules\postcss-loader\index.js:71:24
    at runMicrotasksCallback (internal/process/next_tick.js:58:5)
    at _combinedTickCallback (internal/process/next_tick.js:67:7)
    at process._tickCallback (internal/process/next_tick.js:98:9)
errors @ vendor.bundle.js:69093
vendor.bundle.js:69093 C:\Users\Berian Chaiwa\KoleWeb\node_modules\extract-text-webpack-plugin\loader.js?{"omit":1,"remove":false}!C:\Users\Berian Chaiwa\KoleWeb\node_modules\style-loader\index.js!C:\Users\Berian Chaiwa\KoleWeb\node_modules\css-loader\index.js!C:\Users\Berian Chaiwa\KoleWeb\node_modules\postcss-loader\index.js!C:\Users\Berian Chaiwa\KoleWeb\src\styles.css doesn't export content
Abhishek Srivastava
@abhilive
Jan 03 2017 07:54
@chaiwa-berian I think you should use ng2-bootstrap
this contains angular2 supported bootstrap components
Berian
@chaiwa-berian
Jan 03 2017 07:56
@abhilive Thanks, I hear it is work in progress!!
Abhishek Srivastava
@abhilive
Jan 03 2017 07:57
@chaiwa-berian Most of the components are available, we can use them : https://www.npmjs.com/package/ng2-bootstrap
Berian
@chaiwa-berian
Jan 03 2017 07:58
Okay great, I will give it a look!
Joe Gornick
@jgornick
Jan 03 2017 19:54
Hey folks, I'm trying out the new AoT stuff with my app that started from the starter kit. However, I seem to have a routing issue that won't route when useHash routing is set to false. I run build:aot then server:prod for my commands.