¿Cómo incluir archivos personalizados con la compilación angular-cli?

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

¿Cómo le digo a angular-cli que incluya un archivo de "src / assets" en la raíz de "dist" cuando se compila?

Implementamos en un host de Windows y necesitamos incluir un archivo "web.config" para decirle a IIS que enrute todo al índice. Estábamos haciendo esto antes de RC4, pero con todas las actualizaciones se cayó por las grietas (no recuerdo cómo lo hicimos).

He estado revisando los documentos del repositorio de GitHub y no he encontrado nada útil con respecto a este tema. ¿Quizás estoy en el lugar equivocado?

En el ToC , hay una viñeta "Agregar archivos adicionales a la compilación", pero parece que esa sección no existe.

La propiedad "assets" de angular-cli.json se puede configurar para incluir archivos personalizados en la compilación del paquete web angular-cli. Por lo tanto, configure el valor de la propiedad "activos" como una matriz. Por ejemplo:

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

La configuración anterior copiará config.jsn y .htaccess en la carpeta dist durante la compilación del paquete web angular-cli. la configuración anterior funcionó en angular-cli versión 1.0.0-beta.18

Respuesta correcta actual:

El equipo ha agregado soporte para copiar archivos específicos como están en la carpeta de salida ( distpor defecto) en una versión posterior de Angular CLI (sería beta 17 o 19; ha estado en las versiones finales 1.x durante años).

Simplemente agréguelo a la matriz angular-cli.jsoncomo:

{
  ...
  "aplicaciones" [
    {
       "root": "src",
       "activos": [
         "bienes",
         "web.config"
       ],
       ...
    }
  ]
  ...
}

(Tenga en cuenta que la ruta es relativa a la srccarpeta)

Yo personalmente lo uso y funciona bien.

A partir de la versión beta 24, agregué una función a Angular CLI que garantiza que todos los assetsarchivos y carpetas se proporcionen desde el servidor de desarrollo webpack cuando se ejecutan ng testno solo ng serve.

También admite el servicio de archivos de activos en el servidor de desarrollo de paquetes web que se usa para las pruebas unitarias ( ng test).
(en caso de que necesite algunos archivos JSON para las pruebas, o simplemente odie ver las advertencias 404 en la consola).
Ya están servidos desde ng e2eporque corre completo ng serve.

Y también tiene funciones más avanzadas, como filtrar los archivos que desea de una carpeta y hacer que el nombre de la carpeta de salida sea diferente al de la carpeta de origen:

{
  ...
  "aplicaciones" [
    {
      "root": "src",
      "activos": [
        "bienes",
        "web.config":
        {
          // Copiar contenido en esta carpeta
          "entrada": "../",
          // Que coincide con este comodín
          "glob": "* .config",
          // Y ponerlos en esta carpeta debajo de `dist` ('.' Significa ponerlo en` dist` directamente)
          "salida": "."
        }
      ],
      ...
    }
  ]
  ...
}

También puede consultar la documentación oficial: Guía angular - Configuración del espacio de trabajo .

.

[SOLO PARA ARCHIVO] Respuesta original (6 de octubre de 2016):

Desafortunadamente, esto no es compatible actualmente (a partir de la versión beta-16). Le planteé la preocupación exacta al equipo (archivos web.config), pero no parece que vaya a suceder pronto (a menos que esté bifurcando la CLI, etc.).

Siga este número para una discusión completa y posibles detalles futuros.

Para el archivo JSON, puede colocarlo en formato ./src/assets/. Esta carpeta se copia como está ./dist/assets/. Este es el comportamiento actual.

Anteriormente, en los días de systemJS, había otra ./public/carpeta en la que se copió ./dist/directamente, pero esto desapareció en las versiones de Webpack, que se analiza en el problema mencionado anteriormente.

Una solución (aunque en mi opinión es un truco) es declarar una variable en su main.tsarchivo que requiera el archivo adicional que desea incluir en la salida de la compilación del paquete web.

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);

Cuando el paquete web encuentra esta declaración de declaración de variable main.ts, emitirá el web.configarchivo sin formato como parte de la salida de la compilación:

                            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 solución ideal estaría en la configuración del paquete web, pero no puedo entender cómo el angular-cli lo está manejando hasta el angular-cli.jsonmomento (beta.16).

Entonces, si alguien tiene una mejor respuesta que extienda la configuración del paquete web para un proyecto generado por angular-cli, me encantaría escucharla.

Para lectores Angular 8 ,

.htaccessnecesita ser src/.htaccess. Vea abajo,

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

Asegúrese de haber colocado el .htaccessarchivo dentro del srcdirectorio de su proyecto.

y el archivo para poner eso es angular.json, no elangular-cli.json

(Si necesita un htaccessarchivo válido , puede encontrar uno aquí: https://stackoverflow.com/a/57126352/767625 )

Eso es. Esto debería copiarse ahora cuando pulses ng build --prod=true.

Espero que esto ayude a alguien.

Salud,

Hay una sección de "scripts" en el archivo angular-cli.json. Puede agregar todos los archivos javascript de terceros allí.

En mi caso, usé la versión 5 de Angular , así que intenté crear un archivo llamado Staticfile.txt al ejecutar el comando ng build --prod. asegúrese de dar la extensión del archivo, de lo contrario no creará el archivo.

Modifique angular.json.
Agregar entrada a la matriz de activos:

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