web-dev-qa-db-fra.com

Angular 2 + TypeScript compiler copie les fichiers HTML et CSS

Dans Angular2 j'aurais 

"outDir": "dist/app"

dans tsconfig.json. En conséquence, les fichiers .js et .map transpilés sont générés dans le dossier/dist/app/et/ou ses sous-dossiers. Cela fonctionne bien.

Dans mes fichiers components.ts, j'ai également utilisé les langages HTML et CSS référencés comme ceci

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

Existe-t-il un moyen de faire en sorte que le compilateur copie également les fichiers HTML et CSS référencés pour l'ensemble du projet? Si oui, comment pourrais-je configurer mon tsconfig.json?

J'ai examiné les options du compilateur ici https://www.typescriptlang.org/docs/handbook/compiler-options.html mais je n'ai rien trouvé sur la copie de fichiers html/css.

Mise à jour: Ma structure de dossier est comme ceci

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

tsconfig.json

"outDir": "dist/app"

package.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 \\;",
    ......
}

Il ne copie pas les fichiers HTML. Il n'y a pas d'erreur cependant.

Actualiser à nouveau:

Pour ceux qui utilisent un système d’exploitation Linux, la solution de Bernardo est opérationnelle .. Pour ceux qui utilisent un système d’exploitation Windows, les solutions suivantes devraient fonctionner.

  "scripts": {
    "html": "XCOPY /S /y .\\app\\*.html .\\dist\\app" }
typescriptangular
27
Shawn

Non, le compilateur TypeScript est uniquement destiné au fichier * .ts.

Vous devez copier d'autres fichiers tels que * .html et * .css à l'aide d'une méthode de copie telle que cp Shell dans un script npm ou grunt-contrib-copy par exemple.

Exemple d'utilisation du script npm:

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

Il suffit d'exécuter npm run html dans le shell.

Exemple d'utilisation de grunt:

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

Pour une solution indépendante du système d'exploitation, utilisez copyfiles

npm install copyfiles --save-dev

Ajoutez ensuite un script à package.json

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

Maintenant, npm run html devrait copier tous les fichiers css et html de l’app/dossier vers dist/app /

EDIT: Je voudrais modifier ma réponse pour indiquer angular-cli . Cet utilitaire d’outillage de ligne de commande est pris en charge par l’équipe angulaire et permet entre autres de regrouper des données en un rien de temps.

33
Ali Cheaito

De la réponse de Bernardo j'ai changé cela 

  "html": "find ./app -name '.html' -type f -exec cp --parents {} ./dist \\;" 
pour ça 
"html": "cd app && tsc && find.\(-name". \; "</ pre>  et fonctionne bien. Compiler et copier des fichiers html et css en une seule instruction, j’ai également ajouté ceci 
"clean": "rm -rf dist"
 afin de supprimer tout le répertoire dist. J'espère que cette aide!
3
vicmac

Cette approche est fournie par Microsoft: -
https://github.com/Microsoft/TypeScript-Node-Starter
Consultez le fichier "copyStaticAssets" . Aucune des solutions ci-dessus ne fonctionnant pour moi, j'espère que cela aidera quelqu'un comme moi.

2
Yash Kumar

@yesh kumar, merci de partager le lien. Voici les étapes que j'ai faites

  • Installer shelljs
  • Ajouter des actifs statiques au fichier copyStaticAssets.ts

import * as Shell from "shelljs";

Shell.cp("-R", "lib/certs", "dist/");

  • Configurez ts-node copyStaticAssets.ts dans la section 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"
 }
1
Nurul Abser

Vous pouvez également utiliser nodemon de ma réponse ici: Regarder les fichiers de modèle et les copier dans le répertoire dist/folder pourrait être configuré avec package.json pour placer vos fichiers css et html avec une simple copie de la commnad de votre système d'exploitation hôte.

Mais, en ces jours, vous avez Webpack dans l'écosystème Angular 4/5.

0
0zkr PM

Au lieu de ma réponse détaillée, voici: https://stackoverflow.com/a/40694657/986160 Ce pourrait être de laisser vos fichiers css et html avec les fichiers ts. Ensuite, vous pouvez utiliser module.id qui aura le chemin qui pointe vers le js du composant et après l'avoir converti en conséquence, vous pouvez essentiellement utiliser des chemins relatifs:

Pour votre cas, je pense que quelque chose comme ça va marcher:

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