Bootstrap 4 added.

.bootstraprc

@@ -0,0 +1,115 @@
+---
+# Output debugging info
+# loglevel: debug
+
+# Major version of Bootstrap: 3 or 4
+bootstrapVersion: 4
+
+# If Bootstrap version 4 is used - turn on/off flexbox model
+useFlexbox: true
+
+# Webpack loaders, order matters
+styleLoaders:
+  - style
+  - css
+  - sass
+
+# Extract styles to stand-alone css file
+# Different settings for different environments can be used,
+# It depends on value of NODE_ENV environment variable
+# This param can also be set in webpack config:
+#   entry: 'bootstrap-loader/extractStyles'
+extractStyles: false
+# env:
+#   development:
+#     extractStyles: false
+#   production:
+#     extractStyles: true
+
+
+# Customize Bootstrap variables that get imported before the original Bootstrap variables.
+# Thus, derived Bootstrap variables can depend on values from here.
+# See the Bootstrap _variables.scss file for examples of derived Bootstrap variables.
+#
+# preBootstrapCustomizations: ./path/to/bootstrap/pre-customizations.scss
+
+
+# This gets loaded after bootstrap/variables is loaded
+# Thus, you may customize Bootstrap variables
+# based on the values established in the Bootstrap _variables.scss file
+#
+# bootstrapCustomizations: ./path/to/bootstrap/customizations.scss
+
+
+# Import your custom styles here
+# Usually this endpoint-file contains list of @imports of your application styles
+#
+# appStyles: ./path/to/your/app/styles/endpoint.scss
+
+
+### Bootstrap styles
+styles:
+
+  # Mixins
+  mixins: true
+
+  # Reset and dependencies
+  normalize: true
+  print: true
+
+  # Core CSS
+  reboot: true
+  type: true
+  images: true
+  code: true
+  grid: true
+  tables: true
+  forms: true
+  buttons: true
+
+  # Components
+  animation: true
+  dropdown: true
+  button-group: true
+  input-group: true
+  custom-forms: true
+  nav: true
+  navbar: true
+  card: true
+  breadcrumb: true
+  pagination: true
+  pager: true
+  labels: true
+  jumbotron: true
+  alert: true
+  progress: true
+  media: true
+  list-group: true
+  responsive-embed: true
+  close: true
+
+  # Components w/ JavaScript
+  modal: true
+  tooltip: true
+  popover: true
+  carousel: true
+
+  # Utility classes
+  utilities: true
+  utilities-background: true
+  utilities-spacing: true
+  utilities-responsive: true
+
+### Bootstrap scripts
+scripts:
+  alert: true
+  button: true
+  carousel: true
+  collapse: true
+  dropdown: true
+  modal: true
+  popover: true
+  scrollspy: true
+  tab: true
+  tooltip: true
+  util: true

config/webpack.common.js

@@ -1,37 +1,18 @@
-/**
- * @author: @AngularClass
- */
-
 const webpack = require('webpack');
 const helpers = require('./helpers');
 
-/*
- * Webpack Plugins
- */
 const CopyWebpackPlugin = require('copy-webpack-plugin');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const ForkCheckerPlugin = require('awesome-typescript-loader').ForkCheckerPlugin;
 
-/*
- * Webpack Constants
- */
 const METADATA = {
   title: 'Angular2 Webpack Starter by @gdi2290 from @AngularClass',
   baseUrl: '/'
 };
 
