Comment inclure des fichiers personnalisés avec la construction angular-cli?

RE: Angular2 2.0.0, angular-cli v1.0.0-beta.11-webpack.8

Comment puis-je dire à angular-cli d'inclure un fichier de "src / assets" à la racine de "dist" lors de sa construction?

Nous déployons sur un hôte Windows et devons inclure un fichier "web.config" pour indiquer à IIS de tout acheminer vers l'index. Nous faisions ce pré RC4, mais avec toutes les mises à jour, il est tombé entre les mailles du filet (je ne me souviens pas comment nous l'avons fait).

J'ai parcouru la documentation du repo GitHub et je n'ai rien trouvé d'utile à ce sujet. Peut-être que je suis au mauvais endroit?

Dans la ToC , il y a une puce "Ajout de fichiers supplémentaires à la construction", mais il semble que cette section n'existe pas.

La propriété "assets" de angular-cli.json peut être configurée pour inclure des fichiers personnalisés dans la construction angular-cli webpack. Alors, configurez la valeur de la propriété "assets" comme un tableau. Par exemple:

"assets": ["assets", "config.json",".htaccess"],

la configuration ci-dessus copiera config.jsn et .htaccess dans le dossier dist pendant la construction du webpack angular-cli. le paramètre ci-dessus a fonctionné dans la version angular-cli 1.0.0-beta.18

Réponse correcte actuelle:

L'équipe a ajouté la prise en charge de la copie de fichiers spécifiques tels quels dans le dossier de sortie ( distpar défaut) dans une version ultérieure de Angular CLI (serait la version bêta 17 ou 19 - elle est dans les versions finales 1.x depuis des lustres).

Vous l'ajoutez simplement au tableau angular-cli.jsoncomme suit:

{
  ...
  "applications" [
    {
       "root": "src",
       "les atouts": [
         "les atouts",
         "web.config"
       ],
       ...
    }
  ]
  ...
}

(Notez que le chemin est relatif au srcdossier)

Je l'utilise personnellement et cela fonctionne très bien.

Depuis la version bêta 24, j'ai ajouté une fonctionnalité à Angular CLI qui garantit que tous les assetsfichiers et dossiers sont servis à partir du serveur de développement Webpack lors de l'exécution ng testnon seulement ng serve.

Il prend également en charge le service des fichiers d'actifs dans le serveur de développement Webpack utilisé pour les tests unitaires ( ng test).
(au cas où vous auriez besoin de fichiers JSON pour les tests, ou si vous détestez simplement voir 404 avertissements dans la console).
Ils sont déjà servis ng e2ecar il est plein ng serve.

Et il a également des fonctionnalités plus avancées, comme le filtrage des fichiers que vous voulez dans un dossier et le fait que le nom du dossier de sortie soit différent du dossier source:

{
  ...
  "applications" [
    {
      "root": "src",
      "les atouts": [
        "les atouts",
        "web.config":
        {
          // Copier le contenu de ce dossier
          "contribution": "../",
          // Cela correspond à ce caractère générique
          "glob": "* .config",
          // Et les mettre dans ce dossier sous `dist` ('.' Signifie le mettre directement dans` dist`)
          "production": "."
        }
      ],
      ...
    }
  ]
  ...
}

Vous pouvez également vous référer à la documentation officielle: Guide Angular - Configuration de l'espace de travail .

.

[POUR ARCHIVAGE UNIQUEMENT] Réponse originale (6 octobre 2016):

Ceci n'est malheureusement pas pris en charge actuellement (à partir de la version bêta-16). J'ai soulevé l'inquiétude exacte à l'équipe (fichiers web.config), mais cela ne semble pas se produire de si tôt (à moins que vous ne fassiez passer la CLI, etc.).

Suivez ce numéro pour une discussion complète et les éventuels détails futurs.

Pour le fichier JSON, vous pouvez le placer ./src/assets/. Ce dossier est copié tel quel ./dist/assets/. C'est le comportement actuel.

Plus tôt dans les jours de systemJS, il y avait un autre ./public/dossier qui était copié ./dist/directement, mais il a disparu dans les versions Webpack, dont le problème mentionné ci-dessus traite.

Une solution (même si à mon avis est un peu un hack) est de déclarer une variable dans votre main.tsfichier qui nécessite le fichier supplémentaire que vous souhaitez inclure dans la sortie de construction du webpack.

EX:

import './polyfills.ts';

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { environment } from './environments/environment';
import { AppModule } from './app/';

/* HACK: Include standalone web.config file manually in webpack build
 *
 * Due to the way the beta angular-cli abstracts the webpack config files into
 * angular-cli.json and lacks current documentation we were unable to find
 * a way to include additional files manually in the webpack build output.
 *
 * For hosting on IIS we need to include a web.config file for
 * specifying rewrite rules to make IIS compatible with the Angular Router.
 * The one liner following this comment is a hack to accomplish this
 * and should be reviewed and corrected as soon as adequete documentation
 * is available for the angular-cli configuration file.
 */
const webConfig = require('file?name=[name].[ext]!./web.config');

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

platformBrowserDynamic().bootstrapModule(AppModule);

Lorsque webpack rencontre cette instruction de déclaration de variable, main.tsil émet le web.configfichier brut dans le cadre de la sortie de construction:

                            Asset       Size  Chunks             Chunk Names
                       inline.map    5.59 kB       2  [emitted]  inline
                       web.config  684 bytes          [emitted]
                 styles.bundle.js    16.7 kB    1, 2  [emitted]  styles
                        inline.js    5.53 kB       2  [emitted]  inline
                         main.map    5.36 MB    0, 2  [emitted]  main
                       styles.map    22.6 kB    1, 2  [emitted]  styles
                   main.bundle.js    4.85 MB    0, 2  [emitted]  main
                       index.html    1.98 kB          [emitted]
                assets/.npmignore    0 bytes          [emitted]
         assets/styles/global.css    2.74 kB          [emitted]
Child html-webpack-plugin for "index.html":
         Asset     Size  Chunks       Chunk Names
    index.html  4.45 kB       0
webpack: bundle is now VALID.

Une solution idéale serait dans la configuration du webpack, mais je ne peux pas comprendre comment angular-cli gère cela angular-cli.jsonpour le moment (beta.16).

Donc, si quelqu'un a une meilleure réponse qui étend la configuration du webpack pour un projet généré par angular-cli, j'aimerais l'entendre.

Pour les lecteurs Angular 8 ,

.htaccessdoit être src/.htaccess. Voir ci-dessous,

 "assets": [
    "src/favicon.ico",
     "src/assets",
     "src/.htaccess"
  ],

Assurez-vous que vous avez placé le .htaccessfichier dans le srcrépertoire de votre projet.

et le fichier dans lequel mettre cela n'est angular.jsonpas leangular-cli.json

(Si vous avez besoin d'un htaccessfichier valide , vous pouvez en trouver un ici - https://stackoverflow.com/a/57126352/767625 )

C'est tout. Cela devrait maintenant être copié lorsque vous frappez ng build --prod=true.

J'espère que cela aide quelqu'un.

À votre santé,

Il existe une section "scripts" dans le fichier angular-cli.json. Vous pouvez y ajouter tous les fichiers javascript tiers.

Dans mon cas, j'ai utilisé la version Angular 5 , j'ai donc essayé de créer un fichier appelé Staticfile.txt lors de l'exécution de la commande ng build --prod. assurez-vous de donner l'extension de fichier, sinon il ne créera pas le fichier.

Modifiez angular.json.
Ajouter une entrée au tableau des actifs:

{
  "glob": "**/web.config",
  "input": "src/",
  "output": "./"
}