Come includere file personalizzati con build angular-cli?

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

Come faccio a dire ad angular-cli di includere un file da "src / assets" nella radice di "dist" quando viene compilato?

Distribuiamo su un host Windows e dobbiamo includere un file "web.config" per indicare a IIS di instradare tutto da indicizzare. Stavamo facendo questo pre RC4, ma con tutti gli aggiornamenti è caduto a terra (non ricordo come l'abbiamo fatto).

Ho setacciato i documenti del repository GitHub e non ho trovato nulla di utile in merito a questo argomento. Forse sono nel posto sbagliato?

In ToC , c'è un punto elenco "Aggiunta di file extra alla build", ma sembra che la sezione non esista.

La proprietà "assets" di angular-cli.json può essere configurata per includere file personalizzati nella build del webpack angular-cli. Quindi, configura il valore della proprietà "assets" come un array. Per esempio:

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

la configurazione precedente copierà config.jsn e .htaccess nella cartella dist durante la compilazione del webpack angular-cli. l'impostazione precedente ha funzionato in angular-cli versione 1.0.0-beta.18

Risposta corretta corrente:

Il team ha aggiunto il supporto per la copia di file specifici così come sono nella cartella di output ( distper impostazione predefinita) in una versione successiva di Angular CLI (sarebbe beta 17 o 19 - è stato nelle versioni finali 1.x da secoli).

Devi solo aggiungerlo all'array in angular-cli.jsoncome:

{
  ...
  "app" [
    {
       "root": "src",
       "risorse": [
         "risorse",
         "Web.config"
       ],
       ...
    }
  ]
  ...
}

(Nota che il percorso è relativo alla srccartella)

Lo uso personalmente e funziona benissimo.

A partire dalla beta 24, ho aggiunto una funzionalità alla CLI di Angular che assicura che tutti i assetsfile e le cartelle siano serviti dal server di sviluppo webpack quando in esecuzione ng testnon solo ng serve.

Supporta anche il servizio dei file di risorse nel server di sviluppo webpack utilizzato per gli unit test ( ng test).
(nel caso avessi bisogno di alcuni file JSON per i test, o semplicemente odi vedere 404 avvisi nella console).
Sono già serviti da ng e2eperchè viene eseguito un full ng serve.

E ha anche funzionalità più avanzate, come filtrare i file desiderati da una cartella e avere il nome della cartella di output diverso dalla cartella di origine:

{
  ...
  "app" [
    {
      "root": "src",
      "risorse": [
        "risorse",
        "Web.config":
        {
          // Copia i contenuti in questa cartella
          "input": "../",
          // Corrisponde a questo carattere jolly
          "glob": "* .config",
          // E metterli in questa cartella sotto `dist` ('.' Significa metterlo direttamente in` dist`)
          "produzione": "."
        }
      ],
      ...
    }
  ]
  ...
}

Puoi anche fare riferimento alla documentazione ufficiale: Angular Guide - Workspace configuration .

.

[SOLO PER ARCHIVIAZIONE] Risposta originale (6 ottobre 2016):

Questo non è attualmente supportato purtroppo (a partire dalla beta-16). Ho sollevato l'esatta preoccupazione al team (file web.config), ma non sembra che accadrà presto (a meno che tu non stia eseguendo il fork della CLI, ecc.).

Segui questo numero per una discussione completa e possibili dettagli futuri.

Per il file JSON, puoi inserirlo in ./src/assets/. Questa cartella viene copiata così com'è ./dist/assets/. Questo è il comportamento attuale.

In precedenza, nei giorni di systemJS, c'era un'altra ./public/cartella che veniva copiata ./dist/direttamente, ma questa è andata nelle versioni di Webpack, di cui discute il problema a cui si fa riferimento sopra.

Una soluzione (anche se a mio parere è un po 'un trucco) è dichiarare una variabile nel tuo main.tsfile che richiede il file extra che vuoi includere nell'output di compilazione del 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);

Quando webpack incontra questa dichiarazione di dichiarazione di variabile main.ts, emetterà il web.configfile raw come parte dell'output di compilazione:

                            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.

Una soluzione ideale sarebbe nella configurazione del webpack, ma non riesco a capire come l'angular-cli lo sta gestendo fino angular-cli.jsonad ora (beta.16).

Quindi, se qualcuno ha una risposta migliore che estende la configurazione del webpack per un progetto generato da angular cli, mi piacerebbe ascoltarla.

Per i lettori Angular 8 ,

.htaccessdeve essere src/.htaccess. Vedi sotto,

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

Assicurati di aver posizionato il .htaccessfile all'interno della srcdirectory del tuo progetto.

e il file in cui inserirlo è angular.json, non il fileangular-cli.json

(Se hai bisogno di un htaccessfile valido , puoi trovarne uno qui - https://stackoverflow.com/a/57126352/767625 )

Questo è tutto. Ora dovrebbe essere copiato quando premi ng build --prod=true.

Spero che questo aiuti qualcuno.

Saluti,

C'è una sezione "scripts" nel file angular-cli.json. Qui puoi aggiungere tutti i file javascript di terze parti.

Nel mio caso ho usato la versione 5 di Angular , quindi ho provato a creare un file chiamato Staticfile.txt durante l'esecuzione del comando ng build --prod. assicurati di dare l'estensione del file, altrimenti non creerà il file.

Modifica angular.json.
Aggiungi voce all'array di risorse:

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