publicar - ng build angular 6

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

Question

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 construye?

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

He estado rastreando los documentos de repositorio de GitHub y no he encontrado nada útil con respecto a este tema. Tal vez estoy en el lugar equivocado?

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

Answer 1

Respuesta correcta actual:

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

Simplemente lo agrega a la matriz en angular-cli.json como:

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

(Tenga en cuenta que la ruta es relativa a la carpeta src )

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 archivos y carpetas de assets se sirvan desde el servidor de desarrollo webpack cuando se ejecuta ng test no solo ng serve .

También es compatible con el servicio de los archivos de activos en el servidor de desarrollo webpack utilizado para 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 se sirven desde ng e2e porque ejecuta un servicio completo de ng serve .

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

{ ... "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": "." } ], ... } ] ... }

.

.

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

Desafortunadamente, esto no es compatible actualmente (a partir de beta-16). Le planteé la preocupación exacta al equipo (archivos web.config), pero no parece estar sucediendo en el corto plazo (a menos que esté bifurcando la CLI, etc.).

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

PD

Para el archivo JSON, puede ponerlo en ./src/assets/ . Esta carpeta se copia tal cual a ./dist/assets/ . Este es el comportamiento actual.

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

Answer 2

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

Answer 3

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

Answer 4

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 "assets" 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

Answer 5

Una solución (aunque en mi opinión es un poco pirata) es declarar una variable en su archivo main.ts que requiera el archivo adicional que desea incluir en la salida de 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 webpack encuentra esta declaración de declaración variable en main.ts , emitirá el archivo web.config procesar como parte de la salida de 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 sería en la configuración del paquete web, pero todavía no puedo entender cómo angular-cli lo está manejando a través de angular-cli.json (beta.16).

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

Answer 6

Para los lectores de Angular 8 ,

.htaccess necesita ser src/.htaccess . Vea abajo,

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

Asegúrese de haber colocado el archivo .htaccess dentro del directorio src de su proyecto. (Si necesita un archivo htaccess válido, puede encontrar uno aquí: https://.com/a/57126352/767625 )

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

Espero que esto ayude a alguien.

Salud,