Regrouper une application Angular pour la production

1. Utiliser Angular CLI pour regrouper une application Angular pour la production
2. Utiliser Webpack pour regrouper une application Angular pour la production
3. Utiliser Gulp pour regrouper une application Angular pour la production
4. Conclusion

Cet article présentera différentes méthodes pour créer une application Angular à déployer après avoir créé l’application avec succès.

Avant d’aller de l’avant et de créer l’application, il est idéal pour exécuter l’application à l’aide de ng serve --prod ; nous passons ensuite à cette URL : http://localhost:4200/ pour voir l’application s’exécuter, et à partir de là, nous pouvons observer le comportement de l’application en action.

Voyons maintenant différentes méthodes pour regrouper une application Angular.

Utiliser Angular CLI pour regrouper une application Angular pour la production

Cette méthode est la méthode la plus largement acceptée pour regrouper une application Angular car elle fonctionne sur toutes les versions d’Angular. CLI donne au développeur moins de maux de tête pendant le processus de construction.

La méthode CLI est votre meilleur pari pour un développeur qui souhaite adapter le projet pour utiliser la compilation Ahead of Time.

Tout d’abord, CLI doit être installé dans notre application Angular ; nous ouvrons notre terminal, tapons npm install -g @angular/cli et appuyons sur Entrée.

Une fois que cela a été entièrement installé, nous procédons à un nouveau dossier et nous créons une nouvelle application en tapant ng new newApp. Nous passons donc à ce dossier pour commencer à créer notre application.

Une fois que nous développons notre application, nous regroupons l’application en tapant ng build.

Il est généralement idéal pour compresser les applications groupées, car cela accélère le chargement de l’application et fonctionne généralement efficacement.

Nous pouvons compresser en utilisant la compression Brotli. Nous ouvrons le terminal et tapons : for i in dist/*/*; do brotli $i.

Ensuite, nous avons fini de regrouper notre Angular avec Angular CLI.

Utiliser Webpack pour regrouper une application Angular pour la production

La méthode webpack est souvent considérée comme un puissant bundle de modules. Il surveille les codes sources des applications construites et recherche les déclarations d'importation.

Il développe deux graphiques de dépendance, puis publie deux fichiers bundle pour l’application. L’un est le fichier app.js, qui contient uniquement le code de l’application, et l’autre s’appelle le fichier vendor.js, qui contient toutes les dépendances du fournisseur.

Pour installer le webpack, nous créons d’abord un nouveau dossier de projet, appelé angular-webpack, nous cd dans ce dossier, créons un fichier appelé package.json, et copions les codes suivants dedans.

Extrait de code (package.json) :

{
  "name": "angular2-webpack",
  "version": "1.0.0",
  "description": "A webpack starter for Angular",
  "scripts": {
    "start": "webpack-dev-server --inline --progress --port 8080",
    "test": "karma start",
    "build": "rimraf dist && webpack --config config/webpack.prod.js --progress --profile --bail"
  },
  "license": "MIT",
  "dependencies": {
    "@angular/common": "~4.2.0",
    "@angular/compiler": "~4.2.0",
    "@angular/core": "~4.2.0",
    "@angular/forms": "~4.2.0",
    "@angular/http": "~4.2.0",
    "@angular/platform-browser": "~4.2.0",
    "@angular/platform-browser-dynamic": "~4.2.0",
    "@angular/router": "~4.2.0",
    "core-js": "^2.4.1",
    "rxjs": "5.0.1",
    "zone.js": "^0.8.4"
  },
  "devDependencies": {
    "@types/node": "^6.0.45",
    "@types/jasmine": "2.5.36",
    "angular2-template-loader": "^0.6.0",
    "awesome-typescript-loader": "^3.0.4",
    "css-loader": "^0.26.1",
    "extract-text-webpack-plugin": "2.0.0-beta.5",
    "file-loader": "^0.9.0",
    "html-loader": "^0.4.3",
    "html-webpack-plugin": "^2.16.1",
    "jasmine-core": "^2.4.1",
    "karma": "^1.2.0",
    "karma-chrome-launcher": "^2.0.0",
    "karma-jasmine": "^1.0.2",
    "karma-sourcemap-loader": "^0.3.7",
    "karma-webpack": "^2.0.1",
    "null-loader": "^0.1.1",
    "raw-loader": "^0.5.1",
    "rimraf": "^2.5.2",
    "style-loader": "^0.13.1",
    "typescript": "~2.3.1",
    "webpack": "2.2.1",
    "webpack-dev-server": "2.4.1",
    "webpack-merge": "^3.0.0"
  }
}

Ensuite, nous ouvrons un terminal et installons ces packages à l’aide de npm install. Nous exécutons la commande ng build lorsque le projet est terminé.

Utiliser Gulp pour regrouper une application Angular pour la production

Gulp est un autre outil puissant pour regrouper des applications Angular sur le framework Angular 2, car il est plus efficace pour créer des projets complexes et plus importants. De plus, certaines parties du processus de génération de gulp peuvent être automatisées, ce qui rend le flux de travail moins lourd.

Tout d’abord, nous allons créer un nouveau projet ; nous allons dans le dossier et installons gulp depuis le terminal, en utilisant $npm install gulp.

Nous créons un fichier gulpfile.js dans le dossier du projet et copions tous les fichiers HTML du dossier app/views vers le dossier dist. Ensuite, nous exécutons $gulp copy-html-files depuis le terminal.

Les développeurs n’ont pas besoin d’exécuter toutes les tâches impliquées dans la construction gulp ; il faut installer $npm install gulp-run-sequence. Il permet d’exécuter plusieurs tâches du gulpfile.js depuis le terminal.

Nous lançons le $gulp build lorsque notre projet est entièrement prêt.

Dans les cas où nous voulons supprimer du contenu du dossier dist, peut-être avant le versioning, ou si le développeur veut effacer les fichiers précédents et injecter de nouveaux fichiers, il suffit de taper : npm install gulp-clean dans l’aérogare.

Étant donné que les étapes requises pour créer une application Angular avec gulp sont assez longues, nous pouvons automatiser ce processus. Nous installons npm install gulp-watch; cela ré-exécutera toutes les commandes définies dans la séquence d’exécution chaque fois que nous modifions nos fichiers.

Conclusion

Il existe différentes façons de créer une application sur Angular de manière optimale. la méthode adoptée dépend principalement du type de projet que nous essayons de construire, du temps et de l’expérience.