Compilador Angular 2 + Typescript copiar archivos html y css

En Angular2 tendría 

"outDir": "dist/app"

En tsconfig.json. Como resultado, el transpiled .js and .los archivos de mapa se generan en la carpeta/dist/ app/y / o sus subcarpetas. Eso funciona muy bien.

En mis componentes.archivos ts También usé html y css referenciados como este

@Component({
  selector: 'my-app', 
  templateUrl: 'app/appshell/app.component.html',
  styleUrls: ['app/appshell/app.component.css'],
  ......
}

¿Hay alguna manera de hacer que el compilador también copie los archivos html y css referenciados para todo el proyecto? En caso afirmativo, cómo configuraría mi tsconfig.json?

Miré en el compilador opciones aquí https://www.typescriptlang.org/docs/handbook/compiler-options.html pero no encontró nada sobre copiar archivos html/css.

Actualización: Mi estructura de carpetas es así

Root
  |--app       // for ts
  |--dist/app  // for js

Tsconfig.json 

"outDir": "dist/app"

Paquete.json 

{
  "name": "TestApp",
  "version": "1.0.0",
  "scripts": {
    "start": "tsc && concurrently \"tsc -w\" \"lite-server\" ",
    "html": "find ./app -name '*.html' -type f -exec cp --parents {} ./dist \\;",
    ......
}

No copia archivos html. Sin embargo, no hay error.

Actualizar de nuevo:

Para aquellos que están en el sistema operativo Linux, la solución de Bernardo es una solución funcional. Para aquellos que están en el sistema operativo Windows, lo siguiente debería funcionar.

  "scripts": {
    "html": "XCOPY /S /y .\\app\\*.html .\\dist\\app" }
Author: Michail Michailidis, 2016-08-02
Source

7 answers

No, el compilador de TypeScript es solo para *.archivo ts.

Tienes Que copiar otros archivos como *.html y *.css usando un método de copia como cpshell command dentro de un script npm o grunt-contrib-copy por ejemplo.

Ejemplo usando el script npm: 

"scripts": {
  "html": "find ./app -name '*.html' -type f -exec cp --parents {} ./dist \\;"
}

Simplemente ejecuta npm run html en el shell.

Ejemplo usando grunt: 

copy: {
      html: {
          src: ['**/*.html'],
          dest: 'dist',
          cwd: 'app',
          expand: true,
      }
}
 11
Author: Bernardo Pacheco,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-08-02 01:54:22

Para una solución independiente del sistema operativo, use copyfiles 

npm install copyfiles --save-dev

Luego agregue un script al paquete.json 

"scripts": {
  "html": "copyfiles app/**/*.html app/**/*.css dist/"
}

Ahora npm run html debe copiar todos los archivos css y html de la carpeta app / a dist/app /

EDITAR: Me gustaría modificar mi respuesta para señalar angular-cli. Esta utilidad de herramientas de línea de comandos es compatible con el equipo angular y hace que la agrupación sea muy fácil (ng build pro prod), entre otras cosas.

 30
Author: Ali Cheaito,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-01-06 13:59:10

De la respuesta de Bernardo cambié esto 

 "html": "find ./app -name '.html' -type f -exec cp --parents {} ./dist \\;"
para esto 
"html": "cd app && tsc && find . \( -name '.html' -or -name '*.css' \) -type f -exec cp --parents {} ../dist \\;"
 y está funcionando bien. Compile y copie archivos html y css en una instrucción También agregué esto 
"clean": "rm -rf dist"
para eliminar todo el directorio dist. Espero que esta ayuda!
 2
Author: vicmac,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-10-11 19:50:14

Este enfoque es proporcionado por Microsoft:-
https://github.com/Microsoft/TypeScript-Node-Starter
Echa un vistazo al archivo "copyStaticAssets". Ninguna de las soluciones anteriores funcionó para mí, así que espero que esto ayude a alguien como yo.

 2
Author: Yash Kumar,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-07-20 10:33:54

Como alternativa a mi respuesta detallada aquí: https://stackoverflow.com/a/40694657/986160 podría ser dejar su css y html con los archivos ts. Entonces usted puede utilizar module.id que tendrá la ruta apuntando al js del componente y después de convertirlo en consecuencia, esencialmente puede usar rutas relativas:)

Para su caso creo que algo así funcionará: 

@Component({
   moduleId: module.id.replace("/dist/", "/"),
...
});
 0
Author: Michail Michailidis,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-05-23 11:55:07

Como alternativa usando nodemon de mi respuesta aquí: Vea los archivos de plantilla y cópielos a dist/ folder se podría configurar usando package.json para poner sus archivos css y html con un simple comando de copia de su sistema operativo host.

Pero, en estos días, tienes Webpack en el ecosistema Angular 4/5.

 0
Author: 0zkr PM,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-06-26 20:15:52

@yesh kumar, gracias por compartir el enlace. Aquí los pasos que hice

  • Instalarshelljs
  • Agregar activos estáticos al archivo copyStaticAssets.ts 

import * as shell from "shelljs";

shell.cp("-R", "lib/certs", "dist/");
  • Configure ts-node copyStaticAssets.ts en la sección del script package.json 
    "scripts": {
  "build": "tsc && npm run copy-static-assets",
  "prod": "npm run build && npm run start",
  "copy-static-assets": "ts-node copyStaticAssets.ts"
 }
 0
Author: Nurul Abser,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-08-31 03:06:23