Quelle est la meilleure méthode pour regrouper Angular (version 2, 4, 6, ...) pour la production sur un serveur web en direct.
Veuillez indiquer la version d'Angular dans vos réponses afin que nous puissions mieux suivre l'évolution des versions ultérieures.
2.x, 4.x, 5.x, 6.x, 7.x, 8.x
(TypeScript) avec Angular CLIng new projectFolder
crée une nouvelle applicationng build --prod
(exécuté en ligne de commande lorsque le répertoire est projectFolder
)
*Formater le paquet prod
pour la production (voir la [documentation Angular][1] pour la liste des options incluses avec l'indicateur de production).
Compresser les ressources à l'aide de [Brotli compression][2] en utilisant la commande suivante
for i in dist/* ; do brotli $i ; done
Les bundles sont générés par défaut dans dossier du projet/dist(/$dossier du projet pour 6).
Taille avec Angular 8.2.11
avec CLI 8.3.13
et option CSS sans routage Angular.
dist/main-[es-version].[hash].js
Votre application regroupée [ Taille ES5 : 188 KB pour la nouvelle application Angular CLI vide, 44 KB compressée].dist/polyfill-[es-version].[hash].bundle.js
les dépendances polyfill (@angular, RxJS...) regroupées [ taille ES5 : 122 KB pour une nouvelle application Angular CLI vide, 36 KB compressé].dist/index.html
de votre application.dist/runtime-[es-version].[hash].bundle.js
chargeur webpackdist/style.[hash].bundle.css
les définitions de styledist/assets
les ressources copiées depuis la configuration des actifs d'Angular CLIVous pouvez obtenir un aperçu de votre application en utilisant la commande ng serve --prod
qui démarre un serveur HTTP local de sorte que l'application avec les fichiers de production soit accessible en utilisant http://localhost:4200.
Pour une utilisation en production, vous devez déployer tous les fichiers du dossier dist
dans le serveur HTTP de votre choix.
[1] : https://github.com/angular/angular-cli/wiki/build [2] : https://en.wikipedia.org/wiki/Brotli
2.0.1 Final
utilisant Gulp (TypeScript - Target : ES5)npm install
(exécuté dans cmd quand le répertoire est projectFolder)npm run bundle
(exécuté dans cmd quand le répertoire est projectFolder)Les bundles sont générés dans projectFolder / bundles /
bundles/dependencies.bundle.js
[ taille : ~ 1 MB (le plus petit possible) ]bundles/app.bundle.js
[ taille : dépend de votre projet, le mien fait ~ 0.5 MB ]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);
});
});
{
"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"
}
}
(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);
var map = {
'app': 'dist/app',
};
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 depuis le dossier node_modules
.<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<base href="/"/>
<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>
Le meilleur que j'ai pu faire jusqu'à présent :)
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 juste 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.
Le code source et l'exemple d'application sont disponibles sur Github : https://github.com/Anjmao/angular2-production-workflow
Node : Bien que vous pouvez toujours créer votre propre processus de construction, mais je recommande fortement d'utiliser angular-cli, car il a tous les flux de travail nécessaires et il fonctionne parfaitement maintenant. Nous l'utilisons déjà en production et n'avons aucun problème avec angular-cli du tout.