ng new heyBarista-cupping --ng4 --routing --style=scss --prefix cupping

ng new heyBarista-cupping --ng4 --routing --style=scss --prefix cupping

https://github.com/angular/angular-cli/wiki/stories-include-angular-material

npm install --save @angular/material npm install --save @angular/animations

in app.module.ts:

import { MaterialModule } from '@angular/material';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import 'hammerjs';
import { FlexLayoutModule } from '@angular/flex-layout';
import { AngularFireModule } from 'angularfire2';

// other imports

@NgModule({
  imports: [
    ...
    MaterialModule,
    BrowserAnimationsModule,
    FlexLayoutModule,
    AngularFireModule
  ],
  ...
})

npm install --save hammerjs

in app.module.ts: import 'hammerjs';

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

https://github.com/angular/angular-cli/wiki/stories-include-angular-flex

npm install --save @angular/flex-layout

Add the following to src/app/app.component.css...

.header {
  background-color: lightyellow;
}

.left {
  background-color: lightblue;
}

.right {
  background-color: pink;
}

To verify flex-layout has been set up correctly, change src/app/app.component.html to the following...

<div fxLayout="column">

  <div class="header" fxLayout="row" fxLayoutAlign="space-between center">
    
    <h1>
      {{title}}
    </h1>

  </div>

  <div fxLayout="row">

    <div class="left" fxFlex="20">
      LEFT: 20% wide
    </div>

    <div class="right" fxFlex>
      RIGHT: 80% wide
    </div>

  </div>
</div>

https://github.com/angular/angular-cli/wiki/stories-include-angularfire

npm install --save angularfire2 firebase

in case of error:

ERROR in ./~/firebase/app/shared_promise.js Module not found: Error: Can't resolve 'promise-polyfill' in

run:

npm install promise-polyfill --save-exact

http://stackoverflow.com/questions/43428415/error-in-firebase-app-shared-promise-js

npm install @angular-mdl/core --save

rafszul/heyBarista-cupping.md