*.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 );
});

Automatische Erstellung URL-freundlicher Strings

Wer gerne on-the-fly URL-freundliche Strings erstellen möchte (aka „slugify„), der kann sich folgender Pipe bedienen:

/**
 * Create user friendly and URL valid name of the category name.
 * Source: https://gist.github.com/mathewbyrne/1280286
 */

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({name: 'slugify'})
export class SlugifyPipe implements PipeTransform {

  transform(value: any, args?: any): any {
    if( value == '' ) {
      return value;
    } else {
      return value.toString().toLowerCase()
          .replace(/\s+/g, '-')           // Replace spaces with -
          .replace(/[^\w\-]+/g, '')       // Remove all non-word chars
          .replace(/\-\-+/g, '-')         // Replace multiple - with single -
          .replace(/^-+/, '')             // Trim - from start of text
          .replace(/-+$/, ''); // Trim - from end of text
    }
  }
}

Das Original (=der JS-Aufruf) findet ihr hier: https://gist.github.com/mathewbyrne/1280286

[UPDATE]
Um deutsche Sonderzeichen zu beachten könnt ihr die Rückgabe wie folgt erweitern:

      return value.toString().toLowerCase()
          .replace(/ä/g, 'ae')             // Replace ä with ae
          .replace(/ö/g, 'oe')             // Replace ö with oe
          .replace(/ü/g, 'ue')             // Replace ü with ue
          .replace(/ß/g, 'ss')             // Replace ß with two s
          .replace(/\s+/g, '-')           // Replace spaces with -
          .replace(/[^\w\-]+/g, '')       // Remove all non-word chars
          .replace(/\-\-+/g, '-')         // Replace multiple - with single -
          .replace(/^-+/, '')             // Trim - from start of text
          .replace(/-+$/, ''); // Trim - from end of text

[/UPDATE]