brandonroberts

yarn add @angular/{animations,common,compiler,core,forms,platform-browser,platform-browser-dynamic,router}@next
yarn add @angular/{compiler-cli,language-service,}@next --dev
yarn add @angular-devkit/build-angular@next --dev
yarn add @ngrx/{store,effects,entity,store-devtools,schematics}

brandonroberts

# deps
sudo apt-get update && sudo apt-get dist-upgrade
sudo apt-get install nano git-core build-essential chromium

# git config
git config --global user.name "Brandon"
git config --global user.email "[email protected]"

# ssh
ssh-keygen -t rsa -b 4096 -C "[email protected]"

brandonroberts

// In package.json:
"scripts": {
  "e2e-watch": "concurrently --kill-others \"npm start\" \"npm run e2e-watch-no-serve\"",
  "e2e-watch-no-serve": "watch \"npm run e2e -- --dev-server-target=\" src e2e --wait=1"
}

brandonroberts

import { Store, Action, ofType } from '@ngrx/store';
import { catchError } from 'rxjs/operators';
import { of } from 'rxjs/observable/of';
import { switchMap, map } from 'rxjs/operators';

export class EffectError implements Action {
    readonly type = '[Error] Effect Error';
}

@Injectable()

brandonroberts

The introduction to Reactive Programming you've been missing

(by @andrestaltz)

---

This tutorial as a series of videos

If you prefer to watch video tutorials with live-coding, then check out this series I recorded with the same contents as in this article: Egghead.io - Introduction to Reactive Programming.

---

brandonroberts

Keybase proof

I hereby claim:

• I am brandonroberts on github.
• I am robertsbt (https://keybase.io/robertsbt) on keybase.
• I have a public key whose fingerprint is 0F1E 5019 A8E3 E132 4664 9E4D A796 6078 A506 2002

To claim this, I am signing this object:

brandonroberts

import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { RouterTestingModule } from '@angular/router/testing';
import { Store, StoreModule } from '@ngrx/store';
import { By } from '@angular/platform-browser';
import { DebugElement, NO_ERRORS_SCHEMA } from '@angular/core';

import * as fromRoot from '../reducers';
import * as collection from '../actions/collection';
import { ComponentsModule } from '../components';
import { CollectionPageComponent } from './collection-page';

brandonroberts

import { Component, OnInit, AfterViewInit, ViewChildren, ElementRef } from '@angular/core';
import { FormGroup, FormBuilder, Validators, AbstractControl, FormControlName } from '@angular/forms';

import 'rxjs/add/operator/debounceTime';
import 'rxjs/add/observable/fromEvent';
import 'rxjs/add/observable/merge';
import { Observable } from 'rxjs/Observable';

import { Customer } from './customer';
import { GenericValidator } from '../shared/generic-validator';

brandonroberts

app.module.ts

@NgModule({
  imports: [
    RouterModule.forRoot([
      {
        path: 'routes/manage',
        loadChildren: './manage/manage.module#ManageModule'  
      }

brandonroberts

@NgModule({
  imports: [
    routing,
    MainModule
  ]
})
export class MainModule {}