wie man den dist-Ordnerpfad in angle-cli nach 'ng build' ändert

112

Ich möchte angular-cli mit asp.net core verwenden und muss wissen, wie ich den Pfad des dist- Ordners ändern kann

Tasse
quelle

Antworten:

73

Sie können den Ausgabeordner in .angular-cli.json aktualisieren:

"outDir": "./location/toYour/dist"
Shaun Braddridge
quelle
14
Ist es möglich, index.html in ./location/toYour/dist- und Javascript-Bundles in einem Unterordner abzulegen, z. B. ./location/toYour/dist/bundles
Naveed Ahmed
1
Kennt jemand Updates zum weiteren Anpassen des outDir? CSS / ts / in getrennten Pfaden
Fidev
190

Die aktuellere Methode besteht darin, die outDirEigenschaft in zu aktualisieren .angular-cli.json.

Das ng buildBefehlsargument --output-path(oder -opkurz) wird ebenfalls weiterhin unterstützt. Dies kann hilfreich sein, wenn Sie mehrere Werte möchten. Sie können diese in Ihren package.jsonals npm-Skripten speichern .

Achtung: Die .angular-cli.jsonEigenschaft wird NICHT so aufgerufen, output-pathwie es die derzeit akzeptierte Antwort von @ cwill747 sagt. Das ist nur das ng buildArgument.

Es heißt outDirwie oben erwähnt und befindet sich unter dem appsGrundstück.

.

PS

(Dezember 2017)

1 Jahr nach dem Hinzufügen dieser Antwort fügte jemand eine neue Antwort mit im Wesentlichen denselben Informationen hinzu, und das Originalposter änderte die akzeptierte Antwort in die 1 Jahr verspätete Antwort, die dieselben Informationen in der ersten Zeile dieser Antwort enthielt.

Meligy
quelle
3
Ist es möglich, index.html in ./location/toYour/dist- und JavaScript-Bundles in einem Unterordner abzulegen, z. B. ./location/toYour/dist/bundles
Naveed Ahmed
10
: D die PS ist bitter
Sunil Kumar
4
beste PS, die ich hier gesehen habe
Frenkey
Er wirbt wahrscheinlich für seinen Freund hier, dies ist eine Korruption
Alexander Borovoi
69

Für Angular 6+ haben sich die Dinge ein wenig geändert.

Definieren Sie, wo ng build App-Dateien generiert

Das Cli-Setup erfolgt jetzt in angle.json (ersetzt durch .angular-cli.json) in Ihrem Arbeitsbereich-Stammverzeichnis. Der Ausgabepfad in der Standardeinstellung angular.json sollte folgendermaßen aussehen (irrelevante Zeilen entfernt):

