Kategorie: Tipps

Google Analytics in eine Angular App einbinden

Um Google Analytics in eine Angular App einzubinden muss man genau zwei Dinge tun:

  • Den Google Analytics Code im body-Bereich der index.html Datei einbinden UND die Zeile ga(’send‘, ‚pageview‘); herauslöschen (diese muss manuell gesendet werden)
  • In der root-Komponente auf Änderungen im Router lauschen um dann entsprechend ga(’send‘, ‚pageview‘); aufzurufen

Lauschen auf Änderungen im Router:

    ngOnInit() {
        this.routerEventSubscriber = this.router.events.subscribe((event) => {
            if (!(event instanceof NavigationEnd)) {
                return;
            }

            // Inform Google Analytics
            ga('set', 'page', event.urlAfterRedirects);
            ga('send', 'pageview');
        });
    }

    ngOnDestroy() {
        this.routerEventSubscriber.unsubscribe();
    }

[Update]
Wenn man die Analytics-Daten nur in der Produktiv-Umgebung abfeuern möchte, kann man das am besten über die environment-Variable machen:

if( environment.production === true ) {
// Inform Google Analytics
ga('set', 'page', event.urlAfterRedirects);
ga('send', 'pageview');
}
[/Update]

Cookie-Banner Komponente

Ab Mai 2018 wird ein Cookie-Banner Pflicht. Wer diesen jetzt schon bei sich anzeigen möchte, kann auf die Cookie-Law Komponente für Angular 2+ zurückgreifen. Damit kann extrem einfach ein Cookie-Banner erzeugt, gestaltet und angezeigt werden. Wer noch den passenden Text (und weitere Hintergrundinfos) benötigt, kann sich bei e-recht24.de schlau machen.

An den Anfang der Seite/Komponente springen

Das Laden von Komponenten in SPAs hat sehr viele Vorteile. Einer der wenigen Nachteile ist allerdings, dass man standardmässig nicht mehr an den Anfang der Seite springt, wenn man einen Link anklickt.

Mit einem einfachen Event-Subscriber direkt auf der Root-Komponente kann man dem allerdings entgegenwirken:

export class AppComponent implements OnInit, OnDestroy{
    private routerEventSubscriber: Subscription;

    constructor(private router: Router) {}

    ngOnInit() {
        this.routerEventSubscriber = this.router.events.subscribe((evt) => {
            if (!(evt instanceof NavigationEnd)) {
                return;
            }
            window.scrollTo(0, 0)
        });
    }

    ngOnDestroy() {
        this.routerEventSubscriber.unsubscribe();
    }

}

*.ngfactory.ts: Supplied parameters do not match any signature of call target.

Wer beim Bauen über die folgende Fehlermeldung stolpert hat irgendwo eine Methode aufgerufen, ohne die erforderlichen Parameter zu übergeben:

Problem: *.component.ngfactory.ts (xx,yy): Supplied parameters do not match any signature of call target.

Irrtümlicherweise z.B. bei der Angular-Methode ngOnChanges(), die in vielen Dokumentationen ohne Parameter angepriesen wird. Der korrekt, vollständige Aufruf sieht allerdings wie folgt aus:

ngOnChanges(changes: {[ propName: string]: SimpleChange}) { ... }

moment.js in Angular nutzen

Zum Arbeiten mit Daten in Angular (bzw. Javascript/Typescript allgemein) bietet sich moment.js an. Das kann direkt über npm installiert werden:

npm install moment --save

In der jeweiligen Komponente/Pipe/… kann es direkt eingebunden und normal benutzt werden:

import * as moment from 'moment/moment';

Wenn mit den deutschen Daten/Formaten gearbeitet werden soll, kann moment.js nach dem Einbinden dahingehend eingestellt werden: 

moment.locale("de)

Entfernen oder Leeren eines HTML-Elementes

Wenn ihr ein HTML-Element leeren oder direkt löschen wollt, kann das direkt im Template mit Hilfe der Referenz-Variable gemacht werden:

<div #myElement>
  Bald ist dieses Element weg
</div>

<!-- Element leeren -->
<button (click)="myElement.innerHTML = ''">Div leeren</button>

<!-- Element löschen -->
<button (click)="myElement.remove()">Div löschen</button>

7 äußerst nützliche Tools für die Arbeit mit Angular

Minko Gechev hat in seinem Blog 7 Tools zusammengestellt, die einem die Arbeit mit Angular mehr als erleichtern. Neben der bekannten Angular Cli stechen (m.M.n.) vorallem Tools wie ngrev, Augury, sowie Compodoc & ngd heraus, die einem die Visualisierung und Dokumentation einer Angular App extrem vereinfachen.

  • ngrev ist ein Tool für Reverse-Engineering von Angular Apps
  • Augury ist eine Extension für Entwickler zum Debuggen von Angular 2 Apps
  • compodoc/ngd lässt einen die Abhängigen einer Angular 2 App ansehen

Firebase: Werte auslesen ohne .subscribe()

Bei der Arbeit mit Firebase werden Werte i.d.R. via .subscribe() ausgelesen. Das hat allerdings den Nachteil, dass jedesmal die Zeilen innerhalb von .subscribe() neu ausgeführt werden, wenn sich die Werte in Firebase geändert haben.

Möchte man nur einmalig Werte auslesen, kann man bei der Definition des Observables mit der Funktion take() arbeiten.

Beispiel:

let myFirebaseObservable: Observable<any> = this.angularfireService.database.object('firebasenode').take(1);
myFirebaseObservable( snapshot => {
   console.log( snapshot.$value );
});