Hooking up Angular Material to Angular-cli without all the errors using Sass

Craig O. Curtis
Jul 22, 2017 · 4 min read

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

uninstall all global, dev, and project @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.

upgraded to angular-cli v.1.2.3 and @angular v.4.3.1

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.

  1. 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

install @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’

import and export MaterialModule

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

import angular material theme and material icons in styles.scss

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

install material-design-icons

Import the path into the styles.scss file:

import material-icons.scss from node_modules

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

add an Angular Material button in app.component html
confirm you can see the Material button with icon in your app

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

import MaterialModule in chid components
test out Material button in child component

9. Add HammerJS support

npm install --save hammer-js

install hammerjs

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

app.module import hammerjs and set up config
app.module set object in providers

Test it out in a child component

add (swipe) gestures or other HammerJS gestures in the angular way inside ()

Add a simple function for testing

add hammer test method in child component

See working in browser!

test swiping right, see alert message!
Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade