Angular CLI

Das Kommandozeilenwerkzeug ng für Angular. Es erzeugt Arbeitsbereiche, Anwendungen und Bausteine, startet den Entwicklungsserver, baut, testet und aktualisiert Projekte samt automatischer Code-Migration.

Code und Befehle stammen aus Quelle - Angular Mastery Workshop (Folie 93–118), von den Folienbildern abgeschrieben (Stand Angular 12).

Befehlsaufbau

ng <command> [options...]

# Beispiel: für Produktion bauen, Lizenzen in eigene Datei, Statistik erzeugen, kein Hash im Dateinamen
ng build --prod --extract-licenses --stats-json --output-hashing none
#  └ Befehl  └──── Boolesche Optionen ────────┘  └─ Aufzählungs-Option ─┘

(Folie 94)

Arbeitsbereich und Anwendung erzeugen

ng new my-workspace --create-application false    # leerer Arbeitsbereich
cd my-workspace
ng generate application my-app --prefix my-org --routing --style scss

(Folie 96)

Ein leerer Arbeitsbereich enthält angular.json, package.json, tsconfig.json, tslint.json, .editorconfig und README.md. Seine angular.json hat noch keine Projekte (Folie 98):

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {}
}

Mit Anwendung kommt projects/my-app/ dazu, darin src/ mit app/, assets/, environments/, index.html, main.ts, polyfills.ts, styles.scss und test.ts, dazu e2e/, karma.conf.js, tsconfig.app.json und tsconfig.spec.json (Folie 99).

Einstiegspunkt und AppModule

main.ts startet die Anwendung und schaltet im Produktionsmodus die Entwicklungsprüfungen ab (Folie 100):

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

if (environment.production) {
  enableProdMode();
}

platformBrowserDynamic()
  .bootstrapModule(AppModule)
  .catch(err => console.error(err));

app.module.ts legt die Startkomponente fest und importiert die sofort geladenen Module:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Starten, bauen, testen

ng serve -o          # baut und startet den Entwicklungsserver (Port 4200), öffnet den Browser
                     # Optionen: --port, --open (-o), --configuration prod
                     # oft als npm-Skript: "start": "ng serve -o"

ng build             # für Produktion bauen
                     # Optionen: --configuration dev, --source-map, --stats-json

ng test --browsers ChromeHeadless --watch false   # Tests einmal im Headless-Browser
ng lint              # TSLint bzw. ESLint, falls hinzugefügt
ng e2e               # E2E-Tests (Protractor, Cypress oder andere)
                     # oft als npm-Skript: "test": "ng lint && ng test --watch false"

(Folie 102–104)

Bundle-Analyse zeigt, was im Paket steckt und was lazy geladen wird, z.B. doppelte oder ungenutzte Bibliotheken (Folie 105):

ng build --stats-json && npx webpack-bundle-analyzer ./dist/my-app/stats.json

angular.json

Die Konfiguration des Arbeitsbereichs, mit einem Abschnitt pro Aufgabe (Folie 108):

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "my-app": {
      "projectType": "application",
      "schematics": { },
      "root": "projects/my-app",
      "sourceRoot": "projects/my-app/src",
      "prefix": "my-org",
      "architect": {
        "build":        { "builder": "@angular-devkit/build-angular:browser" },
        "serve":        { "builder": "@angular-devkit/build-angular:dev-server" },
        "extract-i18n": { "builder": "@angular-devkit/build-angular:extract-i18n" },
        "test":         { "builder": "@angular-devkit/build-angular:karma" },
        "lint":         { "builder": "@angular-devkit/build-angular:tslint" },
        "e2e":          { "builder": "@angular-devkit/build-angular:protractor" }
      }
    }
  },
  "defaultProject": "my-app"
}

• prefix ist das Präfix für Komponenten und Direktiven, z.B. <my-org-user>.
• defaultProject ist das Projekt, auf das alle Befehle standardmässig wirken. In Arbeitsbereichen mit mehreren Projekten braucht man sonst --project some-lib.

Budgets legen fest, wie gross die Pakete höchstens werden dürfen. Das wirkt wie ein Test gegen falsche Imports und schleichend wachsende Bibliotheken (Folie 109):

"architect": {
  "build": {
    "builder": "@angular-devkit/build-angular:browser",
    "options": { "outputPath": "dist/some-app" },
    "configurations": {
      "production": {
        "budgets": [
          { "type": "initial",           "maximumWarning": "2mb", "maximumError": "5mb" },
          { "type": "anyComponentStyle", "maximumWarning": "6kb", "maximumError": "10kb" }
        ]
      }
    }
  }
}

Schematics

Schematics erzeugen Dateien nach den Konventionen, statt dass man sie von Hand anlegt (Folie 111–115):

ng g                         # Liste aller Schematics und Optionen
ng g <schematic> --help      # Optionen eines Schematics
ng g component foo --dry-run # zeigen, was entstehen würde, ohne zu schreiben

Allgemeine Optionen: --defaults, --dry-run (-d), --force (-f), --help, --interactive. Verfügbare Schematics in @schematics/angular: appShell, application, class, component, directive, enum, guard, interface, library, module, pipe, service, serviceWorker, universal, webWorker.

Voreinstellungen pro Projekt oder für den ganzen Arbeitsbereich in angular.json:

{
  "projects": {
    "my-app": {
      "@schematics/angular:component": {
        "style": "scss",
        "inlineTemplate": true
      }
    }
  },
  "schematics": {
    "@schematics/angular:component": {
      "style": "scss",
      "inlineTemplate": true
    }
  }
}

Prettier

Prettier ist kein Teil der CLI, wird aber empfohlen: ein Formatierer mit festen Regeln für TypeScript, HTML und CSS/SCSS, der jede Diskussion über Code-Stil beendet. Wenig Einstellmöglichkeiten gelten dabei als Vorteil. Das Beispiel (Folie 117) formatiert einen Service mit gemischten Anführungszeichen und schiefer Einrückung so:

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable, ReplaySubject } from 'rxjs';
import { switchMap, shareReplay } from 'rxjs/operators';

const RESOURCE = '/users';

@Injectable({
    providedIn: 'root'
})
export class UserService {
    loadTrigger = new ReplaySubject<void>(1);

    users: Observable<User[]>;

    constructor(private httpClient: HttpClient) {
        this.users = this.loadTrigger.pipe(
            switchMap(() => this.httpClient.get<User[]>(RESOURCE)),
            shareReplay(1)
        );
    }

    loadUsers() {
        this.loadTrigger.next();
    }
}

export interface User {
    username: string;
}

Verwandt

• Angular – das Framework
• Angular-Architektur – was die CLI erzeugt
• Softwaretest – Test-Befehle
• TypeScript – tsconfig.json