Understanding and properly utilizing enableProdMode with pure and impure pipes

Create a nonsensical pipe, namely AddRandomPipe:

[src/app/add-random.pipe.ts]      import {Pipe, PipeTransform} from '@angular/core';      @Pipe({     name: 'addRandomPipe'   })   export class AddRandomPipe implements PipeTransform {     transform(value:string):string {       return value + Math.random();     }   }   

Next, take this pipe and introduce it to your component:

[src/app/app.component.ts]      import {Component} from '@angular/core';   import {AddRandomPipe} from './add-random.pipe';      @Component({     selector: 'app-root',     template: `       <input #t>       <button (click)="update(t.value)">Save</button>       <h1>{{ title | addRandomPipe }}</h1>     `   })   export class AppComponent {     title:string = '';        update(newTitle:string) {       this.title = newTitle;     }   }   

This won't create an error yet, though.

In order to get Angular to evaluate the pipe during each change detection cycle, specify the pipe as "impure":

[src/app/add-random.pipe.ts]      import {Pipe, PipeTransform} from '@angular/core';      @Pipe({     name: 'addRandomPipe',     pure: false   })   export class AddRandomPipe implements PipeTransform {     transform(value:string):string {       return value + Math.random();     }   }   

Now the fun begins. When you run the application, you should see something similar to the following error message:

 EXCEPTION: Error in ./AppComponent class AppComponent - inline template:3:8 caused by: Expression has changed after it was checked. Previous value: '0.0495151713435904'. Current value: '0.9266277919907477'.    

The error is being thrown as soon as the application starts up, before you're even given a chance to press the button. This means that Angular is detecting the binding mismatch as the component is being instantiated and rendered for the first time.

At this point, you've managed to get Angular to throw a consistency error, which it does because it's running change detection checks twice and getting different results. Switching on enableProdMode at this point would stop the error since Angular would then only run change detection once and not bother to check for consistency. This is because it trusts you to have verified compliance before using enableProdMode. Turning on enableProdMode to mask consistency error messages is a bit like coming home to find your house is on fire and then deciding to go on a vacation.

Angular allows you to control this by specifying the change detection strategy for the component. The default is to always perform a change detection check, but this can be overridden with the OnPush configuration:

[src/app/app.component.ts]      import {Component, ChangeDetectionStrategy }      from '@angular/core';   import {AddRandomPipe} from './add-random.pipe';      @Component({     selector: 'app-root',     template: `       <input #t>       <button (click)="update(t.value)">Save</button>       <h1>{{ title | addRandomPipe }}</h1>     `,     changeDetection: ChangeDetectionStrategy.OnPush   })   export class AppComponent {     title:string = '';        update(newTitle:string) {       this.title = newTitle;     }   }   

Now when the component instance is initialized, you should no longer see the consistency error.

Since your application is now compliant with Angular's change detection mechanism, you're free to use enableProdMode. This lets your application run change detection once each time. This is because it assumes the application will arrive in a stable state.

In your application's bootstrapping file, invoke enableProdMode before you start bootstrapping:

[src/main.ts]      import {platformBrowserDynamic}      from '@angular/platform-browser-dynamic';   import {enableProdMode} from '@angular/core';   import {AppModule} from './app/';      enableProdMode();      platformBrowserDynamic().bootstrapModule(AppModule);