Materialize="materialbox" Not Functioning Properly (angular2-webpack-starter)

[tramel-woodard]

I'm opening this issue as I did not want to reopen Issue #125 (Material Box Reload Not Working).

I have been working with angular2-webpack-starter kit from AngularClass since the beginning of this year and it's a great production environment project.

I have recently created several projects with Materialize and wanted to incorporate this CSS/JS framework into some of my older angular2-webpack projects. I tried to incorporate the files natively (referencing the js, css and google font into the index page), and everything seemed to work great until the "materialboxed" class intermittenly stopped working after the first hard reload and clicking of a separate [routerlink] to another view. So I'm trying angular2-materialize for a possible solution.

My Initial Setup

angular2-webpack-starter Specific steps

1. Visited root directory (angular2-webpack-starter file structure) and install both material-css and angular2-materialize: npm install --save materialize-css angular2-materialize
2. In same root directory, install Materialize requirements, jQuery and HammerJS: npm install --save jquery@^2.2.4 hammerjs
3. Reference Google Fonts MD at the top of the index.html page: <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
4. Reference Materialize CSS file at top of index.html page:
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/css/materialize.min.css">
5. Open 'config/webpack.prod.js' (in my case, production) file, and add the following plugin to the module.exports > plugins: [] object:
   const ProvidePlugin = require('webpack/lib/ProvidePlugin');
module.exports = {
//...
plugins: [
new ProvidePlugin({
"window.jQuery": "jquery",
Hammer: "hammerjs/hammer"
})
]
//...
};
6. Open the main module for angular2-webpack-starter project ('src/app/app.module.ts') and import both the materialize-css and angular2-materialize dependencies:
   import 'materialize-css';
import { MaterializeModule } from 'angular2-materialize';
7. In the previous 'config/webpack.prod.js' file, add support for loading additional resources for Materialize in the module.exports > module > rules:[] object:
   { test: /.(png|woff(2)?|eot|ttf|svg)(\?[a-z0-9=\.]+)?$/, loader: 'url-loader?limit=100000' },

general angular2-materialize component steps

8. Open the main module again ('src/app/app.module.ts') and insert the MaterializeModule into the NgModules imports object:
   @NgModule({
imports: [
//...
MaterializeModule,
],
//...
   })
9. Add a "materialize" directive to the the top level component (div) of my page: <div materialize class="container"...
10. For image in question, ensure materialize is added as a directive and looks similar to below:
    <img materialize="materialbox" class="responsive-img" src="/assets/pathto/image.jpg">

UPDATE: It's fully functional now. I spent a great deal of time writing this out and I didn't want to just delete it as there may be someone who had the same problem, that can refer back to this issue and follow step by step.

[tramel-woodard]

working now. leaving for reference.

[rubyboy]

@tramel-woodard thanks for all that info and for keeping the issues list clean and tidy :)