{
      "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
      // configuration-file version
      "version": 1,
      // path where new projects are created, bsolute or relative to the workspace folder
      "newProjectRoot": "projects",
      // subsection for each app, e2e app, and library individual configuration options
      "projects": {
        "angular-tour": {
          // root folder for files, relative to the workspace folder
          "root": "",
          // root folder for source files
          "sourceRoot": "src",
          // application | library
          // application can run independently in a browser, library cannot
          // both an app and its e2e test app are of type "application"
          "projectType": "application",
          // string that Angular prepends to generated selectors
          // can be customized to identify an app or feature area
          "prefix": "app",
          // object containing schematics that customize CLI commands
          "schematics": {},
          // configuration defaults for Architect builder targets
          // tool that the CLI uses to perform complex tasks
          // can be run using the "ng run" command, and define your own targets
          "architect": {
            // target, which is the npm package for the tool that Architect runs
            // defaults for options of the "ng build" command
            "build": {
              // npm package for the build tool used to create this target
              // default is @angular-devkit/build-angular:browser
              // which uses the webpack package bundler
              "builder": "@angular-devkit/build-angular:browser",
              // default options for the target
              // used when no named alternative configuration is specified
              "options": {
                "outputPath": "dist/browser",
                "index": "src/index.html",
                "main": "src/main.ts",
                "polyfills": "src/polyfills.ts",
                "tsConfig": "src/tsconfig.app.json",
                // object containing paths to static assets to add to the global context
                // of the project, default paths point to the project icon file and its assets folder
                "assets": [ "src/favicon.ico", "src/assets", "src/manifest.webmanifest" ],
                "styles": [ "src/styles.css" ],
                // option-value pairs to pass to style preprocessors
                stylePreprocessorOptions: { },
                // JS files to add to the global context of the project
                // loaded exactly as if you had added them in a script-tag inside index.html
                "scripts": [
                  {
                    "input": "node_modules/document-register-element/build/document-register-element.js"
                  }
                ],
                // default size-budget type and threshholds for all or parts of your app
                "budgets": [ ],
              },
              // section with named configuration
              // sets the default options for that intended environment
              "configurations": {
                "production": {
                  // files and their compile-time replacements
                  // default environment with production version
                  "fileReplacements": [
                    {
                      "replace": "src/environments/environment.ts",
                      "with": "src/environments/environment.prod.ts"
                    }
                  ],
                  "optimization": true,
                  "outputHashing": "all",
                  "sourceMap": false,
                  "extractCss": true,
                  "namedChunks": false,
                  "extractLicenses": true,
                  "vendorChunk": false,
                  "buildOptimizer": true,
                  "budgets": [
                    {
                      "type": "initial",
                      "maximumWarning": "2mb",
                      "maximumError": "5mb"
                    }
                  ],
                  "serviceWorker": true
                },
                // locale-specific configuration
                "ru": {
                  "outputPath": "dist/angular-tour-ru/",
                  "i18nFile": "src/locale/messages.ru.xlf",
                  "i18nFormat": "xlf",
                  "i18nLocale": "ru",
                  "i18nMissingTranslation": "error"
                }
              }
            },
            // override build defaults and supplies additional
            // serve defaults for the "ng serve" command
            "serve": {
              "builder": "@angular-devkit/build-angular:dev-server",
              "options": { "browserTarget": "angular-tour:build" },
              "configurations": {
                "production": {
                  "browserTarget": "angular-tour:build:production"
                },
                "ru": { "browserTarget": "angular-tour:build:ru" }
              }
            },
            // override build-option defaults
            // for building end-to-end testing apps using the "ng e2e" command
            "e2e" : { },
            // overrides build-option defaults for test builds and supplies
            // additional test-running defaults for the "ng test" command
            "test": {
              "builder": "@angular-devkit/build-angular:karma",
              "options": {
                "main": "src/test.ts",
                "polyfills": "src/polyfills.ts",
                "tsConfig": "src/tsconfig.spec.json",
                "karmaConfig": "src/karma.conf.js",
                "styles": [ "src/styles.css" ],
                "scripts": [],
                "assets": [ "src/favicon.ico", "src/assets", "src/manifest.webmanifest" ]
              }
            },
            // configure defaults for options of the ng-xi18n tool used by the "ng xi18n" command
            // which extracts marked message strings from source code and outputs translation files
            "extract-i18n": {
              "builder": "@angular-devkit/build-angular:extract-i18n",
              "options": {
                "browserTarget": "angular-tour:build"
              }
            },
            // configure defaults for options of the "ng lint" command
            // which performs code analysis on project source files
            "lint": {
              "builder": "@angular-devkit/build-angular:tslint",
              "options": {
                "tsConfig": [ "src/tsconfig.app.json", "src/tsconfig.spec.json" ],
                "exclude": [ "**/node_modules/**" ]
              }
            },
            // defaults for creating a Universal app with server-side rendering
            // using the "ng run project-name:server" command
            "server": {
              "builder": "@angular-devkit/build-angular:server",
              "options": {
                "outputPath": "dist/server",
                "main": "src/main.server.ts",
                "tsConfig": "src/tsconfig.server.json"
              },
              "configurations": {
                "production": {
                  "fileReplacements": [
                    {
                      "replace": "src/environments/environment.ts",
                      "with": "src/environments/environment.prod.ts"
                    }
                  ]
                }
              }
            },
            // defaults for creating an app shell for a PWA
            // using the "ng run project-name:app-shell" command
            "app-shell": { }
        } },
        "angular-tour-e2e": {
          "root": "e2e/",
          "projectType": "application",
          "prefix": "",
          "architect": {
            "e2e": {
              "builder": "@angular-devkit/build-angular:protractor",
              "options": {
                "protractorConfig": "e2e/protractor.conf.js",
                "devServerTarget": "angular-tour:serve"
              },
              "configurations": {
                "production": {
                  "devServerTarget": "angular-tour:serve:production"
                }
              }
            },
            "lint": {
              "builder": "@angular-devkit/build-angular:tslint",
              "options": {
                "tsConfig": "e2e/tsconfig.e2e.json",
                "exclude": [ "**/node_modules/**" ]
      } } } } },
      // default project name to use in commands
      "defaultProject": "angular-tour"
    }
  

    interface TestBed {
      platform: PlatformRef
      ngModule: Type<any> | Type<any>[]
      // initialize the environment for testing with a compiler factory
      // if need to change the providers, first use resetTestEnvironment
      // test modules and platforms for individual platforms
      // are available from '@angular/platform_name/testing'
      initTestEnvironment(
        ngModule: Type<any> | Type<any>[],
        platform: PlatformRef,
      ): void
      // reset the providers for the test injector
      resetTestEnvironment(): void
      // reset the initial test environment, including default testing module
      resetTestingModule(): void
      // retrieve a service from the current TestBed injector
      // with optional second parameter data as unfound provider replacement
      get(
        token: any, notFoundValue?: any ): any
      execute(
        tokens: any[], fn: Function, context?: any ): any
      configureCompiler(
        config: { providers?: any[]; } ): void
      // refine the testing module configuration for a particular set of tests
      // by adding and removing imports,
      // declarations (of components, directives, and pipes), and providers
      configureTestingModule(
        moduleDef: TestModuleMetadata ): void
      // after callings, configuration is frozen for the duration of the current spec
      compileComponents(): Promise<any>
      createComponent<T>(
        component: Type<T>): ComponentFixture<T>
      // replacing metadata
      // can reach deeply into the current testing module
      overrideModule(
        ngModule: Type<any>,
        override: MetadataOverride<NgModule> ): void
      overrideComponent(
        component: Type<any>,
        override: MetadataOverride<Component> ): void
      overrideDirective(
        directive: Type<any>,
        override: MetadataOverride<Directive> ): void
      overridePipe(
        pipe: Type<any>,
        override: MetadataOverride<Pipe> ): void
      // overwrites all providers for the given token
      // with the given provider definition
      overrideProvider(
        token: any,
        provider: { useFactory: Function; deps: any[]; } ): void
      overrideTemplateUsingTestingModule(
        component: Type<any>, template: string ): void
    }

    // fixture for debugging and testing a component
    class ComponentFixture<T> {
      constructor(
        componentRef: ComponentRef<T>,
        ngZone: NgZone,
        _autoDetect: boolean
      )
      debugElement: DebugElement
      componentInstance: T
      nativeElement: any
      elementRef: ElementRef
      // change detection functionality
      // add and remove views from the tree,
      // initiate change-detection, and explicitly mark views as dirty (changed and need to be rerendered)
      changeDetectorRef: ChangeDetectorRef
      componentRef: ComponentRef<T>
      ngZone: NgZone | null
      // trigger a change detection cycle for the component
      detectChanges(checkNoChanges: boolean = true): void
      // do a change detection run to make sure there were no changes
      checkNoChanges(): void
      // set whether the fixture should autodetect changes
      autoDetectChanges(autoDetect: boolean = true)
      // whether the fixture is currently stable
      // or has async tasks that have not been completed yet
      isStable(): boolean
      //get a promise that resolves when the fixture is stable
      // can be used to resume testing after events have triggered
      // asynchronous activity or asynchronous change detection
      whenStable(): Promise<any>
      // get a promise that resolves when the ui state is stable following animations
      whenRenderingDone(): Promise<any>
      // trigger component destruction
      destroy(): void
    }

    interface DebugElement extends DebugNode {
      // element tag name, if it is an element
      name: string
      properties: {...}
      attributes: {...}
      classes: {...}
      styles: {...}
      // immediate DebugElement children
      children: DebugElement[]
      childNodes: DebugNode[]
      // corresponding DOM element in the browser (null for WebWorkers)
      nativeElement: any
      // first DebugElement that matches the predicate
      query(predicate: Predicate<DebugElement>): DebugElement
      // all DebugElements that matches the predicate
      queryAll(predicate: Predicate<DebugElement>): DebugElement[]
      queryAllNodes(predicate: Predicate<DebugNode>): DebugNode[]
      // triggers the event by its name
      // if there is a corresponding listener in the element listeners collection
      // second parameter is the event object expected by the handler
      // if the event lacks a listener or there some other problem,
      // consider calling nativeElement.dispatchEvent(eventObject)
      triggerEventHandler(eventName: string, eventObj: any): void
      // callbacks attached to the component @Output properties
      // and/or the element event properties
      listeners: EventListener[]
      // DebugElement parent
      parent: DebugElement | null
      nativeNode: any
      // host dependency injector
      injector: Injector
      // element own component instance, if it has one
      componentInstance: any
      // provides parent context for this element
      // often an ancestor component instance that governs this element.
      // when an element is repeated within *ngFor, the context is an NgForRow
      // whose $implicit property is the value of the row instance value
      // for example, the hero in *ngFor="let hero of heroes"
      context: any
      // dictionary of objects associated with template local variables
      // (e.g. #foo), keyed by the local variable name
      references: {...}
      // this component injector lookup tokens
      // includes the component itself
      // plus the tokens that the component lists in its providers metadata
      providerTokens: any[]
    }

    // sync()
    it('...', waitForAsync(inject([AClass], (object) => {
      object.doSomething.then(() => {
        expect(...);
      })
    });

    // fakeAsync()
    describe('this test', () => {
      it('looks async but is synchronous', <any>fakeAsync((): void => {
        let flag = false;
        setTimeout(() => { flag = true; }, 100);
        expect(flag).toBe(false);
        tick(50);
        expect(flag).toBe(false);
        tick(50);
        expect(flag).toBe(true);
      }));
    });

    // tick()
    describe('this test', () => {
      it('looks async but is synchronous', <any>fakeAsync((): void => {
        let flag = false;
        setTimeout(() => { flag = true; }, 100);
        expect(flag).toBe(false);
        tick(50);
        expect(flag).toBe(false);
        tick(50);
        expect(flag).toBe(true);
      }));
    });

  

    // --- --- COMPONENT
    @Component({
      selector: 'lightswitch-comp',
      template: `
        <button (click)="clicked()">Click me!</button>
        <span>{{message}}</span>`
    })
    export class LightswitchComponent {
      // --- 1 - switch value
      isOn = false;
      clicked() { this.isOn = !this.isOn; }
      get message() { return `The light is ${this.isOn ? 'On' : 'Off'}`; }
      // --- 2 - binding
      @Input() hero: Hero;
      @Output() selected = new EventEmitter<Hero>();
      click() { this.selected.emit(this.hero); }
      // --- 3 - service dependencies
      welcome: string;
      constructor(private userService: UserService) { }
      ngOnInit(): void {
        this.welcome = this.userService.isLoggedIn ?
          'Welcome, ' + this.userService.user.name : 'Please log in.';
      }
    }
    // --- service
    class MockUserService {
      isLoggedIn = true;
      user = { name: 'Test User'};
    };

    // --- --- TEST
    // --- 1 - switch value
    it('#clicked() should toggle #isOn', () => {
      const comp = new LightswitchComponent();
      expect(comp.isOn).toBe(false, 'off at first');
      comp.clicked();
      expect(comp.isOn).toBe(true, 'on after click');
      comp.clicked();
      expect(comp.isOn).toBe(false, 'off after second click');
    });
    it('#clicked() should set #message to "is on"', () => {
      const comp = new LightswitchComponent();
      expect(comp.message).toMatch(/is off/i, 'off at first');
      comp.clicked();
      expect(comp.message).toMatch(/is on/i, 'on after clicked');
    });
    // --- 2 - binding
    it('raises the selected event when clicked', () => {
      const comp = new DashboardHeroComponent();
      const hero: Hero = { id: 42, name: 'Test' };
      comp.hero = hero;
      comp.selected.subscribe(selectedHero => expect(selectedHero).toBe(hero));
      comp.click();
    });
    // --- 3 - service dependencies
    beforeEach(() => {
      TestBed.configureTestingModule({
        // provide the component-under-test and dependent service
        providers: [
          WelcomeComponent,
          { provide: UserService, useClass: MockUserService }
        ]
      });
      // inject both the component and the dependent service.
      comp = TestBed.inject(WelcomeComponent);
      userService = TestBed.inject(UserService);
    });
    it('should not have welcome message after construction', () => {
      expect(comp.welcome).toBeUndefined();
    });
    it('should welcome logged in user after Angular calls ngOnInit', () => {
      comp.ngOnInit();
      expect(comp.welcome).toContain(userService.user.name);
    });
    it('should ask user to log in if not logged in after ngOnInit', () => {
      userService.isLoggedIn = false;
      comp.ngOnInit();
      expect(comp.welcome).not.toContain(userService.user.name);
      expect(comp.welcome).toContain('log in');
    });
  

    // --- 1 - initial
    import { Component } from '@angular/core';
    @Component({
      selector: 'app-banner',
      template: `<p>banner works!</p>`,
      styles: []
    })
    export class BannerComponent { }
    // --- 2 - with external urls
    import { Component } from '@angular/core';
    @Component({
      selector: 'app-banner',
      templateUrl: './banner-external.component.html',
      styleUrls:  ['./banner-external.component.css']
    })
    export class BannerComponent { title = 'Test Tour of Heroes'; }
    // --- 3
    import { Component } from '@angular/core';
    @Component({
      selector: 'app-banner',
      template: '<h1>{{title}}</h1>',
      styles: ['h1 { color: green; font-size: 350%}']
    })
    export class BannerComponent { title = 'Test Tour of Heroes'; }
  

    // --- 1 - initial
    import { By } from '@angular/platform-browser';
    import { DebugElement } from '@angular/core';
    import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing';
    import { BannerComponent } from './banner-initial.component';
    describe('BannerComponent (initial CLI generated)', () => {
      let component: BannerComponent;
      let fixture: ComponentFixture<BannerComponent>;
      beforeEach(waitForAsync(() => {
        TestBed.configureTestingModule({
          declarations: [ BannerComponent ]
        }).compileComponents();
      }));
      beforeEach(() => {
        fixture = TestBed.createComponent(BannerComponent);
        component = fixture.componentInstance;
        fixture.detectChanges();
      });
      it('should create', () => {
        expect(component).toBeDefined();
      });
    });
    describe('BannerComponent (minimal)', () => {
      it('should create', () => {
        TestBed.configureTestingModule({
          declarations: [ BannerComponent ]
        });
        const fixture = TestBed.createComponent(BannerComponent);
        const component = fixture.componentInstance;
        expect(component).toBeDefined();
      });
    });
    describe('BannerComponent (with beforeEach)', () => {
      let component: BannerComponent;
      let fixture: ComponentFixture<BannerComponent>;
      beforeEach(() => {
        TestBed.configureTestingModule({
          declarations: [ BannerComponent ]
        });
        fixture = TestBed.createComponent(BannerComponent);
        component = fixture.componentInstance;
      });
      it('should create', () => {
        expect(component).toBeDefined();
      });
      it('should contain "banner works!"', () => {
        const bannerElement: HTMLElement = fixture.nativeElement;
        expect(bannerElement.textContent).toContain('banner works!');
      });
      it('should have <p> with "banner works!"', () => {
        const bannerElement: HTMLElement = fixture.nativeElement;
        const p = bannerElement.querySelector('p');
        expect(p.textContent).toEqual('banner works!');
      });
      it('should find the <p> with fixture.debugElement.nativeElement)', () => {
        const bannerDe: DebugElement = fixture.debugElement;
        const bannerEl: HTMLElement = bannerDe.nativeElement;
        const p = bannerEl.querySelector('p');
        expect(p.textContent).toEqual('banner works!');
      });
      it('should find the <p> with fixture.debugElement.query(By.css)', () => {
        const bannerDe: DebugElement = fixture.debugElement;
        const paragraphDe = bannerDe.query(By.css('p'));
        const p: HTMLElement = paragraphDe.nativeElement;
        expect(p.textContent).toEqual('banner works!');
      });
    });

    // --- 2 - with external urls
    import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing';
    import { By }              from '@angular/platform-browser';
    import { DebugElement }    from '@angular/core';
    import { BannerComponent } from './banner-external.component';
    describe('BannerComponent (external files)', () => {
      let component: BannerComponent;
      let fixture:   ComponentFixture<BannerComponent>;
      let h1:        HTMLElement;
      describe('Two beforeEach', () => {
        beforeEach(waitForAsync(() => {
          TestBed.configureTestingModule({
            declarations: [ BannerComponent ],
          })
          .compileComponents();  // compile template and css
        }));
        // synchronous beforeEach
        beforeEach(() => {
          fixture = TestBed.createComponent(BannerComponent);
          component = fixture.componentInstance; // BannerComponent test instance
          h1 = fixture.nativeElement.querySelector('h1');
        });
        tests();
      });
      describe('One beforeEach', () => {
        beforeEach(waitForAsync(() => {
          TestBed.configureTestingModule({
            declarations: [ BannerComponent ],
          })
          .compileComponents()
          .then(() => {
            fixture = TestBed.createComponent(BannerComponent);
            component = fixture.componentInstance;
            h1 = fixture.nativeElement.querySelector('h1');
          });
        }));
        tests();
      });
      function tests() {
        it('no title in the DOM until manually call `detectChanges`', () => {
          expect(h1.textContent).toEqual('');
        });
        it('should display original title', () => {
          fixture.detectChanges();
          expect(h1.textContent).toContain(component.title);
        });
        it('should display a different test title', () => {
          component.title = 'Test Title';
          fixture.detectChanges();
          expect(h1.textContent).toContain('Test Title');
        });
      }
    });

    // --- 3
    import { BannerComponent } from './banner.component';
    describe('BannerComponent (inline template)', () => {
      let component: BannerComponent;
      let fixture:   ComponentFixture<BannerComponent>;
      let h1:        HTMLElement;
      beforeEach(() => {
        TestBed.configureTestingModule({
          declarations: [ BannerComponent ],
        });
        fixture = TestBed.createComponent(BannerComponent);
        component = fixture.componentInstance; // BannerComponent test instance
        h1 = fixture.nativeElement.querySelector('h1');
      });
      it('no title in the DOM after createComponent()', () => {
        expect(h1.textContent).toEqual('');
      });
      it('should display original title', () => {
        fixture.detectChanges();
        expect(h1.textContent).toContain(component.title);
      });
      it('should display original title after detectChanges()', () => {
        fixture.detectChanges();
        expect(h1.textContent).toContain(component.title);
      });
      it('should display a different test title', () => {
        component.title = 'Test Title';
        fixture.detectChanges();
        expect(h1.textContent).toContain('Test Title');
      });
    });
    // --- banner.component.detect-changes.spec.ts
    describe('BannerComponent (AutoChangeDetect)', () => {
      let comp:    BannerComponent;
      let fixture: ComponentFixture<BannerComponent>;
      let h1:      HTMLElement;
      beforeEach(() => {
        TestBed.configureTestingModule({
          declarations: [ BannerComponent ],
          providers: [
            { provide: ComponentFixtureAutoDetect, useValue: true }
          ]
        });
        fixture = TestBed.createComponent(BannerComponent);
        comp = fixture.componentInstance;
        h1 = fixture.nativeElement.querySelector('h1');
      });
      it('should display original title', () => {
        // Hooray! No `fixture.detectChanges()` needed
        expect(h1.textContent).toContain(comp.title);
      });
      it('should still see original title after comp.title change', () => {
        const oldTitle = comp.title;
        comp.title = 'Test Title';
        // Displayed title is old because Angular didn't hear the change :(
        expect(h1.textContent).toContain(oldTitle);
      });
      it('should display updated title after detectChanges', () => {
        comp.title = 'Test Title';
        fixture.detectChanges(); // detect changes explicitly
        expect(h1.textContent).toContain(comp.title);
      });
    });
  

    // --- --- COMPONENT
    import { Component, OnInit } from '@angular/core';
    import { UserService }       from '../model/user.service';
    @Component({
      selector: 'app-welcome',
      template: '<h3 class="welcome"><i>{{welcome}}</i></h3>'
    })
    export class WelcomeComponent  implements OnInit {
      welcome: string;
      constructor(private userService: UserService) { }
      ngOnInit(): void {
        this.welcome = this.userService.isLoggedIn ?
          'Welcome, ' + this.userService.user.name : 'Please log in.';
      }
    }
    // --- --- TEST
    let userServiceStub: Partial<UserService>;
    beforeEach(() => {
      // stub UserService for test purposes
      userServiceStub = {
        isLoggedIn: true,
        user: { name: 'Test User'}
      };
      TestBed.configureTestingModule({
          declarations: [ WelcomeComponent ],
          providers:    [ {provide: UserService, useValue: userServiceStub } ]
      });
      fixture = TestBed.createComponent(WelcomeComponent);
      comp    = fixture.componentInstance;
      // UserService from the root injector
      userService = TestBed.inject(UserService);
      //  get the "welcome" element by CSS selector (e.g., by class name)
      el = fixture.nativeElement.querySelector('.welcome');
    });
    it('should welcome the user', () => {
      fixture.detectChanges();
      const content = el.textContent;
      expect(content).toContain('Welcome', '"Welcome ..."');
      expect(content).toContain('Test User', 'expected name');
    });
    it('should welcome "Bubba"', () => {
      userService.user.name = 'Bubba'; // welcome message hasn't been shown yet
      fixture.detectChanges();
      expect(el.textContent).toContain('Bubba');
    });
    it('should request login if not logged in', () => {
      userService.isLoggedIn = false; // welcome message hasn't been shown yet
      fixture.detectChanges();
      const content = el.textContent;
      expect(content).not.toContain('Welcome', 'not welcomed');
      expect(content).toMatch(/log in/i, '"log in"');
    });
  

    // --- --- COMPONENT
    import { TwainService } from './twain.service';
    @Component({
      selector: 'twain-quote',
      template: `
        <p class="twain"><i>{{quote | async}}</i></p>
        <button (click)="getQuote()">Next quote</button>
        <p class="error" *ngIf="errorMessage">{{ errorMessage }}</p>`,
      styles: [ `.twain { font-style: italic; } .error { color: red; }` ]
    })
    export class TwainComponent implements OnInit {
      errorMessage: string;
      quote: Observable<string>;
      constructor(private twainService: TwainService) {}
      ngOnInit(): void { this.getQuote(); }
      getQuote() {
        this.errorMessage = '';
        this.quote = this.twainService.getQuote().pipe(
          startWith('...'),
          catchError( (err: any) => { // wait a turn, errorMessage already set once
            setTimeout(() => this.errorMessage = err.message || err.toString());
            return of('...'); // reset message to placeholder
          })
        );
      }
    }
    // Mark Twain Quote service gets quotes from server
    @Injectable()
    export class TwainService {
      constructor(private http: HttpClient) { }
      private nextId = 1;
      getQuote(): Observable<string> {
        return Observable.create(observer => observer.next(this.nextId++)).pipe(
          // tap((id: number) => console.log(id)),
          // tap((id: number) => { throw new Error('Simulated server error'); }),
          switchMap((id: number) => this.http.get<Quote>(`api/quotes/${id}`)),
          // tap((q : Quote) => console.log(q)),
          map((q: Quote) => q.quote),
          // `errors` is observable of http.get errors
          retryWhen(errors => errors.pipe(
            switchMap((error: HttpErrorResponse)  => {
              if (error.status === 404) {
                // Queried for quote that doesn't exist.
                this.nextId = 1; // retry with quote id:1
                return of(null); // signal OK to retry
              }
              // Some other HTTP error.
              console.error(error);
              return throwError('Cannot get Twain quotes from the server');
            }),
            take(2),
            // If a second retry value, then didn't find id:1 and triggers the following error
            concat(throwError('There are no Twain quotes')) // didn't find id:1
          ))
        );
      }
    }

    // --- --- TEST
    // --- async observable helpers, to return an asynchronous observable
    import { defer } from 'rxjs';
    // async observable that emits-once and completes after a JS engine turn
    export function asyncData<T>(data: T) {
      return defer(() => Promise.resolve(data));
    }
    // async observable error that errors after a JS engine turn
    export function asyncError<T>(errorObject: any) {
      return defer(() => Promise.reject(errorObject));
    }
    // ---
    import {
      waitForAsync, fakeAsync, ComponentFixture, TestBed, tick
    } from '@angular/core/testing';
    import { asyncData, asyncError }  from '../../testing';
    import { of, throwError, interval } from 'rxjs';
    import { last, delay, take } from 'rxjs/operators';
    import { TwainService }   from './twain.service';
    import { TwainComponent } from './twain.component';
    import { cold, getTestScheduler } from 'jasmine-marbles';
    describe('TwainComponent', () => {
      let component: TwainComponent;
      let fixture: ComponentFixture<TwainComponent>;
      let getQuoteSpy: jasmine.Spy;
      let quoteEl: HTMLElement;
      let testQuote: string;

      // Helper function to get the error message element value
      // An *ngIf keeps it out of the DOM until there is an error
      const errorMessage = () => {
        const el = fixture.nativeElement.querySelector('.error');
        return el ? el.textContent : null;
      };

      beforeEach(() => {
        testQuote = 'Test Quote';
        // Create a fake TwainService object with a `getQuote()` spy
        const twainService = jasmine.createSpyObj('TwainService', ['getQuote']);
        // Make the spy return a synchronous Observable with the test data
        getQuoteSpy = twainService.getQuote.and.returnValue( of(testQuote) );
        TestBed.configureTestingModule({
          declarations: [ TwainComponent ],
          providers:    [
            { provide: TwainService, useValue: twainService }
          ]
        });
        fixture = TestBed.createComponent(TwainComponent);
        component = fixture.componentInstance;
        quoteEl = fixture.nativeElement.querySelector('.twain');
      });

      describe('when test with synchronous observable', () => {
        it('should not show quote before OnInit', () => {
          expect(quoteEl.textContent).toBe('', 'nothing displayed');
          expect(errorMessage()).toBeNull('should not show error element');
          expect(getQuoteSpy.calls.any()).toBe(false, 'getQuote not yet called');
        });

        // The quote would not be immediately available if the service were truly async
        it('should show quote after component initialized', () => {
          fixture.detectChanges(); // onInit()
          // sync spy result shows testQuote immediately after init
          expect(quoteEl.textContent).toBe(testQuote);
          expect(getQuoteSpy.calls.any()).toBe(true, 'getQuote called');
        });

        // The error would not be immediately available if the service were truly async
        // Use `fakeAsync` because the component error calls `setTimeout`
        it('should display error when TwainService fails',
        fakeAsync(() => {
          // tell spy to return an error observable
          getQuoteSpy.and.returnValue(
            throwError('TwainService test failure'));
          fixture.detectChanges(); // onInit()
          // sync spy errors immediately after init
          tick(); // flush the component's setTimeout()
          fixture.detectChanges(); // update errorMessage within setTimeout()
          expect(errorMessage()).toMatch(/test failure/, 'should display error');
          expect(quoteEl.textContent).toBe('...', 'should show placeholder');
        }));
      });

      describe('when test with asynchronous observable', () => {
        beforeEach(() => {
          // Simulate delayed observable values with the `asyncData()` helper
          getQuoteSpy.and.returnValue(asyncData(testQuote));
        });

        it('should not show quote before OnInit',
        () => {
          expect(quoteEl.textContent).toBe('', 'nothing displayed');
          expect(errorMessage()).toBeNull('should not show error element');
          expect(getQuoteSpy.calls.any()).toBe(false, 'getQuote not yet called');
        });

        it('should still not show quote after component initialized',
        () => {
          fixture.detectChanges();
          // getQuote service is async => still has not returned with quote
          // so should show the start value, '...'
          expect(quoteEl.textContent).toBe('...', 'should show placeholder');
          expect(errorMessage()).toBeNull('should not show error');
          expect(getQuoteSpy.calls.any()).toBe(true, 'getQuote called');
        });

        it('should show quote after getQuote (fakeAsync)',
        fakeAsync(() => {
          fixture.detectChanges(); // ngOnInit()
          expect(quoteEl.textContent).toBe('...', 'should show placeholder');
          tick(); // flush the observable to get the quote
          fixture.detectChanges(); // update view
          expect(quoteEl.textContent).toBe(testQuote, 'should show quote');
          expect(errorMessage()).toBeNull('should not show error');
        }));

        it('should show quote after getQuote (async)',
        waitForAsync(() => {
          fixture.detectChanges(); // ngOnInit()
          expect(quoteEl.textContent).toBe('...', 'should show placeholder');
          fixture.whenStable().then(() => { // wait for async getQuote
            fixture.detectChanges();        // update view with quote
            expect(quoteEl.textContent).toBe(testQuote);
            expect(errorMessage()).toBeNull('should not show error');
          });
        }));

        it('should show last quote (quote done)',
        (done: DoneFn) => {
          fixture.detectChanges();
          component.quote.pipe( last() ).subscribe(() => {
            fixture.detectChanges(); // update view with quote
            expect(quoteEl.textContent).toBe(testQuote);
            expect(errorMessage()).toBeNull('should not show error');
            done();
          });
        });

        it('should show quote after getQuote (spy done)',
        (done: DoneFn) => {
          fixture.detectChanges();
          // the spy's most recent call returns the observable with the test quote
          getQuoteSpy.calls.mostRecent().returnValue.subscribe(() => {
            fixture.detectChanges(); // update view with quote
            expect(quoteEl.textContent).toBe(testQuote);
            expect(errorMessage()).toBeNull('should not show error');
            done();
          });
        });

        it('should display error when TwainService fails',
        fakeAsync(() => {
          // tell spy to return an async error observable
          getQuoteSpy.and.returnValue(asyncError<string>('TwainService test failure'));
          fixture.detectChanges();
          tick();                  // component shows error after a setTimeout()
          fixture.detectChanges(); // update error message
          expect(errorMessage()).toMatch(/test failure/, 'should display error');
          expect(quoteEl.textContent).toBe('...', 'should show placeholder');
        }));
      });

      // --- marbles
      // A synchronous test that simulates async behavior
      it('should show quote after getQuote (marbles)', () => {
        // observable test quote value and complete(), after delay:
        // cold observable that waits three frames (---),
        // emits a value (x), and completes (|)
        // second argument (x) is to the emitted value (testQuote)
        const q$ = cold('---x|', { x: testQuote });
        getQuoteSpy.and.returnValue( q$ );
        fixture.detectChanges(); // ngOnInit()
        expect(quoteEl.textContent).toBe('...', 'should show placeholder');
        getTestScheduler().flush(); // flush the observables
        fixture.detectChanges(); // update view
        expect(quoteEl.textContent).toBe(testQuote, 'should show quote');
        expect(errorMessage()).toBeNull('should not show error');
      });
      // Still need fakeAsync() because of component setTimeout()
      it('should display error when TwainService fails', fakeAsync(() => {
        // observable error after delay
        const q$ = cold('---#|', null, new Error('TwainService test failure'));
        getQuoteSpy.and.returnValue( q$ );
        fixture.detectChanges(); // ngOnInit()
        expect(quoteEl.textContent).toBe('...', 'should show placeholder');
        getTestScheduler().flush(); // flush the observables
        tick();                     // component shows error after a setTimeout()
        fixture.detectChanges();    // update error message
        expect(errorMessage()).toMatch(/test failure/, 'should display error');
        expect(quoteEl.textContent).toBe('...', 'should show placeholder');
      }));

    });

    // --- --- fakeAsync sample
    describe('this test', () => {
      it('looks async but is synchronous',
      <any>fakeAsync((): void => {
        let flag = false;
        setTimeout(() => { flag = true; }, 100);
        expect(flag).toBe(false);
        tick(50);
        expect(flag).toBe(false);
        tick(50);
        expect(flag).toBe(true);
      }));
    });
    it('should get Date diff correctly in fakeAsync',
    fakeAsync(() => {
      const start = Date.now();
      tick(100);
      const end = Date.now();
      expect(end - start).toBe(100);
    }));
    it('should get Date diff correctly in fakeAsync with rxjs scheduler',
    fakeAsync(() => {
      // need to add `import 'zone.js/dist/zone-patch-rxjs-fake-async'
      // to patch rxjs scheduler
      let result = null;
      of ('hello').pipe(delay(1000)).subscribe(v => { result = v; });
      expect(result).toBeNull();
      tick(1000);
      expect(result).toBe('hello');

      const start = new Date().getTime();
      let dateDiff = 0;
      interval(1000).pipe(take(2)).subscribe(() => dateDiff = (new Date().getTime() - start));

      tick(1000);
      expect(dateDiff).toBe(1000);
      tick(1000);
      expect(dateDiff).toBe(2000);
    }));

    // --- --- jasmine.clock() - auto enter fakeAsync
    // --- src/test.ts
    (window as any)['__zone_symbol__fakeAsyncPatchLock'] = true;
    import 'zone.js/dist/zone-testing';
    // ---
    describe('use jasmine.clock()', () => {
      // need to config __zone_symbol__fakeAsyncPatchLock flag
      // before loading zone.js/dist/zone-testing
      beforeEach(() => { jasmine.clock().install(); });
      afterEach(() => { jasmine.clock().uninstall(); });
      it('should auto enter fakeAsync', () => {
        // is in fakeAsync now, don't need to call fakeAsync(testFn)
        let called = false;
        setTimeout(() => { called = true; }, 100);
        jasmine.clock().tick(100);
        expect(called).toBe(true);
      });
    });
  

    // --- --- COMPONENT
    import { Component, AfterViewInit, ViewChild } from '@angular/core';
    @Component({
      selector: 'sample-canvas',
      template: '<canvas #sampleCanvas width="200" height="200"></canvas>'
    })
    export class CanvasComponent implements AfterViewInit {
      blobSize: number;
      @ViewChild('sampleCanvas') sampleCanvas;
      constructor() { }
      ngAfterViewInit() {
        const canvas = this.sampleCanvas.nativeElement;
        const context = canvas.getContext('2d');
        if (context) {
          context.clearRect(0, 0, 200, 200);
          context.fillStyle = '#FF1122';
          context.fillRect(0, 0, 200, 200);
          canvas.toBlob((blob: any) => {
            this.blobSize = blob.size;
          });
        }
      }
    }

    // --- --- TEST
    import { TestBed, waitForAsync, tick, fakeAsync } from '@angular/core/testing';
    import { CanvasComponent } from './canvas.component';
    describe('CanvasComponent', () => {
      beforeEach(waitForAsync(() => {
        TestBed.configureTestingModule({
          declarations: [
            CanvasComponent
          ],
        }).compileComponents();
      }));
      beforeEach(() => {
        window['__zone_symbol__FakeAsyncTestMacroTask'] = [
          {
            source: 'HTMLCanvasElement.toBlob',
            callbackArgs: [{ size: 200 }]
          }
        ];
      });
      it('should be able to generate blob data from canvas', fakeAsync(() => {
        const fixture = TestBed.createComponent(CanvasComponent);
        fixture.detectChanges();
        tick();
        const app = fixture.debugElement.componentInstance;
        expect(app.blobSize).toBeGreaterThan(0);
      }));
    });
  

    // --- --- HOST COMPONENT
    // set each component hero input property to the looping value
    // and listens for the component "selected" event:
    @Component({
      selector: 'app-dashboard',
      template: `
        <div class="grid grid-pad">
          <dashboard-hero *ngFor="let hero of heroes"  class="col-1-4"
            [hero]=hero  (selected)="gotoDetail($event)" >
          </dashboard-hero>
        </div>`,
      styleUrls: [ './dashboard.component.css' ]
    })
    export class DashboardComponent implements OnInit {
      heroes: Hero[] = [];
      constructor(
        private router: Router,
        private heroService: HeroService
      ) { }
      ngOnInit() {
        this.heroService.getHeroes()
          .subscribe(heroes => this.heroes = heroes.slice(1, 5));
      }
      gotoDetail(hero: Hero) {
        let url = `/heroes/${hero.id}`;
        this.router.navigateByUrl(url);
      }
      get title() {
        let cnt = this.heroes.length;
        return cnt === 0 ? 'No Heroes' :
          cnt === 1 ? 'Top Hero' :  `Top ${cnt} Heroes`;
      }
    }
    // --- --- COMPONENT
    @Component({
      selector: 'dashboard-hero',
      template: `
        <div (click)="click()" class="hero">
          {{hero.name | uppercase}}
        </div>`,
      styleUrls: [ './dashboard-hero.component.css' ]
    })
    export class DashboardHeroComponent {
      @Input() hero: Hero;
      @Output() selected = new EventEmitter<Hero>();
      click() { this.selected.emit(this.hero); }
    }

    // --- --- TEST
  

    // --- click helper from '../../testing'
    // button events to pass to "DebugElement.triggerEventHandler"
    // for RouterLink event handler
    export const ButtonClickEvents = {
      left:  { button: 0 },
      right: { button: 2 }
    };
    // Simulate element click. Defaults to mouse left-button click event
    export function click(
      el: DebugElement | HTMLElement, eventObj: any = ButtonClickEvents.left
    ): void {
      if (el instanceof HTMLElement) {
        el.click();
      } else {
        el.triggerEventHandler('click', eventObj);
      }
    }
    // ---
    import {
      waitForAsync, ComponentFixture, TestBed
    } from '@angular/core/testing';
    import { By } from '@angular/platform-browser';
    import { DebugElement } from '@angular/core';
    import { addMatchers, click } from '../../testing';
    import { Hero } from '../model/hero';
    import { DashboardHeroComponent } from './dashboard-hero.component';
    beforeEach( addMatchers );

    describe('DashboardHeroComponent class only', () => {
      it('raises the selected event when clicked', () => {
        const comp = new DashboardHeroComponent();
        const hero: Hero = { id: 42, name: 'Test' };
        comp.hero = hero;
        comp.selected.subscribe(
          selectedHero => expect(selectedHero).toBe(hero)
        );
        comp.click();
      });
    });

    describe('DashboardHeroComponent when tested stand-alone (directly)', () => {
      let comp: DashboardHeroComponent;
      let expectedHero: Hero;
      let fixture: ComponentFixture<DashboardHeroComponent>;
      let heroDe: DebugElement;
      let heroEl: HTMLElement;
      beforeEach(waitForAsync(() => {
        TestBed.configureTestingModule({
          declarations: [ DashboardHeroComponent ]
        }).compileComponents();
      }));
      beforeEach(() => {
        fixture = TestBed.createComponent(DashboardHeroComponent);
        comp    = fixture.componentInstance;
        // find the hero's DebugElement and element
        heroDe  = fixture.debugElement.query(By.css('.hero'));
        heroEl = heroDe.nativeElement;
        // mock the hero supplied by the parent component
        expectedHero = { id: 42, name: 'Test Name' };
        // simulate the parent setting the input property with that hero
        comp.hero = expectedHero;
        // trigger initial data binding
        fixture.detectChanges();
      });
      it('should display hero name in uppercase', () => {
        const expectedPipedName = expectedHero.name.toUpperCase();
        expect(heroEl.textContent).toContain(expectedPipedName);
      });

      it('should raise selected event when clicked (triggerEventHandler)', () => {
        let selectedHero: Hero;
        comp.selected.subscribe((hero: Hero) => selectedHero = hero);
        heroDe.triggerEventHandler('click', null);
        expect(selectedHero).toBe(expectedHero);
      });
      it('should raise selected event when clicked (element.click)', () => {
        let selectedHero: Hero;
        comp.selected.subscribe((hero: Hero) => selectedHero = hero);
        heroEl.click();
        expect(selectedHero).toBe(expectedHero);
      });
      it('should raise selected event when clicked (click helper)', () => {
        let selectedHero: Hero;
        comp.selected.subscribe(hero => selectedHero = hero);
        click(heroDe); // click helper with DebugElement
        click(heroEl); // click helper with native element
        expect(selectedHero).toBe(expectedHero);
      });

    });

    describe('DashboardHeroComponent when inside a TestHostComponent', () => {
      let testHost: TestHostComponent;
      let fixture: ComponentFixture<TestHostComponent>;
      let heroEl: HTMLElement;
      beforeEach(waitForAsync(() => {
        TestBed.configureTestingModule({
          declarations: [ DashboardHeroComponent, TestHostComponent ]
        }).compileComponents();
      }));
      beforeEach(() => {
        // create TestHostComponent instead of DashboardHeroComponent
        fixture  = TestBed.createComponent(TestHostComponent);
        testHost = fixture.componentInstance;
        heroEl   = fixture.nativeElement.querySelector('.hero');
        fixture.detectChanges(); // trigger initial data binding
      });
      it('should display hero name', () => {
        const expectedPipedName = testHost.hero.name.toUpperCase();
        expect(heroEl.textContent).toContain(expectedPipedName);
      });
      it('should raise selected event when clicked', () => {
        click(heroEl);
        // selected hero should be the same data bound hero
        expect(testHost.selectedHero).toBe(testHost.hero);
      });
    });

    // TestHostComponent
    import { Component } from '@angular/core';
    @Component({
      template: `
        <dashboard-hero
          [hero]="hero" (selected)="onSelected($event)">
        </dashboard-hero>`
    })
    class TestHostComponent {
      hero: Hero = { id: 42, name: 'Test Name' };
      selectedHero: Hero;
      onSelected(hero: Hero) { this.selectedHero = hero; }
    }
  

    import {
      waitForAsync, inject, ComponentFixture, TestBed
    } from '@angular/core/testing';
    import { addMatchers, asyncData, click } from '../../testing';
    import { HeroService }   from '../model/hero.service';
    import { getTestHeroes } from '../model/testing/test-heroes';
    import { By }     from '@angular/platform-browser';
    import { Router } from '@angular/router';
    import { DashboardComponent } from './dashboard.component';
    import { DashboardModule }    from './dashboard.module';
    beforeEach ( addMatchers );
    let comp: DashboardComponent;
    let fixture: ComponentFixture<DashboardComponent>;
    // Deep
    describe('DashboardComponent (deep)', () => {
      beforeEach(() => {
        TestBed.configureTestingModule({
          imports: [ DashboardModule ]
        });
      });
      compileAndCreate();
      tests(clickForDeep);
      function clickForDeep() {
        // get first <div class="hero">
        const heroEl: HTMLElement = fixture.nativeElement.querySelector('.hero');
        click(heroEl);
      }
    });
    // Shallow
    import { NO_ERRORS_SCHEMA } from '@angular/core';
    describe('DashboardComponent (shallow)', () => {
      beforeEach(() => {
        TestBed.configureTestingModule({
          declarations: [ DashboardComponent ],
          schemas:      [NO_ERRORS_SCHEMA]
        });
      });
      compileAndCreate();
      tests(clickForShallow);
      function clickForShallow() {
        // get first <dashboard-hero> DebugElement
        const heroDe = fixture.debugElement.query(By.css('dashboard-hero'));
        heroDe.triggerEventHandler('selected', comp.heroes[0]);
      }
    });
    // Add TestBed providers, compile, and create DashboardComponent
    function compileAndCreate() {
      beforeEach(waitForAsync(() => {
        const routerSpy = jasmine.createSpyObj('Router', ['navigateByUrl']);
        const heroServiceSpy = jasmine.createSpyObj('HeroService', ['getHeroes']);
        TestBed.configureTestingModule({
          providers: [
            { provide: HeroService, useValue: heroServiceSpy },
            { provide: Router,      useValue: routerSpy }
          ]
        })
        .compileComponents().then(() => {
          fixture = TestBed.createComponent(DashboardComponent);
          comp = fixture.componentInstance;
          // getHeroes spy returns observable of test heroes
          heroServiceSpy.getHeroes.and.returnValue(asyncData(getTestHeroes()));
        });
      }));
    }

    // (almost) same tests for both
    // only change: the way that the first hero is clicked
    function tests(heroClick: Function) {
      it('should NOT have heroes before ngOnInit', () => {
        expect(comp.heroes.length).toBe(0,
          'should not have heroes before ngOnInit');
      });
      it('should NOT have heroes immediately after ngOnInit', () => {
        fixture.detectChanges(); // runs initial lifecycle hooks
        expect(comp.heroes.length).toBe(0,
          'should not have heroes until service promise resolves');
      });
      describe('after get dashboard heroes', () => {
        let router: Router;
        // Trigger component so it gets heroes and binds to them
        beforeEach(waitForAsync(() => {
          router = fixture.debugElement.injector.get(Router);
          fixture.detectChanges(); // runs ngOnInit -> getHeroes
          fixture.whenStable() // No need for the `lastPromise` hack!
            .then(() => fixture.detectChanges()); // bind to heroes
        }));
        it('should HAVE heroes', () => {
          expect(comp.heroes.length).toBeGreaterThan(0,
            'should have heroes after service promise resolves');
        });
        it('should DISPLAY heroes', () => {
          // Find and examine the displayed heroes
          // Look for them in the DOM by css class
          const heroes = fixture.nativeElement.querySelectorAll('dashboard-hero');
          expect(heroes.length).toBe(4, 'should display 4 heroes');
        });

        it('should tell ROUTER to navigate when hero clicked', () => {
          heroClick(); // trigger click on first inner <div class="hero">
          // args passed to router.navigateByUrl() spy
          const spy = router.navigateByUrl as jasmine.Spy;
          const navArgs = spy.calls.first().args[0];
          // expecting to navigate to id of the component's first hero
          const id = comp.heroes[0].id;
          expect(navArgs).toBe('/heroes/' + id,
            'should nav to HeroDetail for first hero');
        });

      });
    }
  

    import { Router } from '@angular/router';
    import { DashboardComponent } from './dashboard.component';
    import { Hero }               from '../model/hero';
    import { addMatchers }     from '../../testing';
    import { TestHeroService, HeroService } from '../model/testing/test-hero.service';
    class FakeRouter { navigateByUrl(url: string) { return url;  } }
    describe('DashboardComponent class only', () => {
      let comp: DashboardComponent;
      let heroService: TestHeroService;
      let router: Router;

      beforeEach(() => {
        addMatchers();
        router = new FakeRouter() as any as Router;
        heroService = new TestHeroService();
        comp = new DashboardComponent(router, heroService);
      });

      it('should NOT have heroes before calling OnInit', () => {
        expect(comp.heroes.length).toBe(0,
          'should not have heroes before OnInit');
      });
      it('should NOT have heroes immediately after OnInit', () => {
        comp.ngOnInit(); // ngOnInit -> getHeroes
        expect(comp.heroes.length).toBe(0,
          'should not have heroes until service promise resolves');
      });
      it('should HAVE heroes after HeroService gets them', (done: DoneFn) => {
        comp.ngOnInit(); // ngOnInit -> getHeroes
        heroService.lastResult // the one from getHeroes
          .subscribe(
            () => {
            // throw new Error('deliberate error'); // see it fail gracefully
            expect(comp.heroes.length).toBeGreaterThan(0,
              'should have heroes after service promise resolves');
            done();
          },
          done.fail);
      });

      it('should tell ROUTER to navigate by hero id', () => {
        const hero: Hero = {id: 42, name: 'Abbracadabra' };
        const spy = spyOn(router, 'navigateByUrl');
        comp.gotoDetail(hero);
        const navArgs = spy.calls.mostRecent().args[0];
        expect(navArgs).toBe('/heroes/42', 'should nav to HeroDetail for Hero 42');
      });

    });
  

    // --- hero-detail.component.ts
    import { HeroDetailService } from './hero-detail.service';
    @Component({
      selector:    'app-hero-detail',
      template: `
        <div *ngIf="hero">
          <h2><span>{{hero.name | titlecase}}</span> Details</h2>
          <div>
            <label>id: </label>{{hero.id}}</div>
          <div>
            <label for="name">name: </label>
            <input id="name" [(ngModel)]="hero.name" placeholder="name" />
          </div>
          <button (click)="save()">Save</button>
          <button (click)="cancel()">Cancel</button>
        </div>`,
      providers:  [ HeroDetailService ]
    })
    export class HeroDetailComponent implements OnInit {
      constructor(
        private heroDetailService: HeroDetailService,
        private route:  ActivatedRoute,
        private router: Router) {
      }
      @Input() hero: Hero;
      ngOnInit(): void {
        // get hero when `id` param changes
        this.route.paramMap.subscribe(pmap => this.getHero(pmap.get('id')));
      }
      private getHero(id: string): void {
        // when no id or id===0, create new blank hero
        if (!id) {
          this.hero = { id: 0, name: '' } as Hero;
          return;
        }
        this.heroDetailService.getHero(id).subscribe(hero => {
          if (hero) {
            this.hero = hero;
          } else {
            this.gotoList(); // id not found; navigate to list
          }
        });
      }
      save(): void {
        this.heroDetailService.saveHero(this.hero).subscribe(() => this.gotoList());
      }
      cancel() { this.gotoList(); }
      gotoList() {
        this.router.navigate(['../'], {relativeTo: this.route});
      }
    }

    // --- hero-list.component.ts
    import { HeroService } from '../model/hero.service';
    @Component({
      selector: 'app-heroes',
      templateUrl: `
        <ul class="heroes">
          <li *ngFor="let hero of heroes | async "
            [class.selected]="hero === selectedHero"
            (click)="onSelect(hero)">
            <span class="badge">{{hero.id}}</span> {{hero.name}}
          </li>
        </ul>`
    })
    export class HeroListComponent implements OnInit {
      heroes: Observable<Hero[]>;
      selectedHero: Hero;
      constructor(
        private router: Router,
        private heroService: HeroService
      ) { }
      ngOnInit() {
        this.heroes = this.heroService.getHeroes();
      }
      onSelect(hero: Hero) {
        this.selectedHero = hero;
        this.router.navigate(['../heroes', this.selectedHero.id ]);
      }
    }

    // --- --- TEST
  

    import {
      waitForAsync, ComponentFixture, fakeAsync, inject, TestBed, tick
    } from '@angular/core/testing';
    import { Router }       from '@angular/router';
    import {
      ActivatedRoute, ActivatedRouteStub, asyncData, click, newEvent
    } from '../../testing';
    import { Hero }                from '../model/hero';
    import { HeroDetailComponent } from './hero-detail.component';
    import { HeroDetailService }   from './hero-detail.service';
    import { HeroModule }          from './hero.module';
    // ---
    let activatedRoute: ActivatedRouteStub;
    let component: HeroDetailComponent;
    let fixture: ComponentFixture<HeroDetailComponent>;
    let page: Page;
    // --- TESTS CALLS
    describe('HeroDetailComponent', () => {
      beforeEach(() => {
        activatedRoute = new ActivatedRouteStub();
      });
      // --- import own feature module, when many mutual dependencies within the module
      describe('with HeroModule setup', heroModuleSetup);
      // --- fake all necessary features of a nested services with stub spy
      describe('when override its provided HeroDetailService', overrideSetup);
      // --- configure testing module from individual pieces
      describe('with FormsModule setup', formsModuleSetup);
      // --- combine frequently requested parts
      describe('with SharedModule setup', sharedModuleSetup);
    });

    // --- HELPERS
    // create the HeroDetailComponent, initialize it, set test variables
    function createComponent() {
      fixture = TestBed.createComponent(HeroDetailComponent);
      component = fixture.componentInstance;
      page = new Page(fixture);
      // 1st change detection triggers ngOnInit which gets a hero
      fixture.detectChanges();
      return fixture.whenStable().then(() => {
        // 2nd change detection displays the async-fetched hero
        fixture.detectChanges();
      });
    }
    class Page {
      // getter properties wait to query the DOM until called.
      get buttons()     {
        return this.queryAll<HTMLButtonElement>('button'); }
      get saveBtn()     {
        return this.buttons[0]; }
      get cancelBtn()   {
        return this.buttons[1]; }
      get nameDisplay() {
        return this.query<HTMLElement>('span'); }
      get nameInput()   {
        return this.query<HTMLInputElement>('input'); }
      gotoListSpy: jasmine.Spy;
      navigateSpy:  jasmine.Spy;
      constructor(fixture: ComponentFixture<HeroDetailComponent>) {
        // get the navigate spy from the injected router spy object
        const routerSpy = <any> fixture.debugElement.injector.get(Router);
        this.navigateSpy = routerSpy.navigate;
        // spy on component `gotoList()` method
        const component = fixture.componentInstance;
        this.gotoListSpy = spyOn(component, 'gotoList').and.callThrough();
      }
      // query helpers
      private query<T>(selector: string): T {
        return fixture.nativeElement.querySelector(selector);
      }
      private queryAll<T>(selector: string): T[] {
        return fixture.nativeElement.querySelectorAll(selector);
      }
    }
    function createRouterSpy() {
      return jasmine.createSpyObj('Router', ['navigate']);
    }
    // ActivatedRouteStub - ActivateRoute test double with a `paramMap` observable
    // use the `setParamMap()` method to add the next `paramMap` value
    export { ActivatedRoute } from '@angular/router';
    import { convertToParamMap, ParamMap, Params } from '@angular/router';
    import { ReplaySubject } from 'rxjs';
    export class ActivatedRouteStub {
      // Use a ReplaySubject to share previous values with subscribers
      // and pump new values into the `paramMap` observable
      private subject = new ReplaySubject<ParamMap>();
      constructor(initialParams?: Params) {
        this.setParamMap(initialParams);
      }
      // The mock paramMap observable
      readonly paramMap = this.subject.asObservable();
      // Set the paramMap observables's next value
      setParamMap(params?: Params) {
        this.subject.next(convertToParamMap(params));
      };
    }
  

    import {
      getTestHeroes, TestHeroService, HeroService
    } from '../model/testing/test-hero.service';
    const firstHero = getTestHeroes()[0];
    function heroModuleSetup() {
      beforeEach(waitForAsync(() => {
        const routerSpy = createRouterSpy();
        TestBed.configureTestingModule({
          imports:   [ HeroModule ],
          // declarations: [ HeroDetailComponent ], // NO!  DOUBLE DECLARATION
          providers: [
            { provide: ActivatedRoute, useValue: activatedRoute },
            { provide: HeroService,    useClass: TestHeroService },
            { provide: Router,         useValue: routerSpy},
          ]
        }).compileComponents();
      }));
      describe('when navigate to existing hero', () => {
        let expectedHero: Hero;
        beforeEach(waitForAsync(() => {
          expectedHero = firstHero;
          activatedRoute.setParamMap({ id: expectedHero.id });
          createComponent();
        }));
        it('should display that hero name', () => {
          expect(page.nameDisplay.textContent).toBe(expectedHero.name);
        });
        it('should navigate when click cancel', () => {
          click(page.cancelBtn);
          expect(page.navigateSpy.calls.any())
            .toBe(true, 'router.navigate called');
        });
        it('should save when click save but not navigate immediately', () => {
          // Get service injected into component and spy on its`saveHero` method.
          // It delegates to fake `HeroService.updateHero` which delivers a safe test result.
          const hds = fixture.debugElement.injector.get(HeroDetailService);
          const saveSpy = spyOn(hds, 'saveHero').and.callThrough();
          click(page.saveBtn);
          expect(saveSpy.calls.any())
            .toBe(true, 'HeroDetailService.save called');
          expect(page.navigateSpy.calls.any())
            .toBe(false, 'router.navigate not called');
        });
        it('should navigate when click save and save resolves', fakeAsync(() => {
          click(page.saveBtn);
          tick(); // wait for async save to complete
          expect(page.navigateSpy.calls.any())
            .toBe(true, 'router.navigate called');
        }));
        it('should convert hero name to Title Case', () => {
          // get the name's input and display elements from the DOM
          const hostElement = fixture.nativeElement;
          const nameInput: HTMLInputElement = hostElement.querySelector('input');
          const nameDisplay: HTMLElement = hostElement.querySelector('span');
          // simulate user entering a new name into the input box
          nameInput.value = 'quick BROWN  fOx';
          // dispatch a DOM event so that Angular learns of input value change.
          nameInput.dispatchEvent(newEvent('input'));
          // Tell Angular to update the display binding through the title pipe
          fixture.detectChanges();
          expect(nameDisplay.textContent).toBe('Quick Brown  Fox');
        });
      });

      describe('when navigate with no hero id', () => {
        beforeEach(waitForAsync( createComponent ));
        it('should have hero.id === 0', () => {
          expect(component.hero.id).toBe(0);
        });
        it('should display empty hero name', () => {
          expect(page.nameDisplay.textContent).toBe('');
        });
      });

      describe('when navigate to non-existent hero id', () => {
        beforeEach(waitForAsync(() => {
          activatedRoute.setParamMap({ id: 99999 });
          createComponent();
        }));
        it('should try to navigate back to hero list', () => {
          expect(page.gotoListSpy.calls.any())
            .toBe(true, 'comp.gotoList called');
          expect(page.navigateSpy.calls.any())
            .toBe(true, 'router.navigate called');
        });
      });

      // Why we must use `fixture.debugElement.injector` in `Page()`
      it('cannot use `inject` to get component provided HeroDetailService', () => {
        let service: HeroDetailService;
        fixture = TestBed.createComponent(HeroDetailComponent);
        expect(
          // Throws because `inject` only has access to TestBed's injector
          // which is an ancestor of the component's injector
          inject([HeroDetailService], (hds: HeroDetailService) =>  service = hds )
        ).toThrowError(/No provider for HeroDetailService/);
        // get `HeroDetailService` with component's own injector
        service = fixture.debugElement.injector.get(HeroDetailService);
        expect(service).toBeDefined('debugElement.injector');
      });
    }
  

    function overrideSetup() {
      class HeroDetailServiceSpy {
        testHero: Hero = {id: 42, name: 'Test Hero' };
        // emit cloned test hero
        getHero = jasmine.createSpy('getHero').and.callFake(
          () => asyncData(Object.assign({}, this.testHero))
        );
        // emit clone of test hero, with changes merged in
        saveHero = jasmine.createSpy('saveHero').and.callFake(
          (hero: Hero) => asyncData(Object.assign(this.testHero, hero))
        );
      }
      // the "id" value is irrelevant because ignored by service stub
      beforeEach(() => activatedRoute.setParamMap({ id: 99999 }));
      beforeEach(waitForAsync(() => {
        const routerSpy = createRouterSpy();
        TestBed.configureTestingModule({
          imports:   [ HeroModule ],
          providers: [
            { provide: ActivatedRoute, useValue: activatedRoute },
            { provide: Router,         useValue: routerSpy},
            // HeroDetailService at this level is IRRELEVANT !
            { provide: HeroDetailService, useValue: {} }
          ]
        })
        // Override component own provider
        .overrideComponent(HeroDetailComponent, {
          set: {
            providers: [
              { provide: HeroDetailService, useClass: HeroDetailServiceSpy }
            ]
          }
        }).compileComponents();
      }));
      let hdsSpy: HeroDetailServiceSpy;
      beforeEach(waitForAsync(() => {
        createComponent();
        // get the component's injected HeroDetailServiceSpy
        hdsSpy = fixture.debugElement.injector.get(HeroDetailService) as any;
      }));
      it('should have called `getHero`', () => {
        expect(hdsSpy.getHero.calls.count())
          .toBe(1, 'getHero called once');
      });
      it('should display stub hero name', () => {
        expect(page.nameDisplay.textContent)
          .toBe(hdsSpy.testHero.name);
      });
      it('should save stub hero change', fakeAsync(() => {
        const origName = hdsSpy.testHero.name;
        const newName = 'New Name';
        page.nameInput.value = newName;
        page.nameInput.dispatchEvent(newEvent('input')); // tell Angular
        expect(component.hero.name)
          .toBe(newName, 'component hero has new name');
        expect(hdsSpy.testHero.name)
          .toBe(origName, 'service hero unchanged before save');
        click(page.saveBtn);
        expect(hdsSpy.saveHero.calls.count())
          .toBe(1, 'saveHero called once');
        tick(); // wait for async save to complete
        expect(hdsSpy.testHero.name)
          .toBe(newName, 'service hero has new name after save');
        expect(page.navigateSpy.calls.any())
          .toBe(true, 'router.navigate called');
      }));
      it('fixture injected service is not the component injected service',
        // inject gets the service from the fixture
        inject([HeroDetailService], (fixtureService: HeroDetailService) => {
        // use `fixture.debugElement.injector` to get service from component
        const componentService = fixture.debugElement.injector.get(HeroDetailService);
        expect(fixtureService)
          .not.toBe(componentService, 'service injected from fixture');
      }));
    }
  

    import { FormsModule }         from '@angular/forms';
    import { TitleCasePipe }       from '../shared/title-case.pipe';
    function formsModuleSetup() {
      beforeEach(waitForAsync(() => {
        const routerSpy = createRouterSpy();
        TestBed.configureTestingModule({
          imports:      [ FormsModule ],
          declarations: [ HeroDetailComponent, TitleCasePipe ],
          providers: [
            { provide: ActivatedRoute, useValue: activatedRoute },
            { provide: HeroService,    useClass: TestHeroService },
            { provide: Router,         useValue: routerSpy},
          ]
        }).compileComponents();
      }));
      it('should display 1st hero name', waitForAsync(() => {
        const expectedHero = firstHero;
        activatedRoute.setParamMap({ id: expectedHero.id });
        createComponent().then(() => {
          expect(page.nameDisplay.textContent).toBe(expectedHero.name);
        });
      }));
    }
  

    import { SharedModule }        from '../shared/shared.module';
    function sharedModuleSetup() {
      beforeEach(waitForAsync(() => {
        const routerSpy = createRouterSpy();
        TestBed.configureTestingModule({
          imports:      [ SharedModule ],
          declarations: [ HeroDetailComponent ],
          providers: [
            { provide: ActivatedRoute, useValue: activatedRoute },
            { provide: HeroService,    useClass: TestHeroService },
            { provide: Router,         useValue: routerSpy},
          ]
        })
        .compileComponents();
      }));
      it('should display 1st hero name', waitForAsync(() => {
        const expectedHero = firstHero;
        activatedRoute.setParamMap({ id: expectedHero.id });
        createComponent().then(() => {
          expect(page.nameDisplay.textContent).toBe(expectedHero.name);
        });
      }));
    }

    // --- shared.module.ts
    import { NgModule }      from '@angular/core';
    import { CommonModule }  from '@angular/common';
    import { FormsModule }   from '@angular/forms';
    import { HighlightDirective } from './highlight.directive';
    import { TitleCasePipe }      from './title-case.pipe';
    @NgModule({
      imports: [ CommonModule ],
      exports: [
        CommonModule,
        // SharedModule importers won't have to import FormsModule too
        FormsModule,
        HighlightDirective,
        TitleCasePipe
      ],
      declarations: [ HighlightDirective, TitleCasePipe ]
    })
    export class SharedModule { }
  

    import { asyncData, ActivatedRouteStub } from '../../testing';
    import { HeroDetailComponent } from './hero-detail.component';
    import { Hero }                from '../model/hero';

    describe('HeroDetailComponent - no TestBed', () => {
      let activatedRoute: ActivatedRouteStub;
      let comp: HeroDetailComponent;
      let expectedHero: Hero;
      let hds: any;
      let router: any;
      beforeEach((done: DoneFn) => {
        expectedHero = {id: 42, name: 'Bubba' };
        const activatedRoute = new ActivatedRouteStub({ id: expectedHero.id });
        router = jasmine.createSpyObj('router', ['navigate']);
        hds = jasmine.createSpyObj('HeroDetailService', ['getHero', 'saveHero']);
        hds.getHero.and.returnValue(asyncData(expectedHero));
        hds.saveHero.and.returnValue(asyncData(expectedHero));
        comp = new HeroDetailComponent(hds, <any> activatedRoute, router);
        comp.ngOnInit();
        // OnInit calls HDS.getHero; wait for it to get the fake hero
        hds.getHero.calls.first().returnValue.subscribe(done);
      });
      it('should expose the hero retrieved from the service', () => {
        expect(comp.hero).toBe(expectedHero);
      });
      it('should navigate when click cancel', () => {
        comp.cancel();
        expect(router.navigate.calls.any())
          .toBe(true, 'router.navigate called');
      });
      it('should save when click save', () => {
        comp.save();
        expect(hds.saveHero.calls.any())
          .toBe(true, 'HeroDetailService.save called');
        expect(router.navigate.calls.any())
          .toBe(false, 'router.navigate not called yet');
      });
      it('should navigate when click save resolves',
      (done: DoneFn) => {
        comp.save();
        // waits for async save to complete before navigating
        hds.saveHero.calls.first().returnValue
        .subscribe(() => {
          expect(router.navigate.calls.any())
            .toBe(true, 'router.navigate called');
          done();
        });
      });
    });
  

    import {
      waitForAsync, ComponentFixture, fakeAsync, TestBed, tick
    } from '@angular/core/testing';
    import { By }           from '@angular/platform-browser';
    import { DebugElement } from '@angular/core';
    import { Router }       from '@angular/router';
    import { addMatchers, newEvent } from '../../testing';
    import { getTestHeroes, TestHeroService } from '../model/testing/test-hero.service';
    import { HeroModule }         from './hero.module';
    import { HeroListComponent }  from './hero-list.component';
    import { HighlightDirective } from '../shared/highlight.directive';
    import { HeroService }        from '../model/hero.service';
    const HEROES = getTestHeroes();
    let comp: HeroListComponent;
    let fixture: ComponentFixture<HeroListComponent>;
    let page: Page;

    describe('HeroListComponent', () => {
      beforeEach(waitForAsync(() => {
        addMatchers();
        const routerSpy = jasmine.createSpyObj('Router', ['navigate']);
        TestBed.configureTestingModule({
          imports: [HeroModule],
          providers: [
            { provide: HeroService, useClass: TestHeroService },
            { provide: Router,      useValue: routerSpy}
          ]
        })
        .compileComponents()
        .then(createComponent);
      }));
      it('should display heroes', () => {
        expect(page.heroRows.length).toBeGreaterThan(0);
      });
      it('1st hero should match 1st test hero', () => {
        const expectedHero = HEROES[0];
        const actualHero = page.heroRows[0].textContent;
        expect(actualHero).toContain(expectedHero.id.toString(), 'hero.id');
        expect(actualHero).toContain(expectedHero.name, 'hero.name');
      });
      it('should select hero on click', fakeAsync(() => {
        const expectedHero = HEROES[1];
        const li = page.heroRows[1];
        li.dispatchEvent(newEvent('click'));
        tick();
        // `.toEqual` because selectedHero is clone of expectedHero; see FakeHeroService
        expect(comp.selectedHero).toEqual(expectedHero);
      }));
      it('should navigate to selected hero detail on click', fakeAsync(() => {
        const expectedHero = HEROES[1];
        const li = page.heroRows[1];
        li.dispatchEvent(newEvent('click'));
        tick();
        // should have navigated
        expect(page.navSpy.calls.any()).toBe(true, 'navigate called');
        // composed hero detail will be URL like 'heroes/42'
        // expect link array with the route path and hero id
        // first argument to router.navigate is link array
        const navArgs = page.navSpy.calls.first().args[0];
        expect(navArgs[0]).toContain('heroes', 'nav to heroes detail URL');
        expect(navArgs[1]).toBe(expectedHero.id, 'expected hero.id');
      }));
      it('should find `HighlightDirective` with `By.directive', () => {
        // Can find DebugElement either by css selector or by directive
        const h2        = fixture.debugElement.query(By.css('h2'));
        const directive = fixture.debugElement.query(By.directive(HighlightDirective));
        expect(h2).toBe(directive);
      });
      it('should color header with `HighlightDirective`', () => {
        const h2 = page.highlightDe.nativeElement as HTMLElement;
        const bgColor = h2.style.backgroundColor;
        // different browsers report color values differently
        const isExpectedColor = bgColor === 'gold' || bgColor === 'rgb(255, 215, 0)';
        expect(isExpectedColor).toBe(true, 'backgroundColor');
      });
      it('the `HighlightDirective` is among the element providers', () => {
        expect(page.highlightDe.providerTokens).toContain(HighlightDirective, 'HighlightDirective');
      });
    });

    // --- helpers
    // Create the component and set the `page` test variables
    function createComponent() {
      fixture = TestBed.createComponent(HeroListComponent);
      comp = fixture.componentInstance;
      // change detection triggers ngOnInit which gets a hero
      fixture.detectChanges();
      return fixture.whenStable().then(() => {
        // got the heroes and updated component
        // change detection updates the view
        fixture.detectChanges();
        page = new Page();
      });
    }
    class Page {
      heroRows: HTMLLIElement[];
      highlightDe: DebugElement;
      navSpy: jasmine.Spy;
      constructor() {
        const heroRowNodes = fixture.nativeElement.querySelectorAll('li');
        this.heroRows = Array.from(heroRowNodes);
        // Find the first element with an attached HighlightDirective
        this.highlightDe = fixture.debugElement.query(By.directive(HighlightDirective));
        // Get the component injected router navigation spy
        const routerSpy = fixture.debugElement.injector.get(Router);
        this.navSpy = routerSpy.navigate as jasmine.Spy;
      };
    }
  

    // --- --- COMPONENT
    import { Component } from '@angular/core';
    @Component({
      selector: 'app-root',
      template: `
        <app-banner></app-banner>
        <app-welcome></app-welcome>
        <nav>
          <a routerLink="/dashboard">Dashboard</a>
          <a routerLink="/heroes">Heroes</a>
          <a routerLink="/about">About</a>
        </nav>
        <router-outlet></router-outlet>`
    })
    export class AppComponent { }
    // --- --- TEST
  

    import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing';
    import { Component, DebugElement, NO_ERRORS_SCHEMA } from '@angular/core';
    import { By } from '@angular/platform-browser';
    import { AppComponent } from './app.component';
    import { RouterLinkDirectiveStub } from '../testing';
    // stubs
    @Component({selector: 'app-banner', template: ''})
    class BannerStubComponent {}
    @Component({selector: 'router-outlet', template: ''})
    class RouterOutletStubComponent { }
    @Component({selector: 'app-welcome', template: ''})
    class WelcomeStubComponent {}
    let comp:    AppComponent;
    let fixture: ComponentFixture<AppComponent>;
    // with STUBS
    describe('AppComponent & TestModule', () => {
      beforeEach(waitForAsync(() => {
        TestBed.configureTestingModule({
          declarations: [
            AppComponent,
            RouterLinkDirectiveStub,
            BannerStubComponent,
            RouterOutletStubComponent,
            WelcomeStubComponent
          ]
        })
        .compileComponents().then(() => {
          fixture = TestBed.createComponent(AppComponent);
          comp    = fixture.componentInstance;
        });
      }));
      tests();
    });
    // with NO_ERRORS_SCHEMA
    describe('AppComponent & NO_ERRORS_SCHEMA', () => {
      beforeEach(waitForAsync(() => {
        TestBed.configureTestingModule({
          declarations: [
            AppComponent,
            BannerStubComponent,
            RouterLinkDirectiveStub
          ],
          // tell Angular compiler to ignore unrecognized elements and attributes
          // prevents the compiler from telling you about
          // the missing components and attributes that you omitted inadvertently or misspelled
          schemas: [ NO_ERRORS_SCHEMA ]
        })
        .compileComponents().then(() => {
          fixture = TestBed.createComponent(AppComponent);
          comp    = fixture.componentInstance;
        });
      }));
      tests();
    });
    // with real root module
    // Tricky because we are disabling the router and its configuration
    // Better to use RouterTestingModule
    describe('AppComponent & AppModule', () => {
      beforeEach(waitForAsync(() => {
        TestBed.configureTestingModule({
          imports: [ AppModule ]
        })
        // Get rid of app Router configuration otherwise many failures.
        // Doing so removes Router declarations; add the Router stubs
        .overrideModule(AppModule, {
          remove: { imports: [ AppRoutingModule ] },
          add: {
            declarations: [ RouterLinkDirectiveStub, RouterOutletStubComponent ]
          }
        }).compileComponents()
        .then(() => {
          fixture = TestBed.createComponent(AppComponent);
          comp    = fixture.componentInstance;
        });
      }));
      tests();
    });
    function tests() {
      let routerLinks: RouterLinkDirectiveStub[];
      let linkDes: DebugElement[];
      beforeEach(() => {
        fixture.detectChanges(); // trigger initial data binding
        // find DebugElements with an attached RouterLinkStubDirective
        linkDes = fixture.debugElement
          .queryAll(By.directive(RouterLinkDirectiveStub));
        // get attached link directive instances
        // using each DebugElement injector
        routerLinks = linkDes.map(de => de.injector.get(RouterLinkDirectiveStub));
      });
      it('can instantiate the component', () => {
        expect(comp).not.toBeNull();
      });
      it('can get RouterLinks from template', () => {
        expect(routerLinks.length).toBe(3, 'should have 3 routerLinks');
        expect(routerLinks[0].linkParams).toBe('/dashboard');
        expect(routerLinks[1].linkParams).toBe('/heroes');
        expect(routerLinks[2].linkParams).toBe('/about');
      });
      it('can click Heroes link in template', () => {
        const heroesLinkDe = linkDes[1];   // heroes link DebugElement
        const heroesLink = routerLinks[1]; // heroes link directive
        expect(heroesLink.navigatedTo).toBeNull('should not have navigated yet');
        heroesLinkDe.triggerEventHandler('click', null);
        fixture.detectChanges();
        expect(heroesLink.navigatedTo).toBe('/heroes');
      });
    }
    // --- helpers
    import { Directive, Input, HostListener } from '@angular/core';
    // export for convenience
    export { RouterLink } from '@angular/router';
    // tslint:disable:directive-class-suffix
    // emulate RouterLink
    @Directive({ selector: '[routerLink]' })
    export class RouterLinkDirectiveStub {
      @Input('routerLink') linkParams: any;
      navigatedTo: any = null;
      @HostListener('click')
      onClick() { this.navigatedTo = this.linkParams; }
    }
    /// Dummy module to satisfy Angular Language service. Never used.
    import { NgModule } from '@angular/core';
    @NgModule({ declarations: [ RouterLinkDirectiveStub ] })
    export class RouterStubsModule {}
  

    import { HeroService, TestHeroService } from './model/testing/test-hero.service';
    let comp:     AppComponent;
    let fixture:  ComponentFixture<AppComponent>;
    let page:     Page;
    let router:   Router;
    let location: SpyLocation;
    describe('AppComponent & RouterTestingModule', () => {
      beforeEach(waitForAsync(() => {
        TestBed.configureTestingModule({
          imports: [ AppModule, RouterTestingModule ],
          providers: [
            { provide: HeroService, useClass: TestHeroService }
          ]
        })
        .compileComponents();
      }));
      it('should navigate to "Dashboard" immediately', fakeAsync(() => {
        createComponent();
        tick(); // wait for async data to arrive
        expect(location.path()).toEqual('/dashboard', 'after initialNavigation()');
        expectElementOf(DashboardComponent);
      }));
      it('should navigate to "About" on click', fakeAsync(() => {
        createComponent();
        click(page.aboutLinkDe);
        // page.aboutLinkDe.nativeElement.click(); // ok but fails in phantom
        advance();
        expectPathToBe('/about');
        expectElementOf(AboutComponent);
      }));
      it('should navigate to "About" w/ browser location URL change', fakeAsync(() => {
        createComponent();
        location.simulateHashChange('/about');
        // location.go('/about'); // also works ... except, perhaps, in Stackblitz
        advance();
        expectPathToBe('/about');
        expectElementOf(AboutComponent);
      }));
      // Can't navigate to lazy loaded modules with this technique
      xit('should navigate to "Heroes" on click (not working yet)', fakeAsync(() => {
        createComponent();
        page.heroesLinkDe.nativeElement.click();
        advance();
        expectPathToBe('/heroes');
      }));
    });

    // should be lazy loaded
    import { HeroModule }             from './hero/hero.module';
    import { HeroListComponent }      from './hero/hero-list.component';
    // cant get lazy loaded Heroes to work yet
    xdescribe('AppComponent & Lazy Loading (not working yet)', () => {
      beforeEach(waitForAsync(() => {
        TestBed.configureTestingModule({
          imports: [ AppModule, RouterTestingModule ]
        })
        .compileComponents();
      }));
      beforeEach(fakeAsync(() => {
        createComponent();
        router.resetConfig([{path: 'heroes', loadChildren: () => HeroModule}]);
      }));
      it('should navigate to "Heroes" on click', waitForAsync(() => {
        page.heroesLinkDe.nativeElement.click();
        advance();
        expectPathToBe('/heroes');
        expectElementOf(HeroListComponent);
      }));
      it('can navigate to "Heroes" w/ browser location URL change', fakeAsync(() => {
        location.go('/heroes');
        advance();
        expectPathToBe('/heroes');
        expectElementOf(HeroListComponent);
      }));
    });

    // --- helpers
    // advance to the routed page
    // wait a tick, then detect changes, and tick again
    function advance(): void {
      tick(); // wait while navigating
      fixture.detectChanges(); // update view
      tick(); // wait for async data to arrive
    }
    function createComponent() {
      fixture = TestBed.createComponent(AppComponent);
      comp = fixture.componentInstance;
      const injector = fixture.debugElement.injector;
      location = injector.get(Location) as SpyLocation;
      router = injector.get(Router);
      router.initialNavigation();
      spyOn(injector.get(TwainService), 'getQuote')
        // fake fast async observable
        .and.returnValue(asyncData('Test Quote'));
      advance();
      page = new Page();
    }
    class Page {
      aboutLinkDe:     DebugElement;
      dashboardLinkDe: DebugElement;
      heroesLinkDe:    DebugElement;
      // for debugging
      comp: AppComponent;
      location: SpyLocation;
      router: Router;
      fixture: ComponentFixture<AppComponent>;
      constructor() {
        const links = fixture.debugElement.queryAll(By.directive(RouterLink));
        this.aboutLinkDe     = links[2];
        this.dashboardLinkDe = links[0];
        this.heroesLinkDe    = links[1];
        // for debugging
        this.comp    = comp;
        this.fixture = fixture;
        this.router  = router;
      }
    }
    function expectPathToBe(path: string, expectationFailOutput?: any) {
      expect(location.path()).toEqual(path, expectationFailOutput || 'location.path()');
    }
    function expectElementOf(type: Type<any>): any {
      const el = fixture.debugElement.query(By.directive(type));
      expect(el).toBeTruthy('expected an element for ' + type.name);
      return el;
    }
    import { defer } from 'rxjs';
    // async observable that emits-once and completes after a JS engine turn
    export function asyncData<T>(data: T) {
      return defer(() => Promise.resolve(data));
    }
    // async observable error that errors after a JS engine turn
    export function asyncError<T>(errorObject: any) {
      return defer(() => Promise.reject(errorObject));
    }
    // button events to pass to `DebugElement.triggerEventHandler`
    // for RouterLink event handler
    export const ButtonClickEvents = {
      left:  { button: 0 },
      right: { button: 2 }
    };
    // simulate element click, defaults to mouse left-button click event
    export function click(
      el: DebugElement | HTMLElement,
      eventObj: any = ButtonClickEvents.left
    ): void {
      if (el instanceof HTMLElement) {
        el.click();
      } else {
        el.triggerEventHandler('click', eventObj);
      }
    }
  

    describe('testing', () => {
      let service: ValueService;

      // --- inject service inside test
      it('should use ValueService', () => {
        service = TestBed.inject(ValueService);
        expect(service.getValue()).toBe('real value');
      });

      // --- OR inject the service as part of your setup
      // set the preconditions for each it() test
      // and rely on the TestBed to create classes and inject services
      beforeEach(() => {
        TestBed.configureTestingModule({ providers: [ValueService] });
        service = TestBed.inject(ValueService);
      });

      // --- OR, while testing a service with a dependency
      // provide the mock in the providers array, here mock is a spy object
      let masterService: MasterService;
      let valueServiceSpy: jasmine.SpyObj<ValueService>;
      beforeEach(() => {
        const spy = jasmine.createSpyObj('ValueService', ['getValue']);
        TestBed.configureTestingModule({
          providers: [
            MasterService, // service to test
            { provide: ValueService, useValue: spy } // its (spy) dependency
          ]
        });
        masterService = TestBed.inject(MasterService); // injext service and
        valueServiceSpy = TestBed.inject(ValueService); // its (spy) dependency
      });
      // test consumes that spy in the same way it did earlier
      it('#getValue should return stubbed value from a spy', () => {
        const stubValue = 'stub value';
        valueServiceSpy.getValue.and.returnValue(stubValue);
        expect(masterService.getValue())
          .toBe(stubValue, 'service returned stub value');
        expect(valueServiceSpy.getValue.calls.count())
          .toBe(1, 'spy method was called once');
        expect(valueServiceSpy.getValue.calls.mostRecent().returnValue)
          .toBe(stubValue);
      });

      // --- create classes explicitly, MasterService (no beforeEach)
      it('#getValue should return stubbed value from a spy', () => {
        const { masterService, stubValue, valueServiceSpy } = setup();
        expect(masterService.getValue())
          .toBe(stubValue, 'service returned stub value');
        expect(valueServiceSpy.getValue.calls.count())
          .toBe(1, 'spy method was called once');
        expect(valueServiceSpy.getValue.calls.mostRecent().returnValue)
          .toBe(stubValue);
      });
      function setup() {
        const valueServiceSpy =
          jasmine.createSpyObj('ValueService', ['getValue']);
        const stubValue = 'stub value';
        const masterService = new MasterService(valueServiceSpy);
        valueServiceSpy.getValue.and.returnValue(stubValue);
        return { masterService, stubValue, valueServiceSpy };
      }

      // --- http services
      let httpClientSpy: { get: jasmine.Spy };
      let heroService: HeroService;
      beforeEach(() => {
        // TODO: spy on other methods too
        httpClientSpy = jasmine.createSpyObj('HttpClient', ['get']);
        heroService = new HeroService(<any> httpClientSpy);
      });
      it('should return expected heroes (HttpClient called once)', () => {
        const expectedHeroes: Hero[] =
          [{ id: 1, name: 'A' }, { id: 2, name: 'B' }];
        httpClientSpy.get.and.returnValue(asyncData(expectedHeroes));
        heroService.getHeroes().subscribe(
          heroes => expect(heroes).toEqual(expectedHeroes, 'expected heroes'),
          fail
        );
        expect(httpClientSpy.get.calls.count()).toBe(1, 'one call');
      });
      it('should return an error when the server returns a 404', () => {
        const errorResponse = new HttpErrorResponse({
          error: 'test 404 error',
          status: 404, statusText: 'Not Found'
        });
        httpClientSpy.get.and.returnValue(asyncError(errorResponse));
        heroService.getHeroes().subscribe(
          heroes => fail('expected an error, not heroes'),
          error  => expect(error.message).toContain('test 404 error')
        );
      });
    });
  

    // --- --- DIRECTIVE
    import { Directive, ElementRef, Input, OnChanges } from '@angular/core';
    @Directive({ selector: '[highlight]' })
    // set backgroundColor for the attached element to highlight color
    // and set the element customProperty to true
    export class HighlightDirective implements OnChanges {
      defaultColor =  'rgb(211, 211, 211)'; // lightgray
      @Input('highlight') bgColor: string;
      constructor(private el: ElementRef) {
        el.nativeElement.style.customProperty = true;
      }
      ngOnChanges() {
        this.el.nativeElement.style.backgroundColor = this.bgColor || this.defaultColor;
      }
    }

    // --- --- TEST
    import { Component, DebugElement }   from '@angular/core';
    import { ComponentFixture, TestBed } from '@angular/core/testing';
    import { By } from '@angular/platform-browser';
    import { HighlightDirective } from './highlight.directive';
    import { newEvent }           from '../../testing';
    // artificial test component that demonstrates all ways to apply the directive
    @Component({
      template: `
      <h2 highlight="yellow">Something Yellow</h2>
      <h2 highlight>The Default (Gray)</h2>
      <h2>No Highlight</h2>
      <input #box [highlight]="box.value" value="cyan"/>`
    })
    class TestComponent { }
    describe('HighlightDirective', () => {
      let fixture: ComponentFixture<TestComponent>;
      let des: DebugElement[];  // the three elements w/ the directive
      let bareH2: DebugElement; // the <h2> w/o the directive
      beforeEach(() => {
        fixture = TestBed.configureTestingModule({
          declarations: [ HighlightDirective, TestComponent ]
        })
        .createComponent(TestComponent);
        fixture.detectChanges(); // initial binding
        // all elements with an attached HighlightDirective
        des = fixture.debugElement.queryAll(By.directive(HighlightDirective));
        // the h2 without the HighlightDirective
        bareH2 = fixture.debugElement.query(By.css('h2:not([highlight])'));
      });
      // color tests
      it('should have three highlighted elements', () => {
        expect(des.length).toBe(3);
      });
      it('should color 1st <h2> background "yellow"', () => {
        const bgColor = des[0].nativeElement.style.backgroundColor;
        expect(bgColor).toBe('yellow');
      });
      it('should color 2nd <h2> background w/ default color', () => {
        const dir = des[1].injector.get(HighlightDirective) as HighlightDirective;
        const bgColor = des[1].nativeElement.style.backgroundColor;
        expect(bgColor).toBe(dir.defaultColor);
      });
      it('should bind <input> background to value color', () => {
        // easier to work with nativeElement
        const input = des[2].nativeElement as HTMLInputElement;
        expect(input.style.backgroundColor).toBe('cyan', 'initial backgroundColor');
        // dispatch a DOM event so that Angular responds to the input value change.
        input.value = 'green';
        input.dispatchEvent(newEvent('input'));
        fixture.detectChanges();
        expect(input.style.backgroundColor).toBe('green', 'changed backgroundColor');
      });
      it('bare <h2> should not have a customProperty', () => {
        expect(bareH2.properties['customProperty']).toBeUndefined();
      });
      // injected directive
      // attached HighlightDirective can be injected
      it('can inject `HighlightDirective` in 1st <h2>', () => {
        const dir = des[0].injector.get(HighlightDirective);
        expect(dir).toBeTruthy();
      });
      it('cannot inject `HighlightDirective` in 3rd <h2>', () => {
        const dir = bareH2.injector.get(HighlightDirective, null);
        expect(dir).toBe(null);
      });
      // DebugElement.providerTokens
      // attached HighlightDirective should be listed in the providerTokens
      it('should have `HighlightDirective` in 1st <h2> providerTokens', () => {
        expect(des[0].providerTokens).toContain(HighlightDirective);
      });
      it('should not have `HighlightDirective` in 3rd <h2> providerTokens', () => {
        expect(bareH2.providerTokens).not.toContain(HighlightDirective);
      });
    });

    // --- --- TEST COMPONENT
    import { Component } from '@angular/core';
    @Component({
      template: `
      <h2 highlight="skyblue">About</h2>
      <h3>Quote of the day:</h3>
      <twain-quote></twain-quote>`
    })
    export class AboutComponent { }

    // --- --- TEST
    import { NO_ERRORS_SCHEMA }          from '@angular/core';
    import { ComponentFixture, TestBed } from '@angular/core/testing';
    import { AboutComponent }     from './about.component';
    import { HighlightDirective } from '../shared/highlight.directive';
    let fixture: ComponentFixture<AboutComponent>;
    describe('AboutComponent (highlightDirective)', () => {
      beforeEach(() => {
        fixture = TestBed.configureTestingModule({
          declarations: [ AboutComponent, HighlightDirective],
          schemas:      [ NO_ERRORS_SCHEMA ]
        })
        .createComponent(AboutComponent);
        fixture.detectChanges(); // initial binding
      });
      it('should have skyblue <h2>', () => {
        const h2: HTMLElement = fixture.nativeElement.querySelector('h2');
        const bgColor = h2.style.backgroundColor;
        expect(bgColor).toBe('skyblue');
      });
    });
  

    // --- --- PIPE
    import { Pipe, PipeTransform } from '@angular/core';
    @Pipe({name: 'titlecase', pure: true})
    // uppercase the first letter of the words in a string
    export class TitleCasePipe implements PipeTransform {
      transform(input: string): string {
        return input.length === 0 ? '' :
          input.replace(/\w\S*/g, (txt => txt[0].toUpperCase() + txt.substr(1).toLowerCase() ));
      }
    }

    // --- --- TEST
    import { TitleCasePipe } from './title-case.pipe';
    describe('TitleCasePipe', () => {
      // This pipe is a pure, stateless function so no need for BeforeEach
      let pipe = new TitleCasePipe();
      it('transforms "abc" to "Abc"', () => {
        expect(pipe.transform('abc')).toBe('Abc');
      });
      it('transforms "abc def" to "Abc Def"', () => {
        expect(pipe.transform('abc def')).toBe('Abc Def');
      });
      // ... more tests ...
      it('leaves "Abc Def" unchanged', () => {
        expect(pipe.transform('Abc Def')).toBe('Abc Def');
      });
      it('transforms "abc-def" to "Abc-def"', () => {
        expect(pipe.transform('abc-def')).toBe('Abc-def');
      });
      it('transforms "   abc   def" to "   Abc   Def" (preserves spaces) ', () => {
        expect(pipe.transform('   abc   def')).toBe('   Abc   Def');
      });
    });

    // --- --- COMPONENT TEST
    it('should convert hero name to Title Case', () => {
      // get the name's input and display elements from the DOM
      const hostElement = fixture.nativeElement;
      const nameInput: HTMLInputElement = hostElement.querySelector('input');
      const nameDisplay: HTMLElement = hostElement.querySelector('span');
      // simulate user entering a new name into the input box
      nameInput.value = 'quick BROWN  fOx';
      // dispatch a DOM event so that Angular learns of input value change.
      nameInput.dispatchEvent(newEvent('input'));
      // Tell Angular to update the display binding through the title pipe
      fixture.detectChanges();
      expect(nameDisplay.textContent).toBe('Quick Brown  Fox');
    });
  

    // --- Http testing module and mocking controller
    import {
      HttpClientTestingModule, HttpTestingController
    } from '@angular/common/http/testing';
    // Other imports
    import { TestBed } from '@angular/core/testing';
    import { HttpClient, HttpErrorResponse } from '@angular/common/http';
    import { HttpHeaders } from '@angular/common/http';
    interface Data {
      name: string;
    }
    const testUrl = '/data';
    describe('HttpClient testing', () => {
      let httpClient: HttpClient;
      let httpTestingController: HttpTestingController;
      beforeEach(() => {
        TestBed.configureTestingModule({ imports: [ HttpClientTestingModule ] });
        // Inject the http service and test controller for each test
        httpClient = TestBed.inject(HttpClient);
        httpTestingController = TestBed.inject(HttpTestingController);
      });
      afterEach(() => {
        // After every test, assert that there are no more pending requests
        httpTestingController.verify();
      });
      /// Tests begin ///
      it('can test HttpClient.get', () => {
        const testData: Data = {name: 'Test Data'};
        // Make an HTTP GET request
        httpClient.get<Data>(testUrl)
          .subscribe(data =>
            // When observable resolves, result should match test data
            expect(data).toEqual(testData)
          );
        // The following `expectOne()` will match the request's URL.
        // If no requests or multiple requests matched that URL
        // `expectOne()` would throw.
        const req = httpTestingController.expectOne('/data');
        // Assert that the request is a GET.
        expect(req.request.method).toEqual('GET');
        // Respond with mock data, causing Observable to resolve.
        // Subscribe callback asserts that correct data was returned.
        req.flush(testData);
        // Finally, assert that there are no outstanding requests.
        httpTestingController.verify();
      });
      it('can test HttpClient.get with matching header', () => {
        const testData: Data = {name: 'Test Data'};
        // Make an HTTP GET request with specific header
        httpClient.get<Data>(testUrl, {
            headers: new HttpHeaders({'Authorization': 'my-auth-token'})
          })
          .subscribe(data =>
            expect(data).toEqual(testData)
          );
          // Find request with a predicate function.
        // Expect one request with an authorization header
        const req = httpTestingController.expectOne(
          req => req.headers.has('Authorization')
        );
        req.flush(testData);
      });
      it('can test multiple requests', () => {
        let testData: Data[] = [
          { name: 'bob' }, { name: 'carol' },
          { name: 'ted' }, { name: 'alice' }
        ];
        // Make three requests in a row
        httpClient.get<Data[]>(testUrl)
          .subscribe(d => expect(d.length).toEqual(0, 'should have no data'));
        httpClient.get<Data[]>(testUrl)
          .subscribe(d => expect(d).toEqual([testData[0]], 'should be one element array'));
        httpClient.get<Data[]>(testUrl)
          .subscribe(d => expect(d).toEqual(testData, 'should be expected data'));
        // get all pending requests that match the given URL
        const requests = httpTestingController.match(testUrl);
        expect(requests.length).toEqual(3);
        // Respond to each request with different results
        requests[0].flush([]);
        requests[1].flush([testData[0]]);
        requests[2].flush(testData);
      });
      it('can test for 404 error', () => {
        const emsg = 'deliberate 404 error';
        httpClient.get<Data[]>(testUrl).subscribe(
          data => fail('should have failed with the 404 error'),
          (error: HttpErrorResponse) => {
            expect(error.status).toEqual(404, 'status');
            expect(error.error).toEqual(emsg, 'message');
          }
        );
        const req = httpTestingController.expectOne(testUrl);
        // Respond with mock error
        req.flush(emsg, { status: 404, statusText: 'Not Found' });
      });
      it('can test for network error', () => {
        const emsg = 'simulated network error';
        httpClient.get<Data[]>(testUrl).subscribe(
          data => fail('should have failed with the network error'),
          (error: HttpErrorResponse) => {
            expect(error.error.message).toEqual(emsg, 'message');
          }
        );
        const req = httpTestingController.expectOne(testUrl);
        // Create mock ErrorEvent, raised when something goes wrong at the network level.
        // Connection timeout, DNS error, offline, etc
        const mockError = new ErrorEvent('Network error', {
          message: emsg,
          // The rest of this is optional and not used.
          // Just showing that you could provide this too.
          filename: 'HeroService.ts',
          lineno: 42,
          colno: 21
        });
        // Respond with mock error
        req.error(mockError);
      });
      it('httpTestingController.verify should fail if HTTP response not simulated', () => {
        // Sends request
        httpClient.get('some/api').subscribe();
        // verify() should fail because haven't handled the pending request.
        expect(() => httpTestingController.verify()).toThrow();
        // Now get and flush the request so that afterEach() doesn't fail
        const req = httpTestingController.expectOne('some/api');
        req.flush(null);
      });
      // Proves that verify in afterEach() really would catch error
      // if test doesnt simulate the HTTP response
      //
      // Must disable this test because can't catch an error in an afterEach()
      // Uncomment if you want to confirm that afterEach() does the job
      // it('afterEach() should fail when HTTP response not simulated',() => {
      //   // Sends request which is never handled by this test
      //   httpClient.get('some/api').subscribe();
      // });
    });
  

    describe('ValueService', () => {
      let service: ValueService;
      beforeEach(() => { service = new ValueService(); });
      it('#getValue should return real value', () => {
        expect(service.getValue()).toBe('real value');
      });
      it('#getObservableValue should return value from observable',
        (done: DoneFn) => {
        service.getObservableValue().subscribe(value => {
          expect(value).toBe('observable value');
          done();
        });
      });
      it('#getPromiseValue should return value from a promise',
        (done: DoneFn) => {
        service.getPromiseValue().then(value => {
          expect(value).toBe('promise value');
          done();
        });
      });
    });

    // --- testing a dependent service
    describe('MasterService without Angular testing support', () => {
      let masterService: MasterService;
      it('#getValue should return real value from the real service', () => {
        masterService = new MasterService(new ValueService());
        expect(masterService.getValue()).toBe('real value');
      });
      it('#getValue should return faked value from a fakeService', () => {
        masterService = new MasterService(new FakeValueService());
        expect(masterService.getValue()).toBe('faked service value');
      });
      it('#getValue should return faked value from a fake object', () => {
        const fake =  { getValue: () => 'fake value' };
        masterService = new MasterService(fake as ValueService);
        expect(masterService.getValue()).toBe('fake value');
      });
      it('#getValue should return stubbed value from a spy', () => {
        // create `getValue` spy on an object representing the ValueService
        const valueServiceSpy =
          jasmine.createSpyObj('ValueService', ['getValue']);
        // set the value to return when the `getValue` spy is called.
        const stubValue = 'stub value';
        valueServiceSpy.getValue.and.returnValue(stubValue);
        masterService = new MasterService(valueServiceSpy);
        expect(masterService.getValue())
          .toBe(stubValue, 'service returned stub value');
        expect(valueServiceSpy.getValue.calls.count())
          .toBe(1, 'spy method was called once');
        expect(valueServiceSpy.getValue.calls.mostRecent().returnValue)
          .toBe(stubValue);
      });
    });
  

    // karma.conf.js
    browsers: ['Chrome'],
    customLaunchers: {
      ChromeHeadlessCI: {
        base: 'ChromeHeadless',
        flags: ['--no-sandbox']
      }
    },

    // protractor-ci.conf.js inside e2e tests project
    // extends the original protractor.conf.js
    const config = require('./protractor.conf').config;
    config.capabilities = {
      browserName: 'chrome',
      chromeOptions: {
        args: ['--headless', '--no-sandbox']
      }
    };
    exports.config = config;

    // run the following commands to use the --no-sandbox flag
    ng test -- --no-watch --no-progress --browsers=ChromeHeadlessCI
    ng e2e -- --protractor-config=e2e/protractor-ci.conf.js
  

    # 1 - create a folder called .circleci at the project root
    # 2 - create a file called config.yml
    version: 2
    jobs:
      build:
        working_directory: ~/my-project
        docker:
          - image: circleci/node:8-browsers
        steps:
          - checkout
          - restore_cache:
              key: my-project-{{ .Branch }}-{{ checksum "package-lock.json" }}
          - run: npm install
          - save_cache:
              key: my-project-{{ .Branch }}-{{ checksum "package-lock.json" }}
              paths:
                - "node_modules"
          - run: npm run test -- --no-watch --no-progress --browsers=ChromeHeadlessCI
          - run: npm run e2e -- --protractor-config=e2e/protractor-ci.conf.js
    # 3 - commit your changes and push them to your repository
    # 4 - sign up for Circle CI and add your project
  

    # 1 - create a file called .travis.yml at the project root
    dist: trusty
    sudo: false

    language: node_js
    node_js:
      - "8"

    addons:
      apt:
        sources:
          - google-chrome
        packages:
          - google-chrome-stable

    cache:
      directories:
         - ./node_modules

    install:
      - npm install

    script:
      - npm run test -- --no-watch --no-progress --browsers=ChromeHeadlessCI
      - npm run e2e -- --protractor-config=e2e/protractor-ci.conf.js
    # 2 - commit your changes and push them to your repository
    # 3 -  sign up for Travis CI and add your project, push a commit to trigger build
  

    // Observable - representation of any set of values over any amount of time
    class Observable<T> implements Subscribable {
      static create: (...args: any[]) => any
      constructor(subscribe?: (this: Observable<T>, subscriber: Subscriber<T>) => TeardownLogic)
      source: Observable<any> | undefined
      operator: Operator<any, T> | undefined
      lift<R>(operator?: Operator<T, R>): Observable<R>
      subscribe(observerOrNext?: Partial<Observer<T>> | ((value: T) => void), error?: (error: any) => void, complete?: () => void): Subscription
      forEach(next: (value: T) => void, promiseCtor?: PromiseConstructorLike): Promise<void>
      pipe(...operations: OperatorFunction<any, any>[]): Observable<any>
      toPromise(promiseCtor?: PromiseConstructorLike): Promise<T | undefined>
    }

    // subscribe with an Observer
    const sumObserver = {
      sum: 0,
      next(value) {
        console.log('Adding: ' + value);
        this.sum = this.sum + value;
      },
      error() { // We could just remove this method,
      },        // since we do not really care about errors right now
      complete() { console.log('Sum equals: ' + this.sum); }
    };
    Rx.Observable.of(1, 2, 3) // Synchronously emits 1, 2, 3 and then completes
    .subscribe(sumObserver);
    // Logs: "Adding: 1" "Adding: 2" "Adding: 3" "Sum equals: 6"

    // subscribe with functions
    let sum = 0;
    Rx.Observable.of(1, 2, 3)
    .subscribe(
      function(value) {
        console.log('Adding: ' + value);
        sum = sum + value;
      },
      undefined,
      function() { console.log('Sum equals: ' + sum); }
    );
    // Logs: "Adding: 1" "Adding: 2" "Adding: 3" "Sum equals: 6"

    // cancel a subscription
    const subscription = Rx.Observable.interval(1000).subscribe(
      num => console.log(num),
      undefined,
      () => console.log('completed!') // Will not be called, even
    );                                // when cancelling subscription
    setTimeout(() => {
      subscription.unsubscribe();
      console.log('unsubscribed!');
    }, 2500);
    // Logs: 0 after 1s , 1 after 2s ,  "unsubscribed!" after 2.5s
  

    // --- Subject
    // special type of Observable, allows values to be multicasted to many Observers
    // is like EventEmitters
    // every Subject is an Observable and an Observer
    class Subject<T> extends Observable implements SubscriptionLike {
      static create: (...args: any[]) => any
      constructor()
      closed: false
      observers: Observer<T>[]
      isStopped: false
      hasError: false
      thrownError: any
      get observed
      lift<R>(operator: Operator<T, R>): Observable<R>
      next(value: T)
      error(err: any)
      complete()
      unsubscribe()
      asObservable(): Observable<T>

      // inherited from index/Observable
      static create: (...args: any[]) => any
      constructor(subscribe?: (this: Observable<T>, subscriber: Subscriber<T>) => TeardownLogic)
      source: Observable<any> | undefined
      operator: Operator<any, T> | undefined
      lift<R>(operator?: Operator<T, R>): Observable<R>
      subscribe(observerOrNext?: Partial<Observer<T>> | ((value: T) => void), error?: (error: any) => void, complete?: () => void): Subscription
      forEach(next: (value: T) => void, promiseCtor?: PromiseConstructorLike): Promise<void>
      pipe(...operations: OperatorFunction<any, any>[]): Observable<any>
      toPromise(promiseCtor?: PromiseConstructorLike): Promise<T | undefined>
    }

    // --- BehaviorSubject - get last message
    // similar to a Subject except it requires an initial value as an argument
    // to mark the starting point of the data stream,
    // when we subscribe, returns the last message

    // --- ReplaySubject - time travel
    // once subscribed, broadcasts all messages, despite if we subscribed late or not
    // access all the values that were broadcast

    // --- AsyncSubject - once completed, get last message
    // similar to BehaviorSubject in terms of emitting the last value once subscribed
    // only difference, requires a complete() method to mark the stream as completed
    // once that is done, the last value is emitted
  

    // --- take(n) - receive data amount of times before navigating

    // --- takeUntil
    done$ = new AsyncSubject();
    myService$ = interval(1000)
      .pipe(
        tap(curr => console.log(curr)),
        takeUntil(this.done$)
      );
    counter;
    constructor() { }
    ngOnInit() {
      this.myService$
        .subscribe(data => this.counter = data)
    }
    ngOnDestroy() {
      this.done$.next('');
      this.done$.complete();
    }

    // --- with async pipe, unsubscribe is automatic
    // template: Counter: {{ myService$ | async }}
    myService$ = interval(1000)
      .pipe(tap(curr => console.log(curr)));
    // counter
    constructor() { }
    ngOnInit() {
      // this.myService$.subscribe(data => this.counter = data)
    }
  

    // --- from - convert Promise, array-like, or an iterable object into an Observable
    import { from } from 'rxjs';
    const data = from(fetch('/api/endpoint'));
    data.subscribe({
     next(response) { console.log(response); },
     error(err) { console.error('Error: ' + err); },
     complete() { console.log('Completed'); }
    });

    // --- fromEvent - Observable from DOM events, or Node.js EventEmitter events or others
    import { fromEvent } from 'rxjs';
    // function fromEvent(target, eventName) { // is the same
    //   return new Observable((observer) => {
    //     const handler = (e) => observer.next(e);
    //     target.addEventListener(eventName, handler);
    //     return () => { target.removeEventListener(eventName, handler); };
    //   });
    // }
    const el = document.getElementById('my-element');
    const mouseMoves = fromEvent(el, 'mousemove');
    const subscription = mouseMoves.subscribe((evt: MouseEvent) => {
      console.log(`Coords: ${evt.clientX} X ${evt.clientY}`);
    });

    // --- fromFetch - Observable from Fetch API, to make an HTTP request
    import { of } from 'rxjs';
    import { fromFetch } from 'rxjs/fetch';
    import { switchMap, catchError } from 'rxjs/operators';
    const data$ = fromFetch('https://api.github.com/users?per_page=5').pipe(
     switchMap(response => {
       if (response.ok) { return response.json(); }
       else { return of({ error: true, message: `Error ${response.status}` });  }
     }),
     catchError(err => {
       // Network or other error, handle appropriately
       console.error(err);
       return of({ error: true, message: err.message })
     })
    );
    data$.subscribe({
     next: result => console.log(result),
     complete: () => console.log('done')
    });
    // with Chunked Transfer Encoding
    // promise will resolve as soon as the response headers are received
    import { of } from 'rxjs';
    import { fromFetch } from 'rxjs/fetch';
    const data$ = fromFetch('https://api.github.com/users?per_page=5', {
      selector: response => response.json()
    });
    data$.subscribe({
     next: result => console.log(result),
     complete: () => console.log('done')
    });

    // --- of - converts the arguments to an observable sequence
    import { of } from 'rxjs';
    of(10, 20, 30)
      .subscribe(
        next => console.log('next:', next),
        err => console.log('error:', err),
        () => console.log('the end'),
      );
    // result: 'next: 10' , 'next: 20' , 'next: 30'

    // --- observeOn
    // re-emits all notifications from source Observable with specified scheduler.
    // ensure values in subscribe are called just before browser repaint:
    import { interval } from 'rxjs';
    import { observeOn } from 'rxjs/operators';
    // Intervals are scheduled with async scheduler by default...
    const intervals = interval(10);
    intervals.pipe(
      // ...but we will observe on animationFrame scheduler to ensure smooth animation
      observeOn(animationFrameScheduler),
    ).subscribe(val => {
      someDiv.style.height = val + 'px';
    });

    // --- repeatWhen
    // returns an Observable that mirrors the source Observable
    // with the exception of a complete
    // if the source Observable calls complete,
    // this method will emit to the Observable returned from notifier
    // if that Observable calls complete or error,
    // then this method will call complete or error on the child subscription
    // otherwise this method will resubscribe to the source Observable
    repeatWhen<T>(
      notifier: (notifications: Observable<any>) => Observable<any>
    ): MonoTypeOperatorFunction<T>
    // --- repeat
    // returns an Observable that repeats the stream of items
    // emitted by the source Observable at most count times
    repeat<T>(count: number = -1): MonoTypeOperatorFunction<T>

    // --- publish
    // makes a cold Observable hot.
    // make source$ hot by applying publish operator,
    // then merge each inner observable into a single one and subscribe:
    import { of, zipWith, interval, merge } from "rxjs";
    import { map, publish } from "rxjs/operators";
    const source$ = zipWith(
      interval(2000),
        of(1, 2, 3, 4, 5, 6, 7, 8, 9),
      ).pipe(
        map(values => values[1])
      );
    source$.pipe(
      publish(multicasted$ => {
        return merge(
            multicasted$.pipe(tap(x => console.log('Stream 1:', x))),
            multicasted$.pipe(tap(x => console.log('Stream 2:', x))),
            multicasted$.pipe(tap(x => console.log('Stream 3:', x))),
        );
      })).subscribe();
    /* results every two seconds:
    Stream 1: 1
    Stream 2: 1
    Stream 3: 1
    ...
    Stream 1: 9
    Stream 2: 9
    Stream 3: 9 */

    // --- raceWith
    // mirror first source Observable to emit a next, error or complete notification
    // from the combination of the Observable to which the operator is applied and supplied Observables
    import { interval } from 'rxjs';
    import { mapTo, raceWith } from 'rxjs/operators';
    const obs1 = interval(1000).pipe(mapTo('fast one'));
    const obs2 = interval(3000).pipe(mapTo('medium one'));
    const obs3 = interval(5000).pipe(mapTo('slow one'));
    obs2.pipe(
      raceWith(obs3, obs1)
    ).subscribe(
      winner => console.log(winner)
    ); // outputs a series of 'fast one'

    // --- animationFrames
    // emits the the amount of time elapsed since subscription and timestamp on each animation frame
    // defaults to milliseconds provided to the requestAnimationFrame callback
    // does not end on its own.
    // uuseful for setting up animations with RxJS.
    // tweening a div to move it on the screen:
    import { animationFrames } from 'rxjs';
    import { map, takeWhile, endWith } from 'rxjs/operators';
    function tween(start: number, end: number, duration: number) {
      const diff = end - start;
      return animationFrames().pipe(
        map(({elapsed}) => elapsed / duration), // figure out what percentage of time has passed
        takeWhile(v => v < 1), // take the vector while less than 100%
        endWith(1), // finish with 100%
        map(v => v * diff + start) // calculate the distance traveled between start and end
      );
    }
    // setup a div to move around
    const div = document.createElement('div');
    document.body.appendChild(div);
    div.style.position = 'absolute';
    div.style.width = '40px';
    div.style.height = '40px';
    div.style.backgroundColor = 'lime';
    div.style.transform = 'translate3d(10px, 0, 0)';
    tween(10, 200, 4000).subscribe(x => {
      div.style.transform = `translate3d(${x}px, 0, 0)`;
    });
    // providing a custom timestamp provider:
    import { animationFrames, TimestampProvider } from 'rxjs';
    let now = 0; // custom timestamp provider
    const customTSProvider: TimestampProvider = { now() { return now++; } };
    const source$ = animationFrames(customTSProvider);
    source$.subscribe(({ elapsed }) => console.log(elapsed)); // 0...1...2... on every animation frame
  

    // --- combineLatest
    // combine multiple Observables to create an Observable whose values
    // are calculated from the latest values of each of its input Observables.
    // - combine an array of Observables:
    import { combineLatest, of } from 'rxjs';
    import { delay, startWith } from 'rxjs/operators';
    const observables = [1, 5, 10].map(
      n => of(n).pipe(
        delay(n * 1000),   // emit 0 and then emit n after n seconds
        startWith(0),
      )
    );
    const combined = combineLatest(observables);
    combined.subscribe(value => console.log(value)); // [0, 0, 0] (immediately) , [1, 0, 0] (in 1s) , [1, 5, 0] (in 5s) , [1, 5, 10] (in 10s)
    // - combine two timer Observables:
    import { combineLatest, timer } from 'rxjs'; // 0, 1, 2... after every second, starting from now
    const firstTimer = timer(0, 1000); // 0, 1, 2... after every second, starting 0,5s from now
    const secondTimer = timer(500, 1000);
    const combinedTimers = combineLatest(firstTimer, secondTimer);
    combinedTimers.subscribe(value => console.log(value)); // [0, 0] (in 0.5s) , [1, 0] (in 1s) , [1, 1] (in 1.5s) , [2, 1] (in 2s)
    // - combine a dictionary of Observables:
    import { combineLatest, of } from 'rxjs';
    import { delay, startWith } from 'rxjs/operators';
    const observables = {
      a: of(1).pipe(delay(1000), startWith(0)),
      b: of(5).pipe(delay(5000), startWith(0)),
      c: of(10).pipe(delay(10000), startWith(0))
    };
    const combined = combineLatest(observables);
    combined.subscribe(value => console.log(value));
    // {a: 0, b: 0, c: 0} immediately
    // {a: 1, b: 0, c: 0} after 1s
    // {a: 1, b: 5, c: 0} after 5s
    // {a: 1, b: 5, c: 10} after 10s
    // - use map operator to dynamically calculate the Body-Mass Index:
    import { combineLatest, of } from 'rxjs';
    import { map } from 'rxjs/operators';
    const weight = of(70, 72, 76, 79, 75);
    const height = of(1.76, 1.77, 1.78);
    const bmi = combineLatest([weight, height]).pipe(
      map(([w, h]) => w / (h * h)),
    );
    bmi.subscribe(x => console.log('BMI is ' + x));
    // BMI is 24.212293388429753
    // BMI is 23.93948099205209
    // BMI is 23.671253629592222

    // --- combineLatestWith
    // create an observable that combines the latest values
    // from all passed observables and the source into arrays and emits them.
    / calculation from two inputs:
    const input1 = document.createElement('input');
    document.body.appendChild(input1);
    const input2 = document.createElement('input');
    document.body.appendChild(input2);
    // get streams of changes
    const input1Changes$ = fromEvent(input1, 'change');
    const input2Changes$ = fromEvent(input2, 'change');
    // combine the changes by adding them together
    input1Changes$.pipe(
      combineLatestWith(input2Changes$),
      map(([e1, e2]) => Number(e1.target.value) + Number(e2.target.value)),
    )
    .subscribe(x => console.log(x));

    // --- combineLatestAll
    // takes an Observable of Observables, and collects all Observables from it
    // once the outer Observable completes, it subscribes to all collected Observables
    // and combines their values using the combineLatest strategy, such that:
    // - every time an inner Observable emits, the output Observable emits
    // when the returned observable emits, it emits all of the latest values by:
    // - if a project function is provided, it is called with each recent value
    //   from each inner Observable in whatever order they arrived,
    //   and the result of the project function is what is emitted by the output Observable
    // - if there is no project function,
    //   an array of all the most recent values is emitted by the output Observable
    // map two click events to a finite interval Observable, then apply combineLatestAll
    import { map, combineLatestAll, take } from 'rxjs/operators';
    import { fromEvent } from 'rxjs/observable/fromEvent';
    const clicks = fromEvent(document, 'click');
    const higherOrder = clicks.pipe(
      map(ev =>
         interval(Math.random() * 2000).pipe(take(3))
      ),
      take(2)
    );
    const result = higherOrder.pipe(
      combineLatestAll()
    );
    result.subscribe(x => console.log(x));

    // --- concat
    // concatenates multiple Observables together
    // by sequentially emitting their values, one Observable after the other
    import { concat, interval, range } from 'rxjs';
    import { take } from 'rxjs/operators';
    // timer counting from 0 to 3 with a synchronous sequence from 1 to 10
    const timer = interval(1000).pipe(take(4));
    const sequence = range(1, 10);
    const result = concat(timer, sequence);
    result.subscribe(x => console.log(x));
    // results in: 0 -1000ms-> 1 -1000ms-> 2 -1000ms-> 3 -immediate-> 1 ... 10

    // --- concatWith
    // emits all of the values from the source observable, then, once it completes,
    // subscribes to each observable source provided, one at a time, emitting all of their values,
    // and not subscribing to the next one until it completes.
    // Listen for one mouse click, then listen for all mouse moves:
    import { fromEvent } from 'rxjs';
    import { concatWith } from 'rxjs/operators';
    const clicks$ = fromEvent(document, 'click');
    const moves$ = fromEvent(document, 'mousemove');
    clicks$.pipe(
      map(() => 'click'),
      take(1),
      concatWith(
        moves$.pipe(
          map(() => 'move')
        )
      )
    )
    .subscribe(x => console.log(x)); // 'click' 'move' 'move' 'move' ...

    // --- mergeWith
    // merge the values from all observables to an single observable result
    import { fromEvent } from 'rxjs';
    import { map, mergeWith } from 'rxjs/operators';
    const clicks$ = fromEvent(document, 'click').pipe(map(() => 'click'));
    const mousemoves$ = fromEvent(document, 'mousemove').pipe(map(() => 'mousemove'));
    const dblclicks$ = fromEvent(document, 'dblclick').pipe(map(() => 'dblclick'));
    mousemoves$.pipe( mergeWith(clicks$, dblclicks$) )
    .subscribe(x => console.log(x));
    // result (assuming user interactions)
    // "mousemove"
    // "mousemove"
    // "mousemove"
    // "click"
    // "click"
    // "dblclick"

    // --- forkJoin
    // accepts an Array of ObservableInput or a dictionary Object of ObservableInput
    // returns an Observable that emits either an array of values in the exact same order as the passed array,
    // or a dictionary of values in the same shape as the passed dictionary.
    // dictionary of observable inputs:
    import { forkJoin, of, timer } from 'rxjs';
    const observable = forkJoin({
      foo: of(1, 2, 3, 4),
      bar: Promise.resolve(8),
      baz: timer(4000),
    });
    observable.subscribe({
     next: value => console.log(value),
     complete: () => console.log('This is how it ends!'),
    });
    // { foo: 4, bar: 8, baz: 0 } after 4 seconds
    // "This is how it ends!" immediately after
    // array of observable inputs:
    import { forkJoin, of, timer } from 'rxjs';
    const observable = forkJoin([
      of(1, 2, 3, 4),
      Promise.resolve(8),
      timer(4000),
    ]);
    observable.subscribe({
     next: value => console.log(value),
     complete: () => console.log('This is how it ends!'),
    });
    // [4, 8, 0] after 4 seconds
    // "This is how it ends!" immediately after

    // --- startWith
    // return an Observable that emits the items you specify as arguments
    // before it begins to emit items emitted by the source Observable
    import { of } from 'rxjs';
    import { startWith } from 'rxjs/operators';
    of("from source")
      .pipe(startWith("first", "second"))
      .subscribe(x => console.log(x));
    // results: "first" "second" "from source"

    // --- withLatestFrom
    // combine the source Observable with other Observables
    // to create an Observable whose values are calculated
    // from the latest values of each, only when the source emits
    import { fromEvent, interval } from 'rxjs';
    import { withLatestFrom } from 'rxjs/operators';
    const clicks = fromEvent(document, 'click');
    const timer = interval(1000);
    const result = clicks.pipe(withLatestFrom(timer));
    result.subscribe(x => console.log(x));
    // on every click event,
    // emit an array with the latest timer event plus the click event

    // --- zipWith , zipAll
    // combines multiple Observables to create an Observable
    // whose values are calculated from the values, in order,
    // of each of its input Observables
    import { zipWith, of } from 'rxjs';
    import { map } from 'rxjs/operators';
    let age$ = of<number>(27, 25, 29);
    let name$ = of<string>('Foo', 'Bar', 'Beer');
    let d$ = of<boolean>(true, true, false);
    zipWith(age$, name$, d$).pipe(
      map(([age, name, d]) => ({ age, name, d })),
    ).subscribe(x => console.log(x));
    // outputs
    // { age: 27, name: 'Foo', d: true }
    // { age: 25, name: 'Bar', d: true }
    // { age: 29, name: 'Beer', d: false }

    // --- reduce
    // combines together all values emitted on the source,
    // using an accumulator function that knows how to join a new source value
    // into the accumulation from the past
    import { fromEvent, interval } from 'rxjs';
    import { reduce, takeUntil, mapTo } from 'rxjs/operators';
    const clicksInFiveSeconds = fromEvent(document, 'click').pipe(
      takeUntil(interval(5000)),
    );
    const ones = clicksInFiveSeconds.pipe(mapTo(1));
    const seed = 0;
    const count = ones.pipe(reduce((acc, one) => acc + one, seed));
    count.subscribe(x => console.log(x));
  

    // --- debounceTime
    // emits a value from the source Observable
    // only after a particular time span has passed without another source emission
    import { fromEvent } from 'rxjs';
    import { debounceTime } from 'rxjs/operators';
    const clicks = fromEvent(document, 'click');
    const result = clicks.pipe(debounceTime(1000));
    result.subscribe(x => console.log(x));

    // --- distinctUntilChanged
    // returns an Observable that emits all items emitted by the source Observable
    // that are distinct by comparison from the previous item
    import { of } from 'rxjs';
    import { distinctUntilChanged } from 'rxjs/operators';
    interface Person { age: number, name: string }
    of<Person>(
        { age: 4, name: 'Foo'},
        { age: 7, name: 'Bar'},
        { age: 5, name: 'Foo'},
        { age: 6, name: 'Foo'},
      ).pipe( // using a compare function
        distinctUntilChanged((p: Person, q: Person) => p.name === q.name),
        // distinctUntilKeyChanged('name'),
      )
      .subscribe(x => console.log(x));
    // displays:
    // { age: 4, name: 'Foo' }
    // { age: 7, name: 'Bar' }
    // { age: 5, name: 'Foo' }

    // --- filter
    // filter items emitted by the source Observable
    // by only emitting those that satisfy a specified predicate
    import { fromEvent } from 'rxjs';
    import { filter } from 'rxjs/operators';
    const clicks = fromEvent(document, 'click');
    const clicksOnDivs = clicks.pipe(filter(ev => ev.target.tagName === 'DIV'));
    clicksOnDivs.subscribe(x => console.log(x));

    // --- partition
    // like filter, but returns two Observables: one like the output of filter,
    // and other with values that did not pass the condition.
    // partition a set of numbers into odds and evens observables
    import { of, partition } from 'rxjs';
    const observableValues = of(1, 2, 3, 4, 5, 6);
    const [evens$, odds$] = partition(observableValues, (value, index) => value % 2 === 0);
    odds$.subscribe(x => console.log('odds', x));
    evens$.subscribe(x => console.log('evens', x));
    // odds 1   odds 3   odds 5   evens 2   evens 4   evens 6

    // --- take
    // emits only the first count values emitted by the source Observable
    // take the first 5 seconds of an infinite 1-second interval Observable:
    import { interval } from 'rxjs';
    import { take } from 'rxjs/operators';
    const intervalCount = interval(1000);
    const takeFive = intervalCount.pipe(take(5));
    takeFive.subscribe(x => console.log(x));
    // Logs: 0 1 2 3 4

    // --- takeUntil
    // emits the values emitted by the source Observable
    // until a notifier Observable emits a value
    // tick every second until the first click happens:
    import { fromEvent, interval } from 'rxjs';
    import { takeUntil } from 'rxjs/operators';
    const source = interval(1000);
    const clicks = fromEvent(document, 'click');
    const result = source.pipe(takeUntil(clicks));
    result.subscribe(x => console.log(x));

    // --- takeWhile
    // emits values emitted by the source Observable
    // so long as each value satisfies the given predicate,
    // and then completes as soon as this predicate is not satisfied
    import { fromEvent } from 'rxjs';
    import { takeWhile } from 'rxjs/operators';
    const clicks = fromEvent(document, 'click');
    const result = clicks.pipe(takeWhile(ev => ev.clientX > 200));
    result.subscribe(x => console.log(x));

    // --- firstValueFrom
    // converts an observable to a promise by subscribing to the observable,
    // returning a promise that will resolve as soon as the first value arrives from the observable
    // will then be closed.
    // wait for the first value from a stream and emit it from a promise in an async function:
    import { interval, firstValueFrom } from 'rxjs';
    async function execute() {
      const source$ = interval(2000);
      const firstNumber = await firstValueFrom(source$);
      console.log(`The first number is ${firstNumber}`);
    }
    execute(); // "The first number is 0"

    // --- lastValueFrom
    // converts an observable to a promise by subscribing to the observable,
    // waiting for it to complete, and resolving the returned promise with the last value from the observed stream.
    // wait for the last value from a stream and emit it from a promise in an async function:
    import { interval, lastValueFrom } from 'rxjs';
    import { take } from 'rxjs/operators';
    async function execute() {
      const source$ = interval(2000).pipe(take(10));
      const finalNumber = await lastValueFrom(source$);
      console.log(`The final number is ${finalNumber}`);
    }
    execute(); // "The final number is 9"

    // --- skip
    // returns an Observable that skips the first count items emitted by the source Observable
    skip<T>(count: number): MonoTypeOperatorFunction<T>
    // --- skipLast
    // skip the last count values emitted by the source Observable
    import { range } from 'rxjs';
    import { skipLast } from 'rxjs/operators';
    const many = range(1, 5);
    const skipLastTwo = many.pipe(skipLast(2));
    skipLastTwo.subscribe(x => console.log(x)); // Results in: 1 2 3
    // --- skipUntil
    // returns an Observable that skips items emitted by the source Observable
    // until a second Observable emits an item
    skipUntil<T>(notifier: Observable<any>): MonoTypeOperatorFunction<T>
    // --- skipWhile
    // returns an Observable that skips all items emitted by the source Observable
    // as long as a specified condition holds true,
    // but emits all further source items as soon as the condition becomes false
    skipWhile<T>(
      predicate: (value: T, index: number) => boolean
    ): MonoTypeOperatorFunction<T>

    // --- auditTime
    // when it sees a source values, it ignores that plus the next ones
    // for duration milliseconds, and then it emits the most recent value from the source.
    // --- audit
    // like auditTime, but the silencing duration is determined by a second Observable.
    // emit clicks at a rate of at most one click per second:
    import { fromEvent } from 'rxjs';
    import { auditTime } from 'rxjs/operators';
    const clicks = fromEvent(document, 'click');
    const result = clicks.pipe(auditTime(1000));
    // const result = clicks.pipe(audit(ev => interval(1000)));
    result.subscribe(x => console.log(x));

    // --- exhaustAll
    // flattens an Observable-of-Observables by dropping the next
    // inner Observables while the current inner is still executing.
    // run a finite timer for each click, only if there is no currently active timer:
    import { fromEvent, interval } from 'rxjs';
    import { exhaustAll, map, take } from 'rxjs/operators';
    const clicks = fromEvent(document, 'click');
    const higherOrder = clicks.pipe(
      map((ev) => interval(1000).pipe(take(5))),
    );
    const result = higherOrder.pipe(exhaustAll());
    result.subscribe(x => console.log(x));

    // --- exhaustMap
    // maps each value to an Observable,
    // then flattens all of these inner Observables using exhaustAll.
    // run a finite timer for each click, only if there is no currently active timer:
    import { fromEvent, } from 'rxjs';
    import { exhaustMap, take } from 'rxjs/operators';
    const clicks = fromEvent(document, 'click');
    const result = clicks.pipe(
      exhaustMap((ev) => interval(1000).pipe(take(5))),
    );
    result.subscribe(x => console.log(x));
  

    // --- map
    // applies a given project function to each value emitted by the source Observable,
    // and emits the resulting values as an Observable
    import { fromEvent } from 'rxjs';
    import { map } from 'rxjs/operators';
    const clicks = fromEvent(document, 'click');
    const positions = clicks.pipe(map(ev => ev.clientX));
    positions.subscribe(x => console.log(x));

    // --- mergeMap
    // maps each value to an Observable,
    // then flattens all of these inner Observables using mergeAll
    import { of, interval } from 'rxjs';
    import { mergeMap, map } from 'rxjs/operators';
    const letters = of('a', 'b', 'c');
    const result = letters.pipe(
      mergeMap(x => interval(1000).pipe(map(i => x+i))),
    );
    result.subscribe(x => console.log(x));
    // Results in the following: a0 b0 c0 a1 b1 c1
    // continues to list a,b,c with respective ascending integers
    // --- mergeMapTo
    // like mergeMap, but maps each value always to the same inner Observable
    // --- mergeAll
    // flattens an Observable-of-Observables.
    // spawn a new interval Observable for each click event,
    // and blend their outputs as one Observable:
    import { fromEvent, interval } from 'rxjs';
    import { map, mergeAll } from 'rxjs/operators';
    const clicks = fromEvent(document, 'click');
    const higherOrder = clicks.pipe(map((ev) => interval(1000)));
    const firstOrder = higherOrder.pipe(mergeAll());
    firstOrder.subscribe(x => console.log(x));
    // count from 0 to 9 every second for each click,
    // but only allow 2 concurrent timers:
    import { fromEvent, interval } from 'rxjs';
    import { take, map, mergeAll } from 'rxjs/operators';
    const clicks = fromEvent(document, 'click');
    const higherOrder = clicks.pipe(
      map((ev) => interval(1000).pipe(take(10))),
    );
    const firstOrder = higherOrder.pipe(mergeAll(2));
    firstOrder.subscribe(x => console.log(x));

    // --- concatMap
    // project each source value to an Observable
    // which is merged in the output Observable, in a serialized fashion
    // waiting for each one to complete before merging the next
    import { fromEvent, interval } from 'rxjs';
    import { concatMap, take } from 'rxjs/operators';
    const clicks = fromEvent(document, 'click');
    const result = clicks.pipe(
      concatMap(ev => interval(1000).pipe(take(4)),
    );
    result.subscribe(x => console.log(x));
    // Results in the following: (results are not concurrent)
    // For every click on the "document" it will emit values 0 to 3 spaced
    // on a 1000ms interval
    // one click = 1000ms-> 0 -1000ms-> 1 -1000ms-> 2 -1000ms-> 3

    // --- concatMapTo
    // projects each source value to the same Observable
    // which is merged multiple times in a serialized fashion on the output Observable
    // like concatMap, but maps each value always to the same inner Observable
    // for each click event, tick every second from 0 to 3, with no concurrency:
    import { fromEvent, interval } from 'rxjs';
    import { concatMapTo, take } from 'rxjs/operators';
    const clicks = fromEvent(document, 'click');
    const result = clicks.pipe(
      concatMapTo(interval(1000).pipe(take(4))),
    );
    result.subscribe(x => console.log(x));
    // for every click on the "document" it will emit values 0 to 3 spaced
    // on a 1000ms interval one click = 1000ms-> 0 -1000ms-> 1 -1000ms-> 2 -1000ms-> 3

    // --- switchMap
    // projects each source value to an Observable which is merged in the output Observable,
    // emitting values only from the most recently projected Observable
    import { fromEvent, interval } from 'rxjs';
    import { switchMap } from 'rxjs/operators';
    const clicks = fromEvent(document, 'click');
    const result = clicks.pipe(switchMap((ev) => interval(1000)));
    result.subscribe(x => console.log(x));

    // --- pluck
    // like map, but picking one of the nested properties
    // of every emitted object.
    // map every click to the tagName of the clicked target element:
    import { fromEvent } from 'rxjs';
    import { pluck } from 'rxjs/operators';
    const clicks = fromEvent(document, 'click');
    const tagNames = clicks.pipe(pluck('target', 'tagName'));
    tagNames.subscribe(x => console.log(x));

    // --- scan
    // applies an accumulator function over the source Observable,
    // and returns each intermediate result, with an optional seed value
    // count the number of click events:
    import { fromEvent } from 'rxjs';
    import { scan, mapTo } from 'rxjs/operators';
    const clicks = fromEvent(document, 'click');
    const ones = clicks.pipe(mapTo(1));
    const seed = 0;
    const count = ones.pipe(scan((acc, one) => acc + one, seed));
    count.subscribe(x => console.log(x));

    // --- mergeScan
    // applies an accumulator function over the source Observable
    // where the accumulator function itself returns an Observable,
    //then each intermediate Observable returned is merged into the output Observable
    import { fromEvent, of } from 'rxjs';
    import { mapTo, mergeScan } from 'rxjs/operators';
    const click$ = fromEvent(document, 'click');
    const one$ = click$.pipe(mapTo(1));
    const seed = 0;
    const count$ = one$.pipe(
      mergeScan((acc, one) => of(acc + one), seed),
    );
    count$.subscribe(x => console.log(x)); // 1 2 3 4 ...and so on for each click

    // --- switchScan
    // applies an accumulator function over the source Observable
    // where the accumulator function itself returns an Observable,
    // emitting values only from the most recently returned Observable.
    // like scan, but only the most recent Observable returned by the accumulator is merged into the outer Observable
  

    // --- tap
    // perform a side effect for every emission on the source Observable,
    // but return an Observable that is identical to the source
    import { fromEvent } from 'rxjs';
    import { tap, map } from 'rxjs/operators';
    const clicks = fromEvent(document, 'click');
    const positions = clicks.pipe(
      tap(ev => console.log(ev)),
      map(ev => ev.clientX),
    );
    positions.subscribe(x => console.log(x));

    // --- count
    // counts the number of emissions on the source and emits that number when the source completes
    // how many seconds have passed before the first click happened:
    import { fromEvent, interval } from 'rxjs';
    import { count, takeUntil } from 'rxjs/operators';
    const seconds = interval(1000);
    const clicks = fromEvent(document, 'click');
    const secondsBeforeClick = seconds.pipe(takeUntil(clicks));
    const result = secondsBeforeClick.pipe(count());
    result.subscribe(x => console.log(x));
    // counts how many odd numbers are there between 1 and 7:
    import { range } from 'rxjs';
    import { count } from 'rxjs/operators';
    const numbers = range(1, 7);
    const result = numbers.pipe(count(i => i % 2 === 1));
    result.subscribe(x => console.log(x));
    // Results in: 4

    // --- min , max
    // operates on an Observable that emits numbers
    // (or items that can be compared with a provided function),
    // and when source Observable completes it emits
    // a single item: the item with the smallest/largest value
    // minimal value of a series of numbers
    import { of } from 'rxjs';
    import { min, max } from 'rxjs/operators';
    of(5, 4, 7, 2, 8).pipe(
      min(),
      // max(),
    ).subscribe(x => console.log(x)); // -> 2
    // use a comparer function to get the minimal item
    import { of } from 'rxjs';
    import { min } from 'rxjs/operators';
    interface Person {
      age: number,
      name: string
    }
    of<Person>(
      {age: 7, name: 'Foo'},
      {age: 5, name: 'Bar'},
      {age: 9, name: 'Beer'},
    ).pipe(
      min<Person>( (a: Person, b: Person) => a.age < b.age ? -1 : 1),
      // max<Person>( (a: Person, b: Person) => a.age < b.age ? -1 : 1),
    ).subscribe((x: Person) => console.log(x.name)); // -> 'Bar'
  

    // --- buffer
    // buffers the source Observable values until closingNotifier emits.
    // --- window* - like buffer, but emit a nested Observable instead of an array.
    // emit array of most recent interval events on every click:
    import { fromEvent, interval } from 'rxjs';
    import { buffer } from 'rxjs/operators';
    // window
    // import { window, mergeAll, map take } from 'rxjs/operators';
    const clicks = fromEvent(document, 'click');
    const interval = interval(1000);
    const result = interval.pipe(buffer(clicks));
    // every window of 1 second each, emit at most 2 click events:
    // const result = clicks.pipe(
    //   window(sec),
    //   map(win => win.pipe(take(2))), // each window has at most 2 emissions
    //   mergeAll(),              // flatten the Observable-of-Observables
    // );
    result.subscribe(x => console.log(x));

    // --- bufferCount
    // buffers the source Observable values
    // until the size hits the maximum bufferSize given.
    // emit the last two click events as an array:
    import { fromEvent } from 'rxjs';
    import { bufferCount } from 'rxjs/operators';
    // for windowCount:
    import { windowCount, map, mergeAll } from 'rxjs/operators';
    const clicks = fromEvent(document, 'click');
    const result = clicks.pipe(bufferCount(2));
    // ignore every 3rd click event, starting from the first one:
    // const result = clicks.pipe(
    //   windowCount(3)),
    //   map(win => win.skip(1)), // skip first of every 3 clicks
    //   mergeAll(),              // flatten the Observable-of-Observables
    // );
    // ignore every 3rd click event, starting from the third one:
    //  windowCount(2, 3),
    //  mergeAll(),              // flatten the Observable-of-Observables
    // );
    result.subscribe(x => console.log(x));

    // --- bufferTime
    // buffers the source Observable values for a specific time period
    // every second, emit an array of the recent click events:
    import { fromEvent } from 'rxjs';
    import { bufferTime } from 'rxjs/operators';
    const clicks = fromEvent(document, 'click');
    const buffered = clicks.pipe(bufferTime(1000));
    buffered.subscribe(x => console.log(x));
    // every 5 seconds, emit the click events from the next 2 seconds:
    import { fromEvent } from 'rxjs';
    import { bufferTime } from 'rxjs/operators';
    const clicks = fromEvent(document, 'click');
    const buffered = clicks.pipe(bufferTime(2000, 5000));
    buffered.subscribe(x => console.log(x));
    // --- windowTime
    // in every window of 1 second each, emit at most 2 click events
    import { fromEvent } from 'rxjs';
    import { windowTime, map, mergeAll } from 'rxjs/operators';
    const clicks = fromEvent(document, 'click');
    const result = clicks.pipe(
      windowTime(1000),
      map(win => win.take(2)),   // each window has at most 2 emissions
      mergeAll(),                // flatten the Observable-of-Observables
    );
    result.subscribe(x => console.log(x));
    // every 5 seconds start a window 1 second long,
    // and emit at most 2 click events per window
    const clicks = fromEvent(document, 'click');
    const result = clicks.pipe(
      windowTime(1000, 5000),
      map(win => win.take(2)),   // each window has at most 2 emissions
      mergeAll(),                // flatten the Observable-of-Observables
    );
    result.subscribe(x => console.log(x));
    // same as example above but with maxWindowCount instead of take
    const clicks = fromEvent(document, 'click');
    const result = clicks.pipe(
      windowTime(1000, 5000, 2), // each window has still at most 2 emissions
      mergeAll(),                // flatten the Observable-of-Observables
    );
    result.subscribe(x => console.log(x));

    // --- bufferToggle
    // buffers the source Observable values
    // starting from an emission from openings
    // and ending when the output of closingSelector emits
    import { fromEvent, interval, empty } from 'rxjs';
    import { bufferToggle } from 'rxjs/operators';
    // windowToggle
    // import { windowToggle, mergeAll } from 'rxjs/operators';
    const clicks = fromEvent(document, 'click');
    const openings = interval(1000);
    const buffered = clicks.pipe(
      bufferToggle(
        openings, i => i % 2 ? interval(500) : empty()
      )
      // windowToggle(
      //   openings, i => i % 2 ? interval(500) : empty()
      // ),
      // mergeAll(),
    );
    buffered.subscribe(x => console.log(x));

    // --- bufferWhen
    // buffers the source Observable values,
    // using a factory function of closing Observables to determine
    // when to close, emit, and reset the buffer
    import { fromEvent, interval } from 'rxjs';
    import { bufferWhen } from 'rxjs/operators';
    // windowWhen
    // import { windowWhen, map, mergeAll } from 'rxjs/operators';
    const clicks = fromEvent(document, 'click');
    const buffered = clicks.pipe(
      bufferWhen(
        () => interval(1000 + Math.random() * 4000)
      )
      // windowWhen(
      //   () => interval(1000 + Math.random() * 4000)
      // ),
      // map(win => win.pipe(take(2))),     // each window has at most 2 emissions
      // mergeAll(),                        // flatten the Observable-of-Observables
    );
    buffered.subscribe(x => console.log(x));

    // --- withLatestFrom
    // whenever the source Observable emits a value,
    // it computes a formula using that value
    // plus the latest values from other input Observables,
    // then emits the output of that formula
    import { fromEvent, interval } from 'rxjs';
    import { withLatestFrom } from 'rxjs/operators';
    const clicks = fromEvent(document, 'click');
    const timer = interval(1000);
    const result = clicks.pipe(withLatestFrom(timer));
    result.subscribe(x => console.log(x));
  

    // --- delay
    // time shifts each item by some specified amount of milliseconds.
    // delay each click by one second:
    import { fromEvent } from 'rxjs';
    import { delay } from 'rxjs/operators';
    const clicks = fromEvent(document, 'click');
    // each click emitted after 1 second
    const delayedClicks = clicks.pipe(delay(1000));
    delayedClicks.subscribe(x => console.log(x));
    // delay all clicks until a future date happens:
    import { fromEvent } from 'rxjs';
    import { delay } from 'rxjs/operators';
    const clicks = fromEvent(document, 'click');
    const date = new Date('March 15, 2050 12:00:00'); // in the future
    const delayedClicks = clicks.pipe(delay(date)); // click emitted only after that date
    delayedClicks.subscribe(x => console.log(x));

    // --- timeout
    // errors if Observable does not emit a value in given time span.
    // check if ticks are emitted within certain timespan:
    import { interval } from 'rxjs';
    import { timeout } from 'rxjs/operators';
    const seconds = interval(1000);
    // Lets use bigger timespan to be safe,
    // since "interval" might fire a bit later then scheduled
    seconds.pipe(timeout(1100)).subscribe(
      // will emit numbers just as regular "interval" would
      value => console.log(value),
      err => console.log(err), // Will never be called
    );
    seconds.pipe(timeout(900)).subscribe(
      value => console.log(value), // Will never be called
      // will emit error before even first value is emitted,
      // since it did not arrive within 900ms period
      err => console.log(err)
    );
    // use Date to check if Observable completed:
    import { interval } from 'rxjs';
    import { timeout } from 'rxjs/operators';
    const seconds = interval(1000);
    seconds.pipe(
      timeout(new Date("December 17, 2020 03:24:00")),
    ).subscribe(
      // will emit values as regular "interval" would
      // until December 17, 2020 at 03:24:00
      value => console.log(value),
      // on December 17, 2020 at 03:24:00 it will emit an error,
      // since Observable did not complete by then
      err => console.log(err)
    );

    // --- timeoutWith
    // a version of timeout, lets you specify fallback Observable
    // add fallback observable
    import { intrerval } from 'rxjs';
    import { timeoutWith } from 'rxjs/operators';
    const seconds = interval(1000);
    const minutes = interval(60 * 1000);
    seconds.pipe(timeoutWith(900, minutes))
    .subscribe(
      // After 900ms, will start emitting `minutes`,
      // since first value of `seconds` will not arrive fast enough.
      value => console.log(value),
      // Would be called after 900ms in case of `timeout`,
      // but here will never be called.
      err => console.log(err),
    );

    // --- timeInterval
    // emits an object containing the current value,
    // and the time that has passed
    // between emitting the current value and the previous value,
    // which is calculated by using the provided scheduler now() method
    // to retrieve the current time at each emission,
    // then calculating the difference
    // scheduler defaults to async, so by default, the interval will be in milliseconds
    // emit inteval between current value with the last value:
    const seconds = interval(1000);
    seconds.pipe(timeinterval()).subscribe(
      value => console.log(value),
      err => console.log(err),
    );
    seconds.pipe(timeout(900)).subscribe(
      value => console.log(value),
      err => console.log(err),
    );
    // NOTE: The values will never be this precise,
    // intervals created with `interval` or `setInterval`
    // are non-deterministic.
    // {value: 0, interval: 1000}
    // {value: 1, interval: 1000}
    // {value: 2, interval: 1000}
  

    // --- share(options: ShareConfig<T> = {}): Observable
    // return a new Observable that multicasts (shares) the original Observable
    // as long as there is at least one Subscriber
    // this Observable will be subscribed and emitting data
    // when all subscribers have unsubscribed
    // it will unsubscribe from the source Observable
    // because the Observable is multicasting it makes the stream hot
    // this is an alias for multicast(() => new Subject()), refCount().
    // - generate new multicast Observable from the source Observable value:
    import { interval } from 'rxjs';
    import { share, map } from 'rxjs/operators';
    const source = interval(1000)
    .pipe(
      map((x: number) => {
        console.log('Processing: ', x);
        return x*x;
      }),
      share()
    );
    source.subscribe(x => console.log('subscription 1: ', x));
    source.subscribe(x => console.log('subscription 1: ', x));
    // Logs:
    // Processing:  0
    // subscription 1:  0
    // subscription 1:  0
    // Processing:  1
    // subscription 1:  1
    // subscription 1:  1
    // Processing:  2
    // subscription 1:  4
    // subscription 1:  4
    // Processing:  3
    // subscription 1:  9
    // subscription 1:  9
    // ... and so on
    // - with notifier factory, delayed reset:
    import { interval } from 'rxjs';
    import { share, take, timer } from 'rxjs/operators';
    const source = interval(1000).pipe(take(3), share({ resetOnRefCountZero: () => timer(1000) }));
    const subscriptionOne = source.subscribe(x => console.log('subscription 1: ', x));
    setTimeout(() => subscriptionOne.unsubscribe(), 1300);
    setTimeout(() => source.subscribe(x => console.log('subscription 2: ', x)), 1700);
    setTimeout(() => source.subscribe(x => console.log('subscription 3: ', x)), 5000);
    // Logs:
    // subscription 1:  0
    // (subscription 1 unsubscribes here)
    // (subscription 2 subscribes here ~400ms later, source was not reset)
    // subscription 2:  1
    // subscription 2:  2
    // (subscription 2 unsubscribes here)
    // (subscription 3 subscribes here ~2000ms later, source did reset before)
    // subscription 3:  0
    // subscription 3:  1
    // subscription 3:  2

    // --- connect
    // creates an observable by multicasting the source within a function
    // that allows to define the usage of the multicast prior to connection.
    // sharing a totally synchronous observable:
    import { defer, of } from 'rxjs';
    import { tap, connect } from 'rxjs/operators';
    const source$ = defer(() => {
     console.log('subscription started');
     return of(1, 2, 3, 4, 5).pipe(
       tap(n => console.log(`source emitted ${n}`))
     );
    });
    source$.pipe(
     // merging 3 subscriptions to shared$
     connect((shared$) => merge(
         shared$.pipe(map(n => `all ${n}`)),
         shared$.pipe(filter(n => n % 2 === 0), map(n => `even ${n}`)),
         shared$.pipe(filter(n => n % 2 === 1), map(n => `odd ${n}`)),
     ))
    )
    .subscribe(console.log); // expected output: (notice only one subscription)
    // "subscription started" "source emitted 1" "all 1" "odd 1"
    // "source emitted 2" "all 2" "even 2"
    // "source emitted 3" "all 3" "odd 3"
    // "source emitted 4" "all 4" "even 4"
    // "source emitted 5" "all 5" "odd 5"

    // --- connectable
    // creates an observable that multicasts once connect() is called on it
    // connectable<T>(source: ObservableInput<T>, config: ConnectableConfig<T> = DEFAULT_CONFIG): ConnectableObservableLike<T>

    // --- shareReplay - share source and replay specified number of emissions on subscription
    // replay values on subscription differentiates share and shareReplay
    // for side-effects or taxing computations
    // that you do not wish to be executed amongst multiple subscriber,
    // also where late subscribers to a stream that need access to previously emitted values
    // multiple subscribers sharing source:
    import { Subject } from 'rxjs/Subject';
    import { ReplaySubject } from 'rxjs/ReplaySubject';
    import { pluck, share, shareReplay, tap } from 'rxjs/operators';
    const routeEnd = new Subject<{data: any, url: string}>(); // simulate url change with subject
    const lastUrl = routeEnd.pipe( // grab url and share with subscribers
      tap(_ => console.log('executed')),
      pluck('url'),
      // defaults to all values so we set it to just keep and replay last one
      shareReplay(1)
    );
    const initialSubscriber = lastUrl.subscribe(console.log); // requires initial subscription
    routeEnd.next({data: {}, url: 'my-path'}); // simulate route change, logged: 'executed', 'my-path'
    const lateSubscriber = lastUrl.subscribe(console.log); // logged: 'my-path'
  

    // --- ajax
    // - fetch the response object that is being returned from API:
    import { ajax } from 'rxjs/ajax';
    import { map, catchError } from 'rxjs/operators';
    import { of } from 'rxjs';
    const obs$ = ajax(`https://api.github.com/users?per_page=5`).pipe(
      map(userResponse => console.log('users: ', userResponse)),
      catchError(error => {
        console.log('error: ', error);
        return of(error);
      })
    );
    // - using ajax.getJSON() to fetch data from API:
    content_copyopen_in_new
    import { ajax } from 'rxjs/ajax';
    import { map, catchError } from 'rxjs/operators';
    import { of } from 'rxjs';
    const obs$ = ajax.getJSON(`https://api.github.com/users?per_page=5`).pipe(
      map(userResponse => console.log('users: ', userResponse)),
      catchError(error => {
        console.log('error: ', error);
        return of(error);
      })
    );
    // - using ajax() with object as argument and method POST with a two seconds delay:
    content_copyopen_in_new
    import { ajax } from 'rxjs/ajax';
    import { of } from 'rxjs';
    const users = ajax({
      url: 'https://httpbin.org/delay/2',
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'rxjs-custom-header': 'Rxjs'
      },
      body: {
        rxjs: 'Hello World!'
      }
    }).pipe(
      map(response => console.log('response: ', response)),
      catchError(error => {
        console.log('error: ', error);
        return of(error);
      })
    );
    // - using ajax() to fetch. An error object that is being returned from the request:
    content_copyopen_in_new
    import { ajax } from 'rxjs/ajax';
    import { map, catchError } from 'rxjs/operators';
    import { of } from 'rxjs';
    const obs$ = ajax(`https://api.github.com/404`).pipe(
      map(userResponse => console.log('users: ', userResponse)),
      catchError(error => {
        console.log('error: ', error);
        return of(error);
      })
    );

    // --- catchError
    // catches errors on the observable to be handled
    // by returning a new observable or throwing an error.
    // continue with a different Observable when there an error:
    import { of } from 'rxjs';
    import { map, catchError } from 'rxjs/operators';
    of(1, 2, 3, 4, 5).pipe(
      map(n => {
        if (n == 4) { throw 'four!'; }
        return n;
      }), catchError(err => of('I', 'II', 'III', 'IV', 'V')),
    ).subscribe(x => console.log(x)); // 1, 2, 3, I, II, III, IV, V
    // retries the caught source Observable again in case of error,
    // similar to retry() operator
    import { of } from 'rxjs';
    import { map, catchError, take } from 'rxjs/operators';
    of(1, 2, 3, 4, 5).pipe(
      map(n => {
        if (n === 4) { throw 'four!'; }
        return n;
      }),
      catchError((err, caught) => caught),
      take(30),
    ).subscribe(x => console.log(x)); // 1, 2, 3, 1, 2, 3, ...
    // throws a new error when the source Observable throws an error
    import { of } from 'rxjs';
    import { map, catchError } from 'rxjs/operators';
    of(1, 2, 3, 4, 5).pipe(
      map(n => {
        if (n == 4) { throw 'four!'; }
        return n;
      }),
      catchError(err => {
        throw 'error in source. Details: ' + err;
      }),
    ) .subscribe(
      x => console.log(x),
      err => console.log(err)
    ); // 1, 2, 3, error in source. Details: four!

    // --- throwIfEmpty
    // if the source observable completes without emitting a value, it will emit an error
    // error will be created at that time by the optional errorFactory argument,
    // otherwise, the error will be EmptyError.
    // click on dcument or error will be thrown:
    fromEvent(document, 'click').pipe(
      takeUntil(timer(1000)),
      throwIfEmpty(
        () => new Error('the button was not clicked within 1 second')
      ),
    )
    .subscribe({
      next() { console.log('The button was clicked'); },
      error(err) { console.error(err); },
    });

    // --- throttleTime
    // lets a value pass,
    // then ignores source values for the next duration milliseconds.
    // --- throttle
    // like throttleTime, but the silencing duration is determined by a second Observable.
    // emit clicks at a rate of at most one click per second:
    import { fromEvent } from 'rxjs';
    import { throttleTime, throttle } from 'rxjs/operators';
    const clicks = fromEvent(document, 'click');
    const result = clicks.pipe(throttleTime(1000));
    // const result = clicks.pipe(throttle(ev => interval(1000)));
    result.subscribe(x => console.log(x));

    // --- finalize - returns an Observable that mirrors the source Observable,
    // but will call a specified function
    // when the source terminates on complete or error.
    // extend server response observable with logging:
    return next.handle(req).pipe(
      tap(
        // Succeeds when there is a response; ignore other events
        event => ok = event instanceof HttpResponse ? 'succeeded' : '',
        // Operation failed; error is an HttpErrorResponse
        error => ok = 'failed'
      ),
      // Log when response observable either completes or errors
      finalize(() => {
        const elapsed = Date.now() - started;
        const msg = `${req.method} "${req.urlWithParams}"
            ${ok} in ${elapsed} ms.`;
        this.messenger.add(msg);
      })
    );