comment changer le chemin du dossier dist dans angular-cli après 'ng build'


112

Je voudrais utiliser angular-cli avec asp.net core et j'ai besoin de savoir comment je peux changer le chemin du dossier dist

Réponses:


74

Vous pouvez mettre à jour le dossier de sortie dans .angular-cli.json:

"outDir": "./location/toYour/dist"

14
Est-il possible de mettre index.html dans ./location/toYour/dist et les bundles javascript dans un sous-dossier, par exemple ./location/toYour/dist/bundles
Naveed Ahmed

1
Quelqu'un connaît-il des mises à jour sur la personnalisation de outDir? css / ts / dans des chemins séparés
fidev

190

La méthode la plus courante consiste à mettre à jour la outDirpropriété dans .angular-cli.json.

L' ng buildargument de commande --output-path(ou -oppour faire court) est toujours pris en charge également, ce qui peut être utile si vous voulez plusieurs valeurs, vous pouvez les enregistrer dans vos package.jsonscripts en tant que npm.

Attention: la .angular-cli.jsonpropriété n'est PAS appelée output-pathcomme le réponse actuellement acceptée par @ cwill747 . C'est l' ng buildargument seulement.

Il s'appelle outDircomme mentionné ci-dessus, et c'est sous leapps propriété.

.

PS

(Décembre 2017)

Un an après avoir ajouté cette réponse , quelqu'un a ajouté une nouvelle réponse avec essentiellement les mêmes informations, et l'affiche originale a changé la réponse acceptée en réponse tardive d'un an contenant les mêmes informations dans la première ligne de celle-ci.


3
Est-il possible de mettre index.html dans ./location/toYour/dist et les bundles JavaScript dans un sous-dossier, par exemple ./location/toYour/dist/bundles
Naveed Ahmed

10
: D le PS est amer
Sunil Kumar

4
meilleur PS que j'ai vu ici
Frenkey

il fait probablement la promotion de son ami ici, c'est une corruption
Alexander Borovoi

69

Pour Angular 6+, les choses ont un peu changé.

Définir où ng build génère les fichiers d'application

La configuration de Cli est maintenant effectuée dans angular.json (remplacé .angular-cli.json) dans le répertoire racine de votre espace de travail. Le chemin de sortie dans angular.json par défaut devrait ressembler à ceci (lignes non pertinentes supprimées):

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

Évidemment, cela générera votre application dans WORKSPACE / dist / my-app-name. Modifiez outputPath si vous préférez un autre répertoire.

Vous pouvez écraser le chemin de sortie en utilisant des arguments de ligne de commande (par exemple pour les travaux CI):

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

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

Hébergement de l'application angulaire dans le sous-répertoire

La définition du chemin de sortie indiquera à angular où placer les fichiers «compilés» mais quel que soit le mode de sortie, lors de l'exécution de l'application, angular supposera toujours que l'application est hébergée dans la racine du document du serveur Web.

Pour le faire fonctionner dans un sous-répertoire, vous devrez définir le href de base.

Dans angular.json:

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

Cli:

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

Si vous ne savez pas où l'application sera hébergée au moment de la construction, vous pouvez modifier la balise de base dans le fichier index.html généré.

Voici un exemple comment nous le faisons dans notre conteneur Docker:

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


17

La seule chose qui a fonctionné pour moi était de changer les outDirdeux angular-cli.jsonET src/tsconfig.json.

Je voulais mon dossier dist en dehors du dossier de projet angulaire. Si je ne modifiais pas également le paramètre src/tsconfig.json, Angular CLI jetterait des avertissements chaque fois que je construisais le projet.

Voici les lignes les plus importantes ...

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

Et ...

// tsconfig.json
{
  "compilerOptions": {
    "outDir": "../../dist/out-tsc",
    ...
  }
}

2
Impressionnant! Mettre à jour pour cli 7x, ce qui précède est effectué dans angular.jsonet le champ est outputPath(l' tsconfig ajustement ci-dessus reste le même). Hth
EdSF

17

Attention: la bonne réponse est ci-dessous. Cela ne fonctionne plus

Créez un fichier appelé .ember-clidans votre projet et incluez-y ce contenu:

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

9

Angular CLI utilise désormais des fichiers d'environnement pour ce faire.

Tout d'abord, ajoutez une environmentssection à laangular-cli.json

Quelque chose comme :

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

Et puis dans le fichier d'environnement ( environments/environment.prod.tsdans ce cas), ajoutez quelque chose comme:

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

maintenant quand tu cours:

ng build --prod

il sortira dans le ./whatever/dist/dossier.


1
Cela semble être la meilleure réponse, mais Angular CLI publie toujours mes fichiers dans le dossier dist. Version:angular-cli: 1.0.0-beta.21
NinjaFart

Depuis le Wiki CLI angulaire : outDir (string): Le répertoire de sortie pour les résultats de construction. La valeur par défaut est dist /.
hbthanki

@hbthanki Thats the cli switch, not the environment file json property
swestner

9

pour les pages github que j'utilise

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

Voici ce qui copie la sortie dans le dossier docs: --output-path=docs


2

Une autre option serait de définir le chemin webroot vers le dossier angular cli dist. Dans votre Program.cs lors de la configuration de WebHostBuilder, dites simplement

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

ou quel que soit le chemin vers votre répertoire dist.

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.