CODEWITHSUNDEEP
angularwebpackmaterializeangular2-material
Tinostarn
Tinostarn

Reputation: 101

Include Materializecss into Angular2 project with Webpack

I'm pretty new to Angular2 and its ecosystem, and I try to figure out how things work together. Sorry if some questions seem trivial.

So I deployed a fresh new Angular2 app, with the help of AngularClass starter kit, which uses Webpack.

For the UI, I wanted to use Material instead of Bootstrap. I did some research and I started to be lost among tons of projects around Material. What I'm looking for is :

It's a lot :D Also, I've found Material Design Lite for Angular2, but let it down because it seems it's going to be deprecated when Material2 will be out of Alpha.

1) Will the three packages work well together ? I didn't find any package yet that fills all the needs I listed.

Ok, so I started to install angular2-materialize, but I'm blocked with Webpack. The Github readme tells, install MaterialCSS and angular2-materialize : 

npm install materialize-css --save
npm install angular2-materialize --save

Then import materialize-css styles

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/css/materialize.min.css">

2) What's the point to npm install locally the materialize-css package if we later include the css from cdn ?

So I tried to find a way to include the css locally from node_modules/materialize-css... and here I'm blocked. The doc from NPM differs with Github, there's additional steps like adding alias, loaders and plugins in the webpack configuration.

var webpack = require("webpack");
module.exports = {
  //... 
  resolve: {
    alias: {
      materializecss: 'materialize-css/dist/css/materialize.css',
      materialize: 'materialize-css/dist/js/materialize.js',
      //... 
    }
    //... 
  },
  module: {
    loaders: [
      {
        test: /materialize-css\/dist\/js\/materialize\.js/,
        loader: 'imports?materializecss'
      },
      //... 
    ]
  },
  plugins: [
      new webpack.ProvidePlugin({
          $: "jquery",
          jQuery: "jquery",
          "window.jQuery": "jquery",
          Hammer: "hammerjs/hammer"
      })
  ]
  //... 
};

With this config, I thought I was able to do in my vendor.browser.ts something like : 

import "materializecss";

And it would load and/or puts automatically the pointing to the builded CSS. Or I am wrong and it doesn't work this way ?

Obviously it doesn't work and I get a : 

Uncaught Error: Cannot find module "materializecss" - vendor.browser.ts:23

Why ?

Thanks a lot for your help guys

Upvotes: 1

Views: 3988

Answers (2)

Agerskov
Agerskov

Reputation: 21

first do:

npm install materialize-css --save
npm install angular2-materialize --save

then:

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


@NgModule({declarations: [...MaterializeDirective],...})

Upvotes: 2

Whisher
Whisher

Reputation: 32806

In your style.css 

@import "~materialize-css/dist/css/materialize.css";

Upvotes: 0

Related Questions