Comment regrouper une application Angular pour la mettre en production ?

Question

Quelle est la meilleure méthode pour intégrer Angular (version 2, 4, 6, ...) en production sur un serveur web.

Merci d'indiquer la version d'Angular dans vos réponses afin que nous puissions mieux suivre les évolutions des versions ultérieures.

Answer 1

2 to 14 (TypeScript) avec Angular CLI

Configuration unique

• npm install -g @angular/cli
• ng new projectFolder crée une nouvelle application

Étape de regroupement

• ng build (exécuté en ligne de commande lorsque le répertoire est projectFolder ).

  drapeau prod pour la production est maintenant la valeur par défaut (voir la section Documentation Angular pour le personnaliser si nécessaire).

• Compresser en utilisant Compression du brotli les ressources à l'aide de la commande suivante

  for i in dist/*/*; do brotli $i; done

sont générés par défaut vers projectFolder/dist(/$projectFolder pour v6+) **

Sortie

Dimensions avec Angular 14.0.2 avec CLI 14.0.2 et option CSS sans routage Angular

• dist/main.[hash].js Votre application regroupée [ size : 118 KB for new Angular CLI application empty, 36 KB comprimé].
• dist/polyfill-[es-version].[hash].bundle.js les dépendances polyfill (@angular, RxJS...) regroupées [ size : 34 KB for new Angular CLI application empty, 11 KB comprimé].
• dist/index.html point d'entrée de votre application.
• dist/runtime.[hash].bundle.js chargeur webpack
• dist/style.[hash].bundle.css les définitions de style
• dist/assets copiées à partir de la configuration des ressources Angular CLI

Déploiement

Vous pouvez obtenir un aperçu de votre application à l'aide de l'outil ng serve --prod qui démarre un serveur HTTP local de sorte que l'application contenant les fichiers de production soit accessible à l'aide de http://localhost:4200. Il n'est pas sûr de l'utiliser en production.

Pour une utilisation en production, vous devez déployer tous les fichiers du répertoire dist dans le serveur HTTP de votre choix.

Answer 2

2.0.1 Final en utilisant Gulp (TypeScript - Cible : ES5)

---

Configuration unique

• npm install (à exécuter dans cmd lorsque le répertoire est projectFolder)

Étapes du regroupement

• npm run bundle (à exécuter dans cmd lorsque le répertoire est projectFolder)

  sont générés pour projectFolder / bundles /

Sortie

• bundles/dependencies.bundle.js [ taille : ~ 1 MB (le plus petit possible) ]
  • contient les dépendances de rxjs et angular, pas les frameworks complets
• bundles/app.bundle.js [ taille : dépend de votre projet Le mien est ~ 0.5 MB ]
  • contient votre projet

Structure du fichier

• projectFolder / app / (tous les composants, directives, modèles, etc.)

• projectFolder / gulpfile.js

  var gulp = require('gulp'), tsc = require('gulp-typescript'), Builder = require('systemjs-builder'), inlineNg2Template = require('gulp-inline-ng2-template');

  gulp.task('bundle', ['bundle-app', 'bundle-dependencies'], function(){});

  gulp.task('inline-templates', function () { return gulp.src('app/*/.ts') .pipe(inlineNg2Template({ useRelativePaths: true, indent: 0, removeLineBreaks: true})) .pipe(tsc({ "target": "ES5", "module": "system", "moduleResolution": "node", "sourceMap": true, "emitDecoratorMetadata": true, "experimentalDecorators": true, "removeComments": true, "noImplicitAny": false })) .pipe(gulp.dest('dist/app')); });

  gulp.task('bundle-app', ['inline-templates'], function() { // optional constructor options // sets the baseURL and loads the configuration file var builder = new Builder('', 'dist-systemjs.config.js');

  return builder .bundle('dist/app//* - [@angular/*/.js] - [rxjs//*.js]', 'bundles/app.bundle.js', { minify: true}) .then(function() { console.log('Build complete'); }) .catch(function(err) { console.log('Build error'); console.log(err); }); });

  gulp.task('bundle-dependencies', ['inline-templates'], function() { // optional constructor options // sets the baseURL and loads the configuration file var builder = new Builder('', 'dist-systemjs.config.js');

  return builder .bundle('dist/app/*/.js - [dist/app/*/.js]', 'bundles/dependencies.bundle.js', { minify: true}) .then(function() { console.log('Build complete'); }) .catch(function(err) { console.log('Build error'); console.log(err); }); });

