Eckige CLI-Buildoptionen

Question

Ich liebe Angular CLI und verwende es für alle meine Angular-Projekte. Aber hin und wieder stoße ich auf einen Anwendungsfall, bei dem die ungeheuer schlechten offiziellen Dokumente nicht helfen. Also auf die Gefahr der Bündelung zu viel in eine Frage, hier sind meine dringendsten Fragen:

1. Wie konfiguriert man Build-Ziele und wofür werden sie verwendet? Die offiziellen Dokumente sagen Ihnen, wie Sie sie spezifizieren und zwischen Build Ziele und bauen Umgebungen unterscheiden, aber überlassen Sie den Rest Ihrer Fantasie. Ich denke, es bestimmt ein paar Flag-Werte und unflaggables (neues Wort) wie UglifyJS.
2. ng build --app "Gibt den zu verwendenden App-Namen oder Index an." Dieser kleine Satz ist die Summe aller Unterlagen. Ich habe einen Fall, wo es praktisch wäre, einen index.html für eine Umgebung und einen anderen index.html für einen anderen zu haben. Ich dachte, das könnte es sein, aber es scheint nicht. Weiß jemand, wie man das benutzt oder eine andere index.html bedingt liefert?
3. Ich habe zwei zusätzliche Umgebungen konfiguriert und kann diese Werte zur Laufzeit lesen. Fabelhaft. Ich möchte ein zusätzliches Skript zur Bereitstellung für meine zusätzlichen Umgebungen hinzufügen. So ist die normale dev und prod wirkt wie immer, aber devextra und prodextra setzen eine zusätzliche Datei (ein bisschen wie bedingt Zugabe von etwas scripts in .angular-cli.json.

Punkte 2 & 3 sind für die Integration mit anderen Tool aus. Meine jetzige Abhilfe eine manuelle Bearbeitung von index.html ist.

Answer 1

ich habe eine gute Antwort für Artikel 2 & 3. Die Nummer eins ist immer noch ein Rätsel gefunden.

Hier ist ein Beispiel .angular-cli.json zeigt wie es zu tun:

{ 
    "$schema": "./node_modules/@angular/cli/lib/config/schema.json", 
    "project": { 
    "name": "project-name" 
    }, 
    "apps": [ 
    { 
     "root": "src", 
     "outDir": "dist", 
     "assets": [ 
     "assets", 
     "favicon.ico" 
     ], 
     "index": "index.html", 
     "main": "main.ts", 
     "polyfills": "polyfills.ts", 
     "test": "test.ts", 
     "tsconfig": "tsconfig.app.json", 
     "testTsconfig": "tsconfig.spec.json", 
     "prefix": "app", 
     "styles": [ 
     "styles.scss" 
     ], 
     "scripts": [ 
     "somescript.js" 
     ], 
     "environmentSource": "environments/environment.ts", 
     "environments": { 
     "dev": "environments/environment.ts", 
     "prod": "environments/environment.prod.ts" 
     } 
    }, { 
     "root": "src", 
     "outDir": "../completely/different/folder", 
     "assets": [ 
     "assets", 
     "favicon.ico" 
     ], 
     "index": "otherindex.html", 
     "main": "main.ts", 
     "polyfills": "polyfills.ts", 
     "test": "test.ts", 
     "tsconfig": "tsconfig.app.json", 
     "testTsconfig": "tsconfig.spec.json", 
     "prefix": "app", 
     "styles": [ 
     "styles.scss" 
     ], 
     "scripts": [ 
     "somescript.js" 
     ], 
     "environmentSource": "environments/environment.ts", 
     "environments": { 
     "dev": "environments/environment.extra.dev.ts", 
     "prod": "environments/environment.extra.prod.ts" 
     } 
    } 
    ], 
    /* These are empty for brevity */ 
    "e2e": {}, 
    "lint": [], 
    "test": {}, 
    "defaults": {} 
} 

Also das ist ein bisschen zu groß und das meiste davon ist doppelt vorhanden, so lassen Sie mich Ihnen eine Tour geben.

1. Das Array apps enthält tatsächlich zwei Objekte. Normalerweise gibt es nur einen und ich bin nicht sicher, ob mehrere App-Unterstützung hinzugefügt wurde, aber das ist, was die --app-Befehlszeile ist. So verwendet ng build --app 0 das erste Objekt zur Konfiguration und ng build --app 1 verwendet das zweite Objekt. Das Gleiche gilt für ng serve.
2. Ich konnte einen anderen Ausgabepfad, eine andere index.html und sogar eine völlig andere Reihe von environment Dateien zur Verfügung stellen. Beachten Sie auch, dass die beiden Konfigurationen zwei unterschiedliche (und absolut glaubwürdige) Skriptdateien bereitstellen. Es gibt tatsächlich so viel, dass du hier variieren kannst, es ist beeindruckend.

Einige gotchas:

1. mit environmentSource Verwirren Sie nicht. Es scheint dann nur die dev Umgebung von der ersten Konfiguration standardmäßig zu sein.
2. Ein paar Flaggen scheinen nicht so gut zu funktionieren. Ich denke deployUrl funktioniert nur auf der Kommandozeile und baseUrl kann überhaupt nicht in der Konfiguration angegeben werden. Es könnte andere geben.
3. Während sie Ihnen erlauben, root zu ändern, kann ich wirklich nicht sehen, warum Sie nicht gerade eine völlig andere Anwendung machen würden. Es ist wahrscheinlich nicht klug, dies über seine Design-Hülle hinaus zu strecken.

Mein aktuelles Denken ist, dass ich ein einziges .angular-cli.json mit mehreren Konfigurationen verwenden werde, und dann Batch-Dateien erstellen, um meine ng build/serve Anrufe zu wickeln.