Comment inclure des fichiers personnalisés avec le build d'angular-cli ?

Question

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

Comment indiquer à angular-cli d'inclure un fichier de "src/assets" dans le Root de "dist" lorsqu'il construit ?

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 cela avant RC4, mais avec toutes les mises à jour, c'est passé entre les mailles du filet (je ne me souviens plus comment nous avons fait).

J'ai parcouru le Documentation du dépôt GitHub et je n'ai rien trouvé d'utile en rapport avec ce sujet. Peut-être suis-je au mauvais endroit ?

Dans le ToC Il y a un point "Ajouter des fichiers supplémentaires à la construction", mais il semble que cette section n'existe pas.

Answer 1

La propriété "assets" de angular-cli.json peut être configurée pour inclure des fichiers personnalisés dans la construction de webpack angular-cli. Ainsi, 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 de webpack angular-cli. la configuration ci-dessus a fonctionné dans angular-cli version 1.0.0-beta.18

Answer 2

Courant Réponse correcte :

L'équipe a ajouté la possibilité de copier des fichiers spécifiques tels quels dans le dossier de sortie ( dist par défaut) dans une version ultérieure d'Angular CLI (il s'agirait de la bêta 17 ou 19 - il est présent dans les versions finales 1.x depuis longtemps).

Il suffit de l'ajouter au tableau dans angular-cli.json comme :

{
  ...
  "apps" \[
    {
       "root": "src",
       "assets": \[
         "assets",
         "web.config"
       \],
       ...
    }
  \]
  ...
}

(Notez que le chemin est relatif au src dossier)

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

Depuis la bêta 24, j'ai ajout d'une fonctionnalité à Angular CLI qui s'assure que toutes les assets les fichiers et les dossiers sont servis par le serveur de développement webpack lors de l'exécution de la commande ng test pas seulement ng serve .

Il prend également en charge le service des fichiers d'actifs dans le serveur dev de 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 des avertissements 404 dans la console).
Ils sont déjà servis à partir de ng e2e parce qu'il exécute un ng serve .

Il dispose également de fonctions plus avancées, comme le filtrage des fichiers que vous souhaitez obtenir d'un dossier, et la possibilité de faire en sorte que le nom du dossier de sortie soit différent de celui du dossier source :

{
  ...
  "apps" \[
    {
      "root": "src",
      "assets": \[
        "assets",
        "web.config",
        {
          // Copy contents in this folder
          "input": "../",
          // That matches this wildcard
          "glob": "\*.config",
          // And put them in this folder under \`dist\` ('.' means put it in \`dist\` directly)
          "output": "."
        }
      \],
      ...
    }
  \]
  ...
}

.

---

.

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

Malheureusement, cela n'est pas pris en charge actuellement (à partir de la version bêta-16). J'ai soulevé le problème exact auprès de l'équipe (fichiers web.config), mais il ne semble pas que cela se produise de sitôt (à moins que vous ne forkiez le CLI, etc.).

Suivez cette question pour une discussion complète et d'éventuels détails futurs.

P.S.

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

Plus tôt dans l'histoire de systemJS, il y avait un autre ./public/ qui a été copié dans le dossier ./dist/ directement, mais cela a disparu dans les versions de Webpack, dont le problème référencé ci-dessus traite.

Answer 3

Une solution (bien qu'à mon avis il s'agisse d'un peu d'un hack) est de déclarer une variable dans votre fichier main.ts qui requiert le fichier supplémentaire que vous voulez inclure dans le résultat de la construction de 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 déclaration de variable dans main.ts il émettra les données brutes web.config comme partie de la sortie de la compilation :

                            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.

La solution idéale serait dans la configuration de webpack, mais je n'arrive pas à comprendre comment l'angular-cli gère cela par le biais de angular-cli.json jusqu'à présent (beta.16).

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

Answer 4

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