Was ist die beste Methode, um Angular (Version 2, 4, 6, ...) für die Produktion auf einem Live-Webserver zu bündeln?

Bitte fügen Sie die Angular-Version in die Antworten ein, damit wir besser nachverfolgen können, wenn sie auf spätere Versionen umgestellt wird.

2.x, 4.x, 5.x, 6.x, 7.x, 8.x, 9.x (TypeScript) mit Angular CLI

OneTime-Setup

• npm install -g @angular/cli
• ng new projectFolder erstellt eine neue Anwendung

Bündelungsschritt

• ng build --prod(In der Befehlszeile ausführen, wenn sich das Verzeichnis befindet projectFolder)

  Flagge prod Bundle für die Produktion (eine Liste der Optionen, die im Produktions-Flag enthalten sind, finden Sie in der Angular-Dokumentation ).

• Komprimieren mit Brotli Komprimieren Sie die Ressourcen mit dem folgenden Befehl

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

Bundles werden standardmäßig in projectFolder / dist (/ $ projectFolder für 6) generiert.

Ausgabe

Größen mit Angular 9.0.0mit CLI 9.0.1und Option CSS ohne Angular-Routing

• dist/main-[es-version].[hash].js Ihre Anwendung gebündelt [ES5-Größe: 158 KB für neue Angular CLI-Anwendung leer, 40 KB komprimiert].
• dist/polyfill-[es-version].[hash].bundle.js die Polyfill-Abhängigkeiten (@angular, RxJS ...) gebündelt [ES5-Größe: 127 KB für neue Angular CLI-Anwendung leer, 37 KB komprimiert].
• dist/index.html Einstiegspunkt Ihrer Bewerbung.
• dist/runtime-[es-version].[hash].bundle.js Webpack-Lader
• dist/style.[hash].bundle.css die Stildefinitionen
• dist/assets Ressourcen, die aus der Konfiguration der Angular CLI-Assets kopiert wurden

Einsatz

Sie können eine Vorschau Ihrer Anwendung mit dem ng serve --prodBefehl abrufen, mit dem ein lokaler HTTP-Server gestartet wird, sodass auf die Anwendung mit den Produktionsdateien über http: // localhost: 4200 zugegriffen werden kann .

Für eine Produktionsnutzung müssen Sie alle Dateien aus dem distOrdner auf dem HTTP-Server Ihrer Wahl bereitstellen .

2.0.1 Final mit Gulp (TypeScript - Ziel: ES5)

OneTime-Setup

• npm install (In cmd ausführen, wenn das Verzeichnis projectFolder ist.)

Schritte bündeln

• npm run bundle (In cmd ausführen, wenn das Verzeichnis projectFolder ist.)

  Bundles werden in projectFolder / bundles / generiert

Ausgabe

• bundles/dependencies.bundle.js[ Größe: ~ 1 MB (so klein wie möglich)]
  • enthält rxjs und Winkelabhängigkeiten, nicht die gesamten Frameworks
• bundles/app.bundle.js[ Größe: hängt von Ihrem Projekt ab , meins ist ~ 0,5 MB ]
  • enthält Ihr Projekt

Dateistruktur

• projectFolder / app / (alle Komponenten, Anweisungen, Vorlagen usw.)
• 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 ( das gleiche wie Kurzanleitung , gerade gezeigt devDependencies und NPM-Skripte erforderlich zu bündeln)

