Add webpack installation guide

[xdgimf]

It would be nice if theres a guide on how to install it with webpack

[rubyboy]

Added to readme.
Can you confirm it works for you?

Here's my full webpack configuration:

module.exports = {
    entry: "./src/app.ts",
    output: {
        filename: "bundle.js"
    },
    devtool: 'source-map',
    resolve: {
        alias: {
          materializecss: 'materialize-css/dist/css/materialize.css',
          materialize: 'materialize-css/dist/js/materialize.js',
        },
        extensions: ['', '.webpack.js', '.web.js', '.ts', '.js', '.css']
    },
    module: {
        loaders: [
            { test: /materialize-css\/dist\/js\/materialize\.js/, loader: 'imports?materializecss' },
            { test: /\.ts$/, loader: 'ts-loader' },
            { test: /\.css$/, loader: 'style-loader!css-loader' },
            { test: /.(png|woff(2)?|eot|ttf|svg)(\?[a-z0-9=\.]+)?$/, loader: 'url-loader?limit=100000' }
        ]
    },
    noParse: [ /.+zone\.js\/dist\/.+/, /.+angular2\/bundles\/.+/ ]
};

And this is the app.ts I used for testing:

import 'angular2/bundles/angular2-polyfills';
import {Component} from 'angular2/core';
import {bootstrap} from 'angular2/platform/browser';

import "angular2-materialize";
import {MaterializeDirective} from "angular2-materialize";

@Component({
    selector: 'app',
    directives: [MaterializeDirective],
    template: `
              <a class="waves-effect waves-light btn">Stuff</a>
              <a class="waves-effect waves-light btn"><i class="material-icons left">cloud</i>button</a>
              <a class="waves-effect waves-light btn"><i class="material-icons right">cloud</i>button</a>
              <hr/>
              <div>{{show}}</div>
              <button (click)="show=!show">toggle</button>
              <hr/>
              <div *ngIf="show">
                <ul materialize="collapsible" class="collapsible" data-collapsible="accordion">
                  <li>
                    <div class="collapsible-header"><i class="material-icons">filter_drama</i>First</div>
                    <div class="collapsible-body"><p>Lorem ipsum dolor sit amet.</p></div>
                  </li>
                  <li>
                    <div class="collapsible-header"><i class="material-icons">place</i>Second</div>
                    <div class="collapsible-body"><p>Lorem ipsum dolor sit amet.</p></div>
                  </li>
                  <li>
                    <div class="collapsible-header"><i class="material-icons">whatshot</i>Third</div>
                    <div class="collapsible-body"><p>Lorem ipsum dolor sit amet.</p></div>
                  </li>
                </ul>
              <div>
              `
})
export class AppComponent {
    show = false;
}

bootstrap(AppComponent);

If you use the same code and take out the directive then the collapsible panel won't work, because it needs the angular2 bindings.

[xdgimf]

Testing it with https://github.com/AngularClass/angular2-webpack-starter

{ test: /materialize-css\/dist\/js\/materialize\.js/, loader: 'imports?materializecss' },

I think this line isn't working, css styles are not loaded properly, not sure why.

I tried adding the materialize-css on index.html and it worked. Can't seem to make it work using the loader.
https://gist.github.com/xdgimf/5f07e124d18be1ba3b7f

[rubyboy]

The problem is that the starter project assumes it needs to load CSS with the raw loader (to be used inside Angular's own styles handling), thus not applying styles from Materialize:

{ test: /\.css$/,   loader: 'raw-loader' },

To work around this, without changing the way CSS is handled across the app, I suggest adding the following, to match the materialize.css specifically and load it with the style loader:

      { test: /materialize\.css$/,   loader: 'style-loader!css-loader' },

Then, also update the css loader to apply only to CSS that is not "materialize":

      // Support for CSS as raw text (do not match 'materialize')
      { test: /^((?!materialize).)*\.css$/,   loader: 'raw-loader' },

Another thing to confirm is that you also handle woff's properly:

      { test: /.(png|woff(2)?|eot|ttf|svg)(\?[a-z0-9=\.]+)?$/, loader: 'url-loader?limit=100000' },

Lastly, you do need the url-loader and imports-loader modules installed in your package.json:

npm install imports-loader --save-save
npm install url-loader --save-dev

I've tested the above with the angular2-webpack-starter and it seems to work well for me. Can you confirm if that solved your issue and I'll update the readme accordingly for people who may be using this type of CSS loading mechanism (raw, instead of style).

[xdgimf]

It works for me too, thanks a lot

[danielquintero]

I can confirm this works pretty great on OS X, however while on Windows I haven't been able to make it work. @rubyboy Any idea why this would be? issue with the loader: 'style-loader!css-loader' loader perhaps?

[marcellopato]

Allways get this error: Uncaught TypeError: Cannot read property 'swing' of undefined(…)