typescript - index - meta angular 2

Angular 2+Typescript compiler copia los archivos html y css

Question

En Angular2 tendría

"outDir": "dist/app"

en tsconfig.json. Como resultado, los archivos .js y .map transpilados se generan en / dist / app / folder y / o sus subcarpetas. Eso funciona todo bien.

En mis archivos components.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 forma de hacer que el compilador también copie los archivos html y css referenciados para todo el proyecto? Si es así, ¿cómo puedo configurar mi tsconfig.json?

Miré las opciones del compilador aquí https://www.typescriptlang.org/docs/handbook/compiler-options.html pero no encontré nada sobre la copia de archivos html / css.

Actualización: mi estructura de carpetas es como esta

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. Aunque no hay error.

Actualizar de nuevo:

Para aquellos que están en el sistema operativo Linux, la solución de Bernardo es 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" }

Answer 1

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

• Instalar shelljs
• Agregue 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 de 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"
   }

Answer 2

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

Para tu caso creo que algo así funcionará:

@Component({
   moduleId: module.id.replace("/dist/", "/"),
...
});

Answer 3

Como alternativa, use nodemon desde mi respuesta aquí: ver los archivos de plantilla y copiarlos en la carpeta dist / puede configurarse usando package.json para colocar sus archivos css y html con una simple copia de su sistema operativo host.

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

Answer 4

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 esta funcionando bien. Compile y copie archivos html y css en una sola instrucción. También agregué esto

"clean": "rm -rf dist" con el fin de eliminar todo el directorio dist . ¡Espero que esto ayude!

Answer 5

Microsoft proporciona este enfoque:
https://github.com/Microsoft/TypeScript-Node-Starter
Revisa el archivo "copyStaticAssets". Ninguna de las soluciones anteriores funcionó para mí, así que espero que esto ayude a alguien como yo.

Answer 6

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

Debe copiar otros archivos como * .html y * .css usando un método de copia como el comando cp shell dentro de una secuencia de comandos npm o grunt-contrib-copy por ejemplo.

Ejemplo usando script npm:

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

Simplemente ejecuta npm run html en el shell.

Ejemplo usando gruñido:

copy: {
      html: {
          src: [''**/*.html''],
          dest: ''dist'',
          cwd: ''app'',
          expand: true,
      }
}

Answer 7

Para una solución independiente del SO, use copyfiles

npm install copyfiles --save-dev

Luego agregue un script a package.json

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

Ahora npm run html debería copiar todos los archivos css y html de la aplicación / carpeta a dist / app /

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