Seite 2: Die Eigenschaft preserveWhitespaces

Inhaltsverzeichnis

Alle unnötigen Tabs, Leerzeichen und Zeilenumbrüche der HTML-Templates hat die Ausgabe des Build-Prozesses bisher standardmäßig übernommen. Das führt zu mehr Platzverbrauch und damit zu größeren Ausgabedateien. Mit Angular 5 versteht der @Component-Decorator von Angular eine neue Eigenschaft: preserveWhitespaces, die standardmäßig eingeschaltet ist. womit das aktuelle Verhalten bestehen bleibt. Möchte man das nicht, setzt man die Option auf false.

@Component({
  selector: 'app-component',
  templateUrl: 'some.component.html',
  preserveWhitespaces: false
})
export class SomeComponent {}

Alternativ kann man die Option für alle Komponenten einschalten. Dazu hinterlegt man src/tsconfig.json im folgenden Eintrag:

{
  "extends": "../tsconfig.json",
  "compilerOptions": {...},
  "angularCompilerOptions": {
  "preserviceWhitespaces": false
  }  
}

Komponentenbasierte Einstellungen können die globale Einstellung weiterhin überschreiben. In Zukunft kann es sein, dass die Einstellung per Standard auf false gesetzt ist, sodass man ohne weiteres Zutun Speicherplatz spart. HTML-Elemente wie <pre> oder <textarea> sind von der Option nicht betroffen, da innerhalb der Tags der Whitespace explizit gewünscht ist.

Zusätzlich bietet Angular die Direktive ngPreserveWhitespaces an. Sie gibt an, dass innerhalb ihres DOMs der Whitespace bestehen bleibt.

<div ngPreserveWhitespaces>
  Dieser    Whitespace       
         wird nicht      entfernt.
</div>

Möchte man innerhalb eines Textabschnitts Whitespace einfügen, der bestehen bleibt, kann man die Pseudoentität &ngsp; nutzen. Der Angular Compiler übersetzt sie in ein ganz normales Leerzeichen. Aber Achtung: Die Option preserveWhitespaces: false kompiliert aufeinanderfolgende &ngsp; dennoch zu einem einzigen Leerzeichen.

<span>Leerzeichen</span>&ngsp;<span>zwischen</span>&ngsp;<span>spans.</span>

Lambda-Unterstützung in Decorators

Vor Angular 5 benötigten Dekoratoren, die useFactory oder useValue benutzen, eine benannte exportierte Funktion:

export function someTokenFactory(): SOME_TOKEN {
  return null;
}

@NgModule({
  providers: [
  { provide: SOME_TOKEN, useFactory: someTokenFactory }
  ]
})
export class AppModule {}

Mit Angular 5 kann man Lambda-Ausdrücke verwenden, die den Code etwas verschlanken, aber auch Werte bereitstellen können, die erst zur Laufzeit bekannt sind.

@NgModule({
  providers: [
  { provide: SOME_TOKEN, useFactory: () => SomeEnum.Value }
  ]
})
export class AppModule {}

Entfall des i18n-Polyfills

Angular bietet Pipes zur Formatierung von Nummern, Daten und Währungen an. Die Pipes haben hierfür die neue Intl-API implementiert, die allerdings noch nicht in jedem Browser zur Verfügung steht. Hat man die Pipes in einem Browser benutzt, der das API noch nicht unterstützt, war das Nachladen eines Polyfill notwendig, der unter Umständen mehrere 100 kB groß sein kann. Je nach Browser haben die Pipes daher unterschiedliche Ergebnisse geliefert.

Mit Angular 5 entschloss das Team, neue Pipes zu entwickeln, die nicht auf das Browser-API angewiesen sind, aber auf dem Unicode Common Locale Data Repository (CLDR) aufbauen. Das Angular Team hat hierfür eine umfangreiche Übersicht vorbereitet, die die genauen Änderungen zwischen den Pipes von Version 4 und Version 5 aufzeigt. Möchte man dennoch die alten Pipes weiter benutzen, kann man das DeprecatedI18NPipesModule laden.