Hooking up Angular Material to Angular-cli without all the errors using Sass
I just hooked up Angular Material to my CLI project and here are the quick steps.
Let’s assumed that you just generated your new angular-cli app v.1.2.1.
Check out my Responsible Quick Tips for Angular-CLI to generate a project like a boss.

That Angular version is already out of date. let’s update! (cover all install possibilities first…)
0. Get the latest @angular/cli
npm uninstall -g @angular-cli
npm uninstall --save @angular/cli
npm uninstall --save-dev @angular-cli

Reinstall the latest cli globally and in project’s dev envt:
npm i -g @angular/cli@latest
npm i -D @angular/cli@latest
And just to guarantee we’re getting the latest, let’s do a hard install of all the @angular modules (copy and paste):
Check to see if your packages are the latest. At the time of this blog, the cli is on v.1.2.3, and Angular is 4.3.1 and do npm install.

Serving it up with you see it looks fine, but when you try to follow the steps in the angular-cli wiki, things might break. For the time being, the Angular Material steps seem to be working, and this is just another blog post about how to do that.
- Install @angular/material and @angular/cdk with npm
npm install --save @angular/material @angular/cdk

2. Install @angular/animations with npm
npm install --save @angular/animations

3. Import the BrowserAnimationsModule from ‘@angular/platform-browser/animations’

4. Not a fan of importing individual material modules. I want it all! Import and export the ‘MaterialModule’

5. Choose a theme and import it in styles.scss, along with the Material Icons CDN

6. Let’s remove that @import url of the material icons and installnpm install material-design-icons

Import the path into the styles.scss file:

7. Make a test button in app.component.html


8. Import MaterialModule (can be put in our own CCSharedModule later for smaller footprint…)


9. Add HammerJS support
npm install --save hammer-js

Add hammerjs to app.module (can be refactored into libs.ts later and imported) plus gesture configuration in app.module


Test it out in a child component

Add a simple function for testing

See working in browser!