-/*
- * Webpack configuration
- *
- * See: http://webpack.github.io/docs/configuration.html#cli
- */
+
 module.exports = {
 
-  /*
-   * Static metadata for index.html
-   *
-   * See: (custom attribute)
-   */
   metadata: METADATA,
 
   /*
@@ -77,11 +58,6 @@ module.exports = {
 
   },
 
-  /*
-   * Options affecting the normal modules.
-   *
-   * See: http://webpack.github.io/docs/configuration.html#module
-   */
   module: {
 
     /*
@@ -116,14 +92,6 @@ module.exports = {
 
     ],
 
-    /*
-     * An array of automatically applied loaders.
-     *
-     * IMPORTANT: The loaders here are resolved relative to the resource which they are applied to.
-     * This means they are not resolved relative to the configuration file.
-     *
-     * See: http://webpack.github.io/docs/configuration.html#module-loaders
-     */
     loaders: [
 
       /*
@@ -160,8 +128,17 @@ module.exports = {
 
       {
         test: /\.scss$/,
-        exclude: /node_modules/,
-        loader: 'raw-loader!sass-loader'
+        loaders: ['raw-loader','sass-loader']
+      },
+
+      {
+        test: /\.(woff2?|ttf|eot|svg)$/,
+        loader: 'url?limit=10000'
+      },
+
+      {
+        test: /bootstrap\/dist\/js\/umd\//,
+        loader: 'imports?jQuery=jquery'
       },
 
       /* Raw loader support for *.html
@@ -240,8 +217,15 @@ module.exports = {
     new HtmlWebpackPlugin({
       template: 'src/index.html',
       chunksSortMode: helpers.packageSort(['polyfills', 'vendor', 'main'])
-    })
+    }),
 
+    new webpack.ProvidePlugin({
+      jQuery: 'jquery',
+      $: 'jquery',
+      jquery: 'jquery',
+      "Tether": 'tether',
+      "window.Tether": "tether"
+    })
   ],
 
   /*

package.json

@@ -55,9 +55,13 @@
     "@angular2-material/sidenav": "2.0.0-alpha.2",
     "@angular2-material/toolbar": "2.0.0-alpha.2",
     "angular2": "2.0.0-beta.15",
+    "bootstrap": "^4.0.0-alpha.2",
+    "bootstrap-loader": "^1.0.8",
     "core-js": "^2.2.2",
+    "jquery": "^2.2.3",
     "normalize.css": "^4.1.1",
     "rxjs": "5.0.0-beta.2",
+    "tether": "^1.2.4",
     "zone.js": "~0.6.11"
   },
   "devDependencies": {
@@ -79,12 +83,13 @@
     "imports-loader": "^0.6.5",
     "istanbul-instrumenter-loader": "^0.2.0",
     "json-loader": "^0.5.4",
-    "node-sass": "^3.4.2",
+    "node-sass": "^3.5.3",
     "parse5": "^2.1.5",
     "phantomjs-polyfill": "0.0.2",
     "phantomjs-prebuilt": "^2.1.7",
     "raw-loader": "0.5.1",
     "remap-istanbul": "^0.5.1",
+    "resolve-url-loader": "^1.4.3",
     "rimraf": "^2.5.2",
     "sass-loader": "^3.2.0",
     "source-map-loader": "^0.1.5",

src/app/app.component.ts

@@ -18,7 +18,7 @@ import {RouterActive} from './router-active';
   providers: [ ],
   directives: [ RouterActive ],
   encapsulation: ViewEncapsulation.None,
-  styles: [ require('normalize.css'), require('../assets/scss/app.scss') ],
+  styles: [ require('normalize.css'), require('./app.scss') ],
   template: `
     <header>
       <md-toolbar color="primary">
@@ -45,6 +45,37 @@ import {RouterActive} from './router-active';
       <router-outlet></router-outlet>
     </main>
 
+    <table class="table table-inverse">
+  <thead>
+    <tr>
+      <th>#</th>
+      <th>First Name</th>
+      <th>Last Name</th>
+      <th>Username</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <th scope="row">1</th>
+      <td>Mark</td>
+      <td>Otto</td>
+      <td>@mdo</td>
+    </tr>
+    <tr>
+      <th scope="row">2</th>
+      <td>Jacob</td>
+      <td>Thornton</td>
+      <td>@fat</td>
+    </tr>
+    <tr>
+      <th scope="row">3</th>
+      <td>Larry</td>
+      <td>the Bird</td>
+      <td>@twitter</td>
+    </tr>
+  </tbody>
+</table>
+
     <pre>this.appState.state = {{ appState.state | json }}</pre>
 
     <footer>

src/assets/scss/.gitkeep

@@ -1 +0,0 @@
-@AngularClass

src/assets/scss/app.scss

@@ -1,13 +0,0 @@
-md-toolbar ul {
-  display: inline;
-  list-style-type: none;
-  margin: 0;
-  padding: 0;
-  width: 60px;
-}
-md-toolbar li {
-  display: inline;
-}
-md-toolbar li.active {
-  background-color: lightgray;
-}

src/main.browser.ts

@@ -1,20 +1,24 @@
+import 'jquery';
+import 'bootstrap-loader';
+
 /*
  * Providers provided by Angular
  */
 import {bootstrap} from 'angular2/platform/browser';
 /*
-* Platform and Environment
-* our providers/directives/pipes
-*/
+ * Platform and Environment
+ * our providers/directives/pipes
+ */
 import {DIRECTIVES, PIPES, PROVIDERS} from './platform/browser';
 import {ENV_PROVIDERS} from './platform/environment';
 
 /*
-* App Component
-* our top level component that holds all of our components
-*/
+ * App Component
+ * our top level component that holds all of our components
+ */
 import {App, APP_PROVIDERS} from './app';
 
+
 /*
  * Bootstrap our Angular app with a top level component `App` and inject
  * our Services and Providers into Angular's dependency injection