{
  "$schema": "./node_modules/@angular/service-worker/config/schema.json",
  "index": "/index.html",
  "assetGroups": [
    {
      "name": "app",
      "installMode": "prefetch",
      "resources": {
        "files": [
          "/favicon.ico",
          "/index.html",
          "/manifest.webmanifest",
          "/*.css",
          "/*.js"
        ]
      }
    },
    {
      "name": "assets",
      "installMode": "lazy",
      "updateMode": "prefetch",
      "resources": {
        "files": [
          "/assets/**",
          "/*.(eot|svg|cur|jpg|png|webp|gif|otf|ttf|woff|woff2|ani)"
        ]
      }
    }
  ]
}

{
  "$schema": "./node_modules/@angular/service-worker/config/schema.json",
  "index": "/index.html",
  "assetGroups": [
    ...
    {
    "name": "externals",
    "installMode": "lazy",
    "updateMode": "lazy",
    "resources": {
        "urls": ["https://angular.io/assets/images/logos/angular/angular.svg"]
    }
    }
    ...
  ]
}

export interface DataGroup {
  name: string;
  urls: string[];
  version?: number;
  cacheConfig: {
    maxSize: number;
    maxAge: string;
    timeout?: string;
    strategy?: 'freshness' | 'performance';
  };
  cacheQueryOptions?: {
    ignoreSearch?: boolean;
  };
}

strategy: 'freshness' | 'performance';

"dataGroups": [
    {
        "name": "random.org",
        "urls": ["https://api.random.org/**"],
        "cacheConfig": {
            "maxSize": 20,
            "maxAge": "7d",
            "strategy": "freshness"
        }
    }
]

// zone.js simplified
const oldSetTimeout = setTimeout;
setTimeout = (handler, timer) => {
  console.log('START');
  oldSetTimeout(_ => {
    handler();
    console.log('FINISH');
  }, timer);
}


//--------------------------------

setTimeout(_ => {
  console.log('some action');
}, 3000);

// packages/core/src/application_ref.ts#L601
// ApplicationRef simplified

this._zone.onMicrotaskEmpty.subscribe({
    next: () => {
        this._zone.run(() => {
          this.tick();
        });
    }
});


tick() {
     for (let view of this._views) {
        view.detectChanges();
     }
}

<script>
    __Zone_disable_timers = true; // setTimeout/setInterval/setImmediate
    __Zone_disable_XHR = true; // XMLHttpRequest
    __Zone_disable_Error = true; // Error
    __Zone_disable_on_property = true; // onProperty such as button.onclick
    __Zone_disable_geolocation = true; // geolocation API
    __Zone_disable_toString = true; // Function.prototype.toString
    __Zone_disable_blocking = true; // alert/prompt/confirm
</script>

@Component({
  template: '<user-card [data]="data"></user-card>'
})
class MyApp {

  constructor() {
    this.data = {
      name: 'Jack',
      email: 'jack@mail.com'
    }
  }

  changeData() {
    this.data.name = 'John';
  }
}

@Component({
  template: '<user-card [data]="data"></user-card>'
})
class MyApp {

  constructor() {
    this.data = {
      name:  'Jack',
      email: 'jack@mail.com'
    }
  }

  changeData() {
    this.data = {...this.data, name: John};
  }
}

@Component({
  template: `<h1>{{data.name}}</h1>
             <span>{{data.email}}</span>`
})
class UserCardComponent {
  
  @Input() data;
}

@Component({
  template: `<h1>{{data.name}}</h1>
             <span>{{data.email}}</span>`,
  changeDetection: ChangeDetectionStrategy.OnPush
})
class UserCardComponent {
  
  @Input() data;
}

@Component({
  template: `<h1>{{data.name}}</h1>
             <span>{{data.email}}</span>`,
  changeDetection: ChangeDetectionStrategy.OnPush
})
class UserCardComponent {
  
  @Input() data;
  
  contructor(dataService: DataService) {
    dataService.onChange.subscribe(data => {
      this.data = data;
    });
  }
}

@Component({
  template: `<h1>{{data.name}}</h1>
             <span>{{data.email}}</span>`,
  changeDetection: ChangeDetectionStrategy.OnPush
})
class UserCardComponent {
  
  @Input() data;
  
  contructor(dataService: DataService, 
              cd: ChangeDetectorRef) {
    dataService.onChange.subscribe(data => {
      this.data = data;
      cd.markForCheck();
    });
  }
}

@Component({
  ...
})
class UserCardComponent {
  
  contructor(cd: ChangeDetectorRef) {

      cd.detach();
      // start of a heavy operation 
      // for which we want to skip CD 
      // ... 
      // ...
      cd.reattach(); 
  }
}

@Pipe({
  name: 'mypipe',
  pure: false/true        <----- here (default is `true`)
})
export class MyPipe {
  
}

function sum(a, b) {
  return a + b;
};

sum(1, 1);  // 2
sum(1, 1);  // 2
sum(1, 1);  // 2



let state = 0;
function changeState(v) {
  return state += v;
}

changeState(1);  // 1
changeState(1);  // 2
changeState(1);  // 3

const worker = new Worker(`./my-worker.worker`, 
                          { type: `module` });

worker.onmessage = ({ data }) => {
   console.log(`page got message: ${data}`);
};
worker.postMessage('hello');