Was ist die beste Methode zum Bündeln von Angular (Version 2, 4, 6, ...) für die Produktion auf einem Live-Webserver.
Bitte geben Sie in Ihren Antworten die Angular-Version an, damit wir besser verfolgen können, wann es zu späteren Versionen kommt.
ng new projectFolder
erstellt eine neue Anwendungng build --prod
(in der Kommandozeile ausführen, wenn das Verzeichnis projectFolder
ist)
flag prod
bundle for production (siehe die Angular-Dokumentation für die Liste der Optionen, die mit dem production-Flag enthalten sind).
Komprimieren Sie die Ressourcen mit Brotli compression mit folgendem Befehl
for i in dist/*; do brotli $i; done
Bündel werden standardmäßig in projectFolder/dist(/$projectFolder für 6) erzeugt
Größen mit Angular 8.2.11
mit CLI 8.3.13
und Option CSS ohne Angular-Routing
dist/assets
Ressourcen, die aus der Angular-CLI-Assets-Konfiguration kopiert wurdenSie können eine Vorschau Ihrer Anwendung erhalten, indem Sie den Befehl ng serve --prod
verwenden, der einen lokalen HTTP-Server startet, so dass die Anwendung mit Produktionsdateien über http://localhost:4200 zugänglich ist.
Für einen produktiven Einsatz müssen Sie alle Dateien aus dem Ordner dist
auf dem HTTP-Server Ihrer Wahl bereitstellen.
Bündel werden in projectFolder / bundles / erzeugt
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',
};
<!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>
Das Beste, was ich bisher tun konnte :)
Angular.io hat ein Schnellstart-Tutorial. Ich habe dieses Tutorial kopiert und mit ein paar einfachen Gulp-Tasks erweitert, um alles in einem Dist-Ordner zu bündeln, der auf den Server kopiert werden kann und einfach so funktioniert. Ich habe versucht, alles so zu optimieren, dass es auf Jenkis CI gut funktioniert, so dass node_modules gecached werden können und nicht kopiert werden müssen.
Quellcode mit Beispielanwendung auf Github: https://github.com/Anjmao/angular2-production-workflow
Node: Sie können zwar immer Ihren eigenen Build-Prozess erstellen, aber ich empfehle dringend, angular-cli zu verwenden, da es alle benötigten Workflows enthält und jetzt perfekt funktioniert. Wir sind bereits mit ihm in der Produktion und don't haben keine Probleme mit angular-cli überhaupt.