• projectFolder / package.json (idem Guide de démarrage rapide (seulement les devDependencies et npm-scripts requis pour le bundle)

  { "name": "angular2-quickstart", "version": "1.0.0", "scripts": {

  ---

   "gulp": "gulp",
   "rimraf": "rimraf",
   "bundle": "gulp bundle",
   "postbundle": "rimraf dist"

  }, "license": "ISC", "dependencies": {

  ---

  }, "devDependencies": { "rimraf": "^2.5.2", "gulp": "^3.9.1", "gulp-typescript": "2.13.6", "gulp-inline-ng2-template": "2.0.1", "systemjs-builder": "^0.15.16" } }

• projectFolder / systemjs.config.js (idem Guide de démarrage rapide , n'est plus disponible sur ce site)

  (function(global) {

  // map tells the System loader where to look for things var map = { 'app': 'app', 'rxjs': 'node_modules/rxjs', 'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api', '@angular': 'node_modules/@angular' };

  // packages tells the System loader how to load when no filename and/or no extension var packages = { 'app': { main: 'app/boot.js', defaultExtension: 'js' }, 'rxjs': { defaultExtension: 'js' }, 'angular2-in-memory-web-api': { defaultExtension: 'js' } };

  var packageNames = [ '@angular/common', '@angular/compiler', '@angular/core', '@angular/forms', '@angular/http', '@angular/platform-browser', '@angular/platform-browser-dynamic', '@angular/router', '@angular/router-deprecated', '@angular/testing', '@angular/upgrade', ];

  // add package entries for angular packages in the form '@angular/common': { main: 'index.js', defaultExtension: 'js' } packageNames.forEach(function(pkgName) { packages[pkgName] = { main: 'index.js', defaultExtension: 'js' }; });

  var config = { map: map, packages: packages };

  // filterSystemConfig - index.asp's chance to modify config before we register it. if (global.filterSystemConfig) { global.filterSystemConfig(config); }

  System.config(config);

  })(this);

• projetcFolder / dist-systemjs.config.js (je viens de montrer la différence avec systemjs.config.json)

  var map = { 'app': 'dist/app', };

• projectFolder / index.html (production) - _L'ordre des balises script est essentiel. En plaçant les balises dist-systemjs.config.js après les balises du bundle permettrait toujours au programme de s'exécuter, mais le bundle de dépendances serait ignoré et les dépendances seraient chargées à partir de la balise node_modules dossier._

  <!doctype html> <html lang="en"> <head> <meta charset="utf-8"/> <meta name="viewport" content="width=device-width, initial-scale=1"/> <base href="http://stackoverflow.com/"/> <title>Angular</title> <link rel="stylesheet" type="text/css" href="style.css"/> </head> <body>

  <my-app> loading... </my-app>

  <!-- Polyfill(s) for older browsers --> <script src="node_modules/core-js/client/shim.min.js"></script>

  <script src="node_modules/zone.js/dist/zone.min.js"></script> <script src="node_modules/reflect-metadata/Reflect.js"></script> <script src="node_modules/systemjs/dist/system.js"></script>

  <script src="dist-systemjs.config.js"></script> <!-- Project Bundles. Note that these have to be loaded AFTER the systemjs.config script --> <script src="bundles/dependencies.bundle.js"></script> <script src="bundles/app.bundle.js"></script>

  <script> System.import('app/boot').catch(function (err) { console.error(err); }); </script> </body> </html>

• projectFolder / app / boot.ts est l'endroit où se trouve le point d'ancrage.

---

Le meilleur que j'ai pu faire jusqu'à présent :)

Answer 3

Angular 2 avec Webpack (sans configuration CLI)

1- Le tutoriel de l'équipe Angular2

L'équipe d'Angular2 a publié un tutoriel pour l'utilisation de Webpack

J'ai créé et placé les fichiers du tutoriel dans un petit fichier Projet d'amorçage GitHub . Vous pouvez ainsi essayer rapidement le flux de travail.

Instructions :

• npm install

• npm start . Pour le développement. Cela créera un dossier "dist" virtuel qui sera chargé à l'adresse de votre hôte local.

• npm run build . Pour la production. "Cela créera une version physique du dossier "dist" qui pourra être envoyée à un serveur web. Le dossier "dist" pèse 7,8 Mo, mais seulement 234 Ko sont nécessaires pour charger la page dans un navigateur web.

2 - Un kit de démarrage Webkit

Le présent Kit de démarrage Webpack offre des fonctionnalités de test plus poussées que le tutoriel ci-dessus et semble assez populaire.

Answer 4

Flux de production Angular 2 avec SystemJs builder et gulp

Angular.io a un tutoriel de démarrage rapide. J'ai copié ce tutoriel et l'ai étendu avec quelques tâches gulp simples pour tout regrouper dans un dossier dist qui peut être copié sur le serveur et fonctionner comme ça. J'ai essayé d'optimiser le tout pour qu'il fonctionne bien sur Jenkis CI, ainsi les node_modules peuvent être mis en cache et n'ont pas besoin d'être copiés.

Code source et exemple d'application sur Github : https://github.com/Anjmao/angular2-production-workflow

Étapes de la production

1. Nettoyer les fichiers js compilés de typescripts et le dossier dist
2. Compiler les fichiers typescript dans le dossier app
3. Utiliser SystemJs bundler pour tout regrouper dans le dossier dist avec les hashs générés pour le rafraîchissement du cache du navigateur.
4. Utilisez gulp-html-replace pour remplacer index.html scripts par les versions intégrées et copiez-les dans le dossier dist.
5. Copier tout ce qui se trouve dans le dossier assets dans le dossier dist

Nœud : Bien que vous puissiez toujours créer votre propre processus de construction, je recommande fortement d'utiliser angular-cli, car il a tous les flux de travail nécessaires et fonctionne parfaitement maintenant. Nous l'utilisons déjà en production et n'avons aucun problème avec angular-cli.

Answer 5

Angular CLI 1.x.x (fonctionne avec Angular 4.x.x, 5.x.x)

Il soutient :

• Angular 2.x et 4.x
• Dernière version de Webpack 2.x
• Compilateur Angular AoT
• Routage (normal et paresseux)
• SCSS
• Regroupement de fichiers personnalisés (actifs)
• Outils de développement supplémentaires (linter, tests unitaires et de bout en bout)

Configuration initiale

ng new project-name --routing

Vous pouvez ajouter --style=scss pour le support de SASS .scss.

Vous pouvez ajouter --ng4 pour l'utilisation d'Angular 4 au lieu d'Angular 2.

Après avoir créé le projet, l'interface de programmation exécute automatiquement les commandes suivantes npm install pour vous. Si vous voulez utiliser Yarn à la place, ou si vous voulez simplement voir le squelette du projet sans l'installer, Pour savoir comment procéder, cliquez ici .

Étapes de l'offre groupée

Dans le dossier du projet :

ng build -prod

Dans la version actuelle, vous devez spécifier --aot manuellement, car il peut être utilisé en mode développement (bien que cela ne soit pas pratique en raison de la lenteur).

Cela permet également d'effectuer une compilation AoT pour des paquets encore plus petits (pas de compilateur Angular, mais une sortie de compilateur générée). Les bundles sont beaucoup plus petits avec AoT si vous utilisez Angular 4 car le code généré est plus petit.
Vous pouvez tester votre application avec AoT en mode développement (cartes de sources, pas de minification) et AoT en lançant ng build --aot .

Sortie

Le répertoire de sortie par défaut est ./dist bien qu'il puisse être modifié dans ./angular-cli.json .

Fichiers déployables

Le résultat de l'étape de construction est le suivant :

(Note : <content-hash> se réfère au hash / empreinte digitale du contenu du fichier qui est censé être un moyen de briser le cache, ce qui est possible puisque Webpack écrit le fichier script par elle-même)

• ./dist/assets
  Fichiers copiés tels quels à partir de ./src/assets/**
• ./dist/index.html
  De ./src/index.html après avoir ajouté webpack scripts à celui-ci
  Le fichier modèle source est configurable dans ./angular-cli.json
• ./dist/inline.js
  Petit chargeur webpack / polyfill
• ./dist/main.<content-hash>.bundle.js
  Le fichier .js principal contenant tous les scripts .js générés / importés
• ./dist/styles.<content-hash>.bundle.js
  Lorsque vous utilisez les chargeurs Webpack pour les CSS, ce qui est la méthode CLI, ils sont chargés via JS ici

Dans les versions antérieures, il créait également des versions gzippées pour vérifier leur taille, et .map mais ce n'est plus le cas car les gens demandaient à ce qu'ils soient supprimés.

Autres fichiers

Dans d'autres cas, vous pouvez trouver d'autres fichiers/dossiers indésirables :

• ./out-tsc/
  De ./src/tsconfig.json 's outDir
• ./out-tsc-e2e/
  De ./e2e/tsconfig.json 's outDir
• ./dist/ngfactory/
  Depuis le compilateur AoT (non configurable sans forker le CLI à partir de la beta 16)