{
  "projects": {
    "my-app-name": {
    "architect": {
      "options": {
         "outputPath": "dist/my-app-name",

Dadurch wird Ihre App natürlich in WORKSPACE / dist / my-app-name generiert. Ändern Sie outputPath, wenn Sie ein anderes Verzeichnis bevorzugen.

Sie können den Ausgabepfad mithilfe von Befehlszeilenargumenten überschreiben (z. B. für CI-Jobs):

ng build -op dist/example
ng build --output-path=dist/example

Sa https://github.com/angular/angular-cli/wiki/build

Hosting Angular App im Unterverzeichnis

Wenn Sie den Ausgabepfad festlegen, wird Angular mitgeteilt, wo die "kompilierten" Dateien abgelegt werden sollen. Wenn Sie jedoch den Ausgabepfad ändern, wird Angular beim Ausführen der App weiterhin davon ausgehen, dass die App im Dokumentstamm des Webservers gehostet wird.

Damit es in einem Unterverzeichnis funktioniert, müssen Sie die Basis-HREF festlegen.

In angle.json:

{
  "projects": {
    "my-app-name": {
    "architect": {
      "options": {
         "baseHref": "/my-folder/",

Cli:

ng build --base-href=/my-folder/

Wenn Sie nicht wissen, wo die App zur Erstellungszeit gehostet wird, können Sie das Basistag in der generierten index.html ändern.

Hier ist ein Beispiel, wie wir es in unserem Docker-Container machen:

entrypoint.sh

if [ -n "${BASE_PATH}" ]
then
  files=( $(find . -name "index.html") )
  cp -n "${files[0]}" "${files[0]}.org"
  cp "${files[0]}.org" "${files[0]}"
  sed -i "s*<base href=\"/\">*<base href=\"${BASE_PATH}\">*g" "${files[0]}"
fi
Christoph Lütjen
quelle
46

Sie können die CLI auch wie folgt verwenden:

ng build -prod --output-path=production

# or

ng serve --output-path=devroot
Marian Zburlea
quelle
1
Ist es möglich, das Ausgabeverzeichnis in angle-cli.json zu überschreiben ?
Sergei
Es sieht so aus, als würde diese Funktion mit dieser Pull-Anfrage ausgeführt: github.com/angular/angular-cli/pull/1109
Daniel Patrick
17

Das einzige, was für mich funktioniert hat, war, mich outDirsowohl in angular-cli.jsonUND zu ändern src/tsconfig.json.

Ich wollte meinen dist-Ordner außerhalb des eckigen Projektordners haben. Wenn ich die Einstellung nicht auch ändern src/tsconfig.jsonwürde, würde Angular CLI beim Erstellen des Projekts Warnungen auslösen.

Hier sind die wichtigsten Zeilen ...

// angular-cli.json
{
  ...
  "apps": [
    {
      "outDir": "../dist",
      ...
    }
  ],
  ...
}

Und ...

// tsconfig.json
{
  "compilerOptions": {
    "outDir": "../../dist/out-tsc",
    ...
  }
}
NinjaFart
quelle
2
Genial! Update für cli 7x, das oben genannte ist in angular.jsonund das Feld ist outputPath( tsconfig Anpassung oben bleibt gleich). Hth
EdSF
17

Achtung: Die richtige Antwort finden Sie weiter unten. Das funktioniert nicht mehr

Erstellen Sie eine .ember-cliin Ihrem Projekt aufgerufene Datei und fügen Sie folgende Inhalte hinzu:

{
   "output-path": "./location/to/your/dist/"
}
cwill747
quelle
9

Angular CLI verwendet dazu jetzt Umgebungsdateien.

Fügen Sie zunächst einen environmentsAbschnitt zum hinzuangular-cli.json

Etwas wie :

{
  "apps": [{
      "environments": {
        "prod": "environments/environment.prod.ts"
      }
    }]
}

Fügen Sie dann in der Umgebungsdatei ( environments/environment.prod.tsin diesem Fall) Folgendes hinzu:

export const environment = {
  production: true,
  "output-path": "./whatever/dist/"
};

jetzt, wenn du rennst:

ng build --prod

Es wird in den ./whatever/dist/Ordner ausgegeben .

swestner
quelle
1
Sieht nach der besten Antwort aus, aber Angular CLI veröffentlicht meine Dateien immer noch im dist-Ordner. Version:angular-cli: 1.0.0-beta.21
NinjaFart
Aus dem Angular CLI- Wiki : outDir (Zeichenfolge): Das Ausgabeverzeichnis für die Build-Ergebnisse. Standard ist dist /.
Hbthanki
@hbthanki Das ist der CLI-Schalter, nicht die Eigenschaft json der Umgebungsdatei
Swestner
9

für Github-Seiten, die ich benutze

ng build --prod --base-href "https://<username>.github.io/<RepoName>/" --output-path=docs

Folgendes kopiert die Ausgabe in den Ordner docs: --output-path=docs

unos baghaii
quelle
2

Eine andere Möglichkeit wäre, den Webroot-Pfad zum Winkelcli dist-Ordner festzulegen. Sagen Sie in Ihrer Program.cs bei der Konfiguration des WebHostBuilder einfach

.UseWebRoot(Directory.GetCurrentDirectory() + "\\Frontend\\dist")

oder was auch immer der Weg zu Ihrem dist dir ist.

Christian Götze
quelle