cannot get it to work with angular2 webpack starter

[MurhafSousli]

I installed both materialize-css and angular2-materialize using npm I don't know why it gives this error on building!

ERROR in ./~/angular2-materialize/dist/index.js
Module not found: Error: Cannot resolve module 'materialize' in C:\Users\Murhaf\wamp64\www\murhaf\wp-content\themes\angular-murhaf\angular\node_modules\angular2-materialize\dist
resolve module materialize in C:\Users\Murhaf\wamp64\www\murhaf\wp-content\themes\angular-murhaf\angular\node_modules\angular2-materialize\dist
  looking for modules in C:\Users\Murhaf\wamp64\www\murhaf\wp-content\themes\angular-murhaf\angular\node_modules
    C:\Users\Murhaf\wamp64\www\murhaf\wp-content\themes\angular-murhaf\angular\node_modules\materialize doesn't exist (module as directory)
    resolve 'file' materialize in C:\Users\Murhaf\wamp64\www\murhaf\wp-content\themes\angular-murhaf\angular\node_modules
      resolve file
        C:\Users\Murhaf\wamp64\www\murhaf\wp-content\themes\angular-murhaf\angular\node_modules\materialize doesn't exist
        C:\Users\Murhaf\wamp64\www\murhaf\wp-content\themes\angular-murhaf\angular\node_modules\materialize.ts doesn't exist
        C:\Users\Murhaf\wamp64\www\murhaf\wp-content\themes\angular-murhaf\angular\node_modules\materialize.js doesn't exist
[C:\Users\Murhaf\wamp64\www\murhaf\wp-content\themes\angular-murhaf\angular\node_modules\materialize]
[C:\Users\Murhaf\wamp64\www\murhaf\wp-content\themes\angular-murhaf\angular\node_modules\materialize]
[C:\Users\Murhaf\wamp64\www\murhaf\wp-content\themes\angular-murhaf\angular\node_modules\materialize.ts]
[C:\Users\Murhaf\wamp64\www\murhaf\wp-content\themes\angular-murhaf\angular\node_modules\materialize.js]
 @ ./~/angular2-materialize/dist/index.js 1:0-22

here is my webpack config:

// @AngularClass

var webpack = require('webpack');
var helpers = require('./helpers');

var CopyWebpackPlugin = require('copy-webpack-plugin');
var HtmlWebpackPlugin = require('html-webpack-plugin');

var ENV = process.env.ENV = process.env.NODE_ENV = 'development';
var HMR = helpers.hasProcessFlag('hot');

var metadata = {
  title: 'Angular2 Webpack Starter by @gdi2990 from @AngularClass',
  baseUrl: '/',
  host: 'localhost',
  port: 3000,
  ENV: ENV,
  HMR: HMR
};
/*
 * Config
 * with default values at webpack.default.conf
 */
module.exports = helpers.defaults({
  // static data for index.html
  metadata: metadata,
  // devtool: 'eval' // for faster builds use 'eval'

  // our angular app
  entry: { 'polyfills': './src/polyfills.ts', 'main': './src/main.ts' },

  // Config for our build files
  output: {
    path: helpers.root('dist')
  },
  resolve: {
      alias: {
        materializecss: 'materialize-css/dist/css/materialize.css',
        materialize: 'materialize-css/dist/js/materialize.js',
        //...
      }
    },
  module: {
    preLoaders: [
      // { test: /\.ts$/, loader: 'tslint-loader', exclude: [ helpers.root('node_modules') ] },
      // TODO(gdi2290): `exclude: [ helpers.root('node_modules/rxjs') ]` fixed with rxjs 5 beta.3 release
      { test: /\.js$/, loader: "source-map-loader", exclude: [ helpers.root('node_modules/rxjs') ] }
    ],

    loaders: [
      // Support for .ts files.
      { test: /\.ts$/, loader: 'ts-loader', exclude: [ /\.(spec|e2e)\.ts$/ ] },

      // Support for *.json files.
      { test: /\.json$/,  loader: 'json-loader' },

      // Support for CSS as raw text
      { test: /\.css$/,   loader: 'raw-loader' },

      // support for .html as raw text
      { test: /\.html$/,  loader: 'raw-loader', exclude: [ helpers.root('src/index.html') ] },

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

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

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

    ]
  },

  plugins: [
    new webpack.optimize.OccurenceOrderPlugin(true),
    new webpack.optimize.CommonsChunkPlugin({ name: 'polyfills', filename: 'polyfills.bundle.js', minChunks: Infinity }),
    // static assets
    new CopyWebpackPlugin([ { from: 'src/assets', to: 'assets' } ]),
    // generating html
    new HtmlWebpackPlugin({ template: 'src/index.html' }),
    // replace
    new webpack.DefinePlugin({
      'process.env': {
        'ENV': JSON.stringify(metadata.ENV),
        'NODE_ENV': JSON.stringify(metadata.ENV),
        'HMR': HMR
      }
    }),
    new webpack.ProvidePlugin({
      jQuery: 'jquery',
      $: 'jquery',
      jquery: 'jquery',
      materialize: 'materialize-css'
    })
  ],

  // Other module loader config

  // our Webpack Development Server config
  devServer: {
    port: metadata.port,
    host: metadata.host
  }
});

