Comment inclure des fichiers personnalisés avec build angular-cli?
RE: Angular2 2.0.0, angular-cli v1.0.0-beta.11-webpack.8
Comment puis-je dire à angular-cli d'inclure un fichier de "src/assets" à la racine de "dist" lors de la compilation?
Nous déployons sur un hôte Windows et devons inclure un fichier "web.config" pour indiquer à IIS de tout router vers l'index. Nous faisions cette pré-RC4, mais avec toutes les mises à jour, tout est tombé dans les fissures (je ne me souviens pas comment nous l'avons fait).
Je suis en train de parcourir GitHub repo docs et je n’ai rien trouvé d’utile en ce qui concerne ce sujet. Peut-être que je suis au mauvais endroit?
Dans le ToC , il y a un point "Ajouter des fichiers supplémentaires à la construction", mais il semble que cette section n'existe pas.
La propriété "assets" de angular-cli.json peut être configurée pour inclure des fichiers personnalisés dans la compilation angular-cli webpack. Donc, configurez la valeur de la propriété "assets" comme un tableau. Par exemple:
"assets": ["assets", "config.json",".htaccess"],
la configuration ci-dessus copie les fichiers config.jsn et .htaccess dans le dossier dist lors de la construction de webpack angular-cli. paramètre ci-dessus a fonctionné dans angular-cli version 1.0.0-beta.18
Réponse correcte actuelle:
L’équipe a également pris en charge la copie de fichiers spécifiques tels quels dans le dossier de sortie (dist par défaut) dans une version ultérieure de Angular CLI (versions bêta 17 ou 19 - version finale). 1.x sorties pour les âges).
Vous venez de l'ajouter au tableau dans angular-cli.json comme:
{
...
"apps"
{
"root": "src",
"assets" :
"assets",
"web.config"
,
...
}
...
}
(Notez que le chemin est relatif au dossier src)
Personnellement, je l'utilise et cela fonctionne très bien.
Depuis la version bêta 24, j'ai ajouté une fonctionnalité à Angular CLI qui garantit que tous les fichiers et dossiers assets sont servis à partir du serveur de développement Webpack lors de l'exécution de ng test pas seulement ng serve.
Il prend également en charge le traitement des fichiers d'actif dans le serveur de Webpack dev utilisé pour les tests unitaires (ng test).
(au cas où vous auriez besoin de fichiers JSON pour les tests ou détestez simplement voir 404 avertissements dans la console).
Ils sont déjà servis à partir de ng e2e car il exécute un ng serve complet.
Et il possède également des fonctionnalités plus avancées, telles que le filtrage des fichiers que vous voulez dans un dossier et le fait que le nom du dossier de sortie soit différent du dossier source:
{
...
"apps"
{
"root": "src",
"assets" :
"assets",
"web.config",
{
// Copier le contenu de ce dossier
"input": " ../",
// Cela correspond à ce caractère générique
"Glob": "* .config",
// et les mettre dans ce dossier sous "dist" (' . 'signifie le mettre dans `dist` directement)
" output ":". "
}
,
...
}
...
}
.
.
[POUR ARCHIVAGE UNIQUEMENT] Réponse originale (6 octobre 2016):
Malheureusement, cela n’est pas pris en charge actuellement (à partir de la version 16). J'ai soulevé l'inquiétude exacte à l'équipe (fichiers web.config), mais cela ne semble pas se produire de si tôt (à moins que vous ne fassiez appel à la CLI, etc.).
Suivez ce numéro pour une discussion complète et les détails futurs possibles.
Pour le fichier JSON, vous pouvez le mettre dans ./src/assets/. Ce dossier est copié tel quel dans ./dist/assets/. C'est le comportement actuel.
Auparavant dans les jours systemJS, un autre dossier ./public/ avait été copié directement dans ./dist/, mais il a disparu des versions de Webpack, ce que le problème mentionné ci-dessus décrit.
Une solution (bien que, à mon avis, constitue un peu un bidouillage) consiste à déclarer une variable dans votre fichier main.ts qui nécessite le fichier supplémentaire que vous souhaitez inclure dans la sortie de la compilation de Webpack.
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);
Lorsque Webpack rencontre cette déclaration de déclaration de variable dans main.ts, il émettra le fichier raw web.config dans le cadre de la sortie de la construction:
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.
Une solution idéale serait dans la configuration du webpack, mais je ne peux pas vous expliquer comment german-cli gère cela par le biais de angular-cli.json pour le moment (beta.16).
Donc, si quelqu'un a une meilleure réponse qui étend la configuration du WebPack pour un projet généré par angular-cli, j'aimerais l'entendre.
Pour Angular 8 lecteurs ,
.htaccess doit être src/.htaccess. Voir ci-dessous,
"assets": [
"src/favicon.ico",
"src/assets",
"src/.htaccess"
],
Assurez-vous d'avoir placé le fichier .htaccess dans le répertoire src de votre projet. (Si vous avez besoin d’un fichier htaccess valide, vous pouvez en trouver un ici - https://stackoverflow.com/a/57126352/767625 )
C'est ça. Cela devrait maintenant être copié lorsque vous appuyez sur ng build --prod=true.
J'espère que ça aide quelqu'un.
À votre santé,
Il y a une section "scripts" dans le fichier angular-cli.json. Vous pouvez y ajouter tous les fichiers javascript tiers.
Dans mon cas, j’ai utilisé version angulaire 5, j’ai donc essayé de créer un fichier appelé Staticfile.txt lors de l’exécution de ng build --prod. commander. assurez-vous de donner l'extension du fichier, sinon le fichier ne sera pas créé.