Angular Performance tips

detach-change-detector.ts

import {AfterViewInit, ChangeDetectorRef} from '@angular/core';
@Component(…)
class AppComponent implements AfterViewInit {

    constructor(private cdr: ChangeDetectorRef) {}
    ngAfterViewInit() {
        // We only want to detach the change detectors after change detection has been
        // performed for the first time
        this.cdr.detach();
    }

    update() {
        // Run change detection only for this component when update() method is called.
        this.cdr.detectChanges();
    }
}

enableProdMode.ts

import {enableProdMode} from '@angular/core';
if (ENV === 'production') {
    enableProdMode();
}

express-gzip.js

var compression = require('compression')
var express = require('express')
var app = express()
app.use(compression())

observable-share.ts

import {Injectable} from '@angular/core';
import {HttpClient} from '@angular/common/http';
import {Observable} from 'rxjs';
import {share} from 'rxjs/operators';
@Injectable()
export class AppService {
    data: Observable < any >;
    constructor(private http : HttpClient) {
        this.data = this.http.get<any> ('apiUrl').pipe(share());
    }
    getData() {
        return this.data;
    }
}

trackBy.ts

@Component({
    selector: 'app', 
    template: `<ul>
                    <li *ngFor="let item of items; trackBy: trackById">{{item.name}}</li>
               </ul>`
})
class AppComponent {
    Items = [
        {
            id: 1,
            name: 'item 1'
        }, {
            id: 2,
            name: 'item 2'
        },
        ...
    ];
    trackById(index, item) {
        return item.id;
    }
}