{
  "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 (gleich wie Kurzanleitung , nicht vorhanden mehr da)

(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 (hat gerade den Unterschied zu systemjs.config.json gezeigt)

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

• projectFolder / index.html (Produktion) - Die Reihenfolge der Skript-Tags ist kritisch. Wenn Sie das dist-systemjs.config.jsTag nach den Bundle-Tags platzieren, kann das Programm weiterhin ausgeführt werden, das Abhängigkeits-Bundle wird jedoch ignoriert und Abhängigkeiten werden aus dem node_modulesOrdner geladen .

<!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>

• In projectFolder / app / boot.ts befindet sich der Bootstrap.

Das Beste was ich bisher machen konnte :)

Winkel 2 mit Webpack (ohne CLI-Setup)

1- Das Tutorial des Angular2-Teams

Das Angular2-Team hat ein Tutorial zur Verwendung von Webpack veröffentlicht

Ich habe die Dateien aus dem Tutorial in einem kleinen GitHub-Seed-Projekt erstellt und platziert . So können Sie den Workflow schnell ausprobieren.

Anleitung :

• npm installieren

• npm starten . Zur Entwicklung. Dadurch wird ein virtueller "dist" -Ordner erstellt, der unter Ihrer lokalen Hostadresse geladen wird.

• npm run build . Für die Produktion. "Dadurch wird eine physische" dist "-Ordnerversion erstellt, die an einen Webserver gesendet werden kann. Der dist-Ordner ist 7,8 MB groß, aber nur 234 KB sind erforderlich, um die Seite in einen Webbrowser zu laden.
  
  

2 - Ein Webkit-Starterkit

Dieses Webpack Starter Kit bietet mehr Testfunktionen als das obige Tutorial und scheint sehr beliebt zu sein.

Angular 2-Produktionsworkflow mit SystemJs Builder und gulp

Angular.io hat ein Schnellstart-Tutorial. Ich habe dieses Tutorial kopiert und um einige einfache Gulp-Aufgaben 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, sodass node_modules zwischengespeichert werden können und nicht kopiert werden müssen.

Quellcode mit Beispiel-App auf Github: https://github.com/Anjmao/angular2-production-workflow

1. Bereinigen Sie Typoskripte kompilierte js-Dateien und den dist-Ordner
2. Kompilieren Sie Typoskriptdateien im App-Ordner
3. Verwenden Sie den SystemJs-Bundler, um alles in den dist-Ordner mit generierten Hashes für die Aktualisierung des Browser-Cache zu bündeln
4. Verwenden Sie gulp-html-replace, um index.html-Skripte durch gebündelte Versionen zu ersetzen und in den dist-Ordner zu kopieren
5. Kopieren Sie alles im Assets-Ordner in den dist-Ordner

Knoten : Sie können zwar immer Ihren eigenen Erstellungsprozess erstellen, ich empfehle jedoch dringend, Angular-CLI zu verwenden, da alle erforderlichen Workflows vorhanden sind und jetzt einwandfrei funktionieren. Wir verwenden es bereits in der Produktion und haben überhaupt keine Probleme mit Angular-Cli.

Angular CLI 1.xx (Funktioniert mit Angular 4.xx, 5.xx)

Dies unterstützt:

• Winkel 2.x und 4.x.
• Neuestes Webpack 2.x.
• Angular AoT-Compiler
• Routing (normal und faul)
• SCSS
• Benutzerdefinierte Dateibündelung (Assets)
• Zusätzliche Entwicklungswerkzeuge (Linter-, Unit- und End-to-End-Test-Setups)

Ersteinrichtung

ng neuer Projektname --routing

Du kannst hinzufügen --style=scss für SASS .scss Unterstützung .

Du kannst hinzufügen --ng4 Angular 4 anstelle von Angular 2 verwenden.

Nach dem Erstellen des Projekts wird die CLI automatisch npm installfür Sie ausgeführt. Wenn Sie stattdessen Garn verwenden oder nur das Projektskelett ohne Installation betrachten möchten, lesen Sie hier , wie es geht .

Schritte bündeln

Im Projektordner:

ng build -prod

In der aktuellen Version müssen Sie angeben --aot manuell , da es im Entwicklungsmodus verwendet werden kann (obwohl dies aufgrund der Langsamkeit nicht praktikabel ist).

Dies führt auch eine AoT-Kompilierung für noch kleinere Bundles durch (kein Angular-Compiler generiert stattdessen eine Compiler-Ausgabe). Die Bundles sind mit AoT viel kleiner, wenn Sie Angular 4 verwenden, da der generierte Code kleiner ist.
Sie können Ihre App mit AoT im Entwicklungsmodus (Quellkarten, keine Minimierung) und AoT testen, indem Sie ausführenng build --aot .

Ausgabe

Das Standardausgabeverzeichnis ist ./dist, obwohl es in geändert werden kann ./angular-cli.json.

Bereitstellbare Dateien

Das Ergebnis des Erstellungsschritts ist das Folgende:

(Hinweis: <content-hash>Bezieht sich auf einen Hash / Fingerabdruck des Inhalts der Datei, der als Cache-Busting gedacht ist. Dies ist möglich, da Webpack die scriptTags selbst schreibt. )

• ./dist/assets
  Dateien kopiert wie sie sind von ./src/assets/**
• ./dist/index.html
  Von ./src/index.htmlnach webpack Skripte ihm hinzufügen
  Quelle Vorlagendatei konfigurierbar ist./angular-cli.json
• ./dist/inline.js
  Kleiner Webpack Loader / Polyfill
• ./dist/main.<content-hash>.bundle.js
  Die Haupt-JS-Datei mit allen generierten / importierten JS-Skripten
• ./dist/styles.<content-hash>.bundle.js
  Wenn Sie Webpack-Loader für CSS verwenden (CLI-Methode), werden diese hier über JS geladen

In älteren Versionen wurden auch komprimierte Versionen zum Überprüfen ihrer Größe und .mapSourcemaps-Dateien erstellt. Dies geschieht jedoch nicht mehr, da immer wieder nach dem Entfernen dieser Dateien gefragt wurde.

Andere Dateien

In bestimmten anderen Fällen finden Sie möglicherweise andere unerwünschte Dateien / Ordner:

• ./out-tsc/
  Von ./src/tsconfig.json'soutDir
• ./out-tsc-e2e/
  Von ./e2e/tsconfig.json'soutDir
• ./dist/ngfactory/
  Vom AoT-Compiler (nicht konfigurierbar, ohne die CLI ab Beta 16 zu verzweigen)

Bis heute finde ich das Ahead-of-Time Compilation-Kochbuch immer noch als das beste Rezept für die Produktionsbündelung. Sie finden es hier: https://angular.io/docs/ts/latest/cookbook/aot-compiler.html

Meine bisherige Erfahrung mit Angular 2 ist, dass AoT die kleinsten Builds fast ohne Ladezeit erstellt. Und das Wichtigste bei der Frage hier ist, dass Sie nur wenige Dateien an die Produktion senden müssen.

Dies scheint darauf zurückzuführen zu sein, dass der Angular-Compiler nicht mit den Produktions-Builds ausgeliefert wird, da die Vorlagen "Ahead of Time" kompiliert werden. Es ist auch sehr cool zu sehen, wie Ihr HTML-Vorlagen-Markup in Javascript-Anweisungen umgewandelt wird, die sich nur sehr schwer in das ursprüngliche HTML zurückentwickeln lassen.

Ich habe ein einfaches Video erstellt, in dem ich die Downloadgröße, die Anzahl der Dateien usw. für eine Angular 2-App in dev vs AoT Build demonstriere - das Sie hier sehen können:

https://youtu.be/ZoZDCgQwnmQ

Den im Video verwendeten Quellcode finden Sie hier:

https://github.com/fintechneo/angular2-templates

        **Production build with

         - Angular Rc5
         - Gulp
         - typescripts 
         - systemjs**

        1)con-cat all js files  and css files include on index.html using  "gulp-concat".
          - styles.css (all css concat in this files)
          - shims.js(all js concat in this files)

        2)copy all images and fonts as well as html files  with gulp task to "/dist".

        3)Bundling -minify angular libraries and app components mentioned in systemjs.config.js file.
         Using gulp  'systemjs-builder'

            SystemBuilder = require('systemjs-builder'),
            gulp.task('system-build', ['tsc'], function () {
                var builder = new SystemBuilder();
                return builder.loadConfig('systemjs.config.js')
                    .then(function () {
                        builder.buildStatic('assets', 'dist/app/app_libs_bundle.js')
                    })
                    .then(function () {
                        del('temp')
                    })
            });


    4)Minify bundles  using 'gulp-uglify'

jsMinify = require('gulp-uglify'),

    gulp.task('minify', function () {
        var options = {
            mangle: false
        };
        var js = gulp.src('dist/app/shims.js')
            .pipe(jsMinify())
            .pipe(gulp.dest('dist/app/'));
        var js1 = gulp.src('dist/app/app_libs_bundle.js')
            .pipe(jsMinify(options))
            .pipe(gulp.dest('dist/app/'));
        var css = gulp.src('dist/css/styles.min.css');
        return merge(js,js1, css);
    });

5) In index.html for production 

    <html>
    <head>
        <title>Hello</title>

        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta charset="utf-8" />

       <link rel="stylesheet" href="app/css/styles.min.css" />   
       <script type="text/javascript" src="app/shims.js"></script>  
       <base href="https://stackoverflow.com/">
    </head>
     <body>
    <my-app>Loading...</my-app>
     <script type="text/javascript" src="app/app_libs_bundle.js"></script> 
    </body>

    </html>

 6) Now just copy your dist folder to '/www' in wamp server node need to copy node_modules in www.

Sie können Ihre Winkelanwendung githubmithilfe von Winkel-Cli-Ghpages bereitstellen

Schauen Sie sich den Link an, um herauszufinden, wie Sie mit dieser CLI bereitstellen können.

Die bereitgestellte Website wird in einer Zweigstelle in gespeichert github Regel

Gh-Seiten

Mit use können Sie den Git-Zweig klonen und ihn wie eine statische Website auf Ihrem Server verwenden

"Best" hängt vom Szenario ab. Es gibt Zeiten, in denen Sie sich nur um das kleinstmögliche Einzelpaket kümmern, aber in großen Apps müssen Sie möglicherweise das verzögerte Laden in Betracht ziehen. Irgendwann wird es unpraktisch, die gesamte App als einzelnes Bundle bereitzustellen.

Im letzteren Fall ist Webpack im Allgemeinen der beste Weg, da es die Codeaufteilung unterstützt.

Für ein einzelnes Bundle würde ich Rollup oder den Closure-Compiler in Betracht ziehen, wenn Sie sich mutig fühlen :-)

Ich habe Beispiele aller Angular-Bundler erstellt, die ich jemals hier verwendet habe: http://www.syntaxsuccess.com/viewarticle/angular-production-builds

Den Code finden Sie hier: https://github.com/thelgevold/angular-2-samples

Winkelversion: 4.1.x.

Richten Sie Angular 4 mit Webpack 3 innerhalb einer Minute ein. Ihr ENV-Bundle für Entwicklung und Produktion wird ohne Probleme fertig. Befolgen Sie einfach das unten stehende Github-Dokument

https://github.com/roshan3133/angular2-webpack-starter

Bitte versuchen Sie es unter dem CLI-Befehl im aktuellen Projektverzeichnis. Es wird ein dist-Ordner-Bundle erstellt. So können Sie alle Dateien im dist-Ordner für Bereitstellungen hochladen.

ng build --prod --aot --base-href.

ng serve arbeitet für die Bereitstellung unserer Anwendung für Entwicklungszwecke. Was ist mit der Produktion? Wenn wir in unsere Datei package.json schauen, können wir sehen, dass es Skripte gibt, die wir verwenden können:

"scripts": {
  "ng": "ng",
  "start": "ng serve",
  "build": "ng build --prod",
  "test": "ng test",
  "lint": "ng lint",
  "e2e": "ng e2e"
},

Das Build-Skript verwendet den ng-Build der Angular CLI mit dem Flag --prod. Versuchen wir das jetzt. Wir können es auf zwei Arten tun:

# mit den npm-Skripten

npm run build

# direkt mit dem cli

ng build --prod

Dieses Mal erhalten wir vier Dateien anstelle der fünf. Das Flag --prod weist Angular an, unsere Anwendung viel kleiner zu machen.