I'm not sure if I added them correctly but I followed the instructions (Im new to webpack)

[rubyboy]

Seems like it couldn't fine the angular2-materialize module in C:\Users\Murhaf\wamp64\www\murhaf\wp-content\themes\angular-murhaf\angular\node_modules\angular2-materialize\dist Can you share the code (on Github or attach a zip of our C:\Users\Murhaf\wamp64\www\murhaf\wp-content\themes\angular-murhaf\angular) so I can take a look at?

[rubyboy]

@MurhafSousli I noticed that the distribution package had the "ts" files in it and with the webpack-starter it was loading them instead of the js files. I've released a new version without them and confirmed that it works with the angular2-webpack-starter project. Try to reinstall that one and see if that works for you.

If it still doesn't work for you, take a look at the https://github.com/InfomediaLtd/angular2-webpack-starter fork that is exactly like the regular angular2-webpack-starter with the addition of angular2-materialize, Here's the relevant commit, adding angular2-materialize to the starter project: https://github.com/InfomediaLtd/angular2-webpack-starter/commit/af82ae04984a8d518467a664f1a842069e9adf6f

[MurhafSousli]

Thank you, now I have the same wepback.config.js and the module worked, I tried

1. modal example gave Uncaught TypeError: $overlay.velocity is not a function
2. hover example gave Uncaught TypeError: newTooltip.velocity is not a function

here is the full code https://github.com/MurhafSousli/ng2-wordpress-theme

[rubyboy]

@MurhafSousli thanks for testing it and providing feedback.

I've updated the documentation on webpack configuration with missing provided libraries for MaterializeCSS:

    plugins: [
        new webpack.ProvidePlugin({
            $: "jquery",
            jQuery: "jquery",
            Hammer: "hammerjs/hammer"
        })

But, it's still complaining about the missing velocity function. Looking at the MaterializeCSS code I see that it's got a polyfill for velocity, but I can't understand why it works for JSPM and not for webpack. When running the following in the browser console it works for JSPM , but not for webpack:

$().velocity

It means that the MaterializeCSS JS code that creates the velocity method on jQuery didn't work. It's the next 3 minified lines: https://github.com/Dogfalo/materialize/blob/master/dist/js/materialize.js#L232 When running it with webpack, the jQuery object doesn't have the Velocity method after running these three lines. Not sure why...

I've added a webpack configuration to the library so it's easy to run it internally and see the problem: https://github.com/InfomediaLtd/angular2-materialize

Maybe @Dogfalo can assist us here?

[vesteraas]

I'm also experimenting with Angular 2 Materialize in Angular 2 Webpack Starter, and got the $overlay.velocity is not a function error when trying to open a modal.

I got rid of the error by modifying the ProvidePlugin block:

    new webpack.ProvidePlugin({
      $: "jquery",
      jQuery: "jquery",
      "window.jQuery": "jquery",
      "root.jQuery": "jquery",
      Hammer: "hammerjs/hammer"
    })

The two lines before Hammer: "hammerjs/hammer" did the trick.

[rubyboy]

@vesteraas you rock!! This solved the problem in my tests. I found that "root.jQuery" is not needed, so I'll just add the "window.jQuery" to the documentation.

@MurhafSousli please let us know if that solves it for you as well so we can close this issue.

[MurhafSousli]

Thank you @rubyboy, you can close the issue