Как собрать приложение Angular для производства

Я хотел бы отследить и обновить в этой теме новейший лучший (и, надеюсь, самый простой) метод для объединения Angular (версии 2, 4, ...) для производства на живом веб-сервере.

Пожалуйста, включите версию Angular в ответы, чтобы мы могли лучше отслеживать ее при переходе к более поздним версиям.

Источник

14 ответов

Решение

2.x, 4.x, 5.x, 6.x, 7.x (TypeScript) с угловым CLI

Настройка OneTime

  • npm install -g @angular/cli
  • ng new projectFolder создает новое приложение

Шаг связывания

  • ng build --prod (запустить в командной строке, когда каталог projectFolder)

    флаг prod комплект для производства (см. документацию Angular для списка опций, включенных в флаг производства).

  • Сжатие с использованием Brotli, сжатие ресурсов с помощью следующей команды

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

пакеты по умолчанию генерируются в projectFolder/dist(/$projectFolder для 6)

Выход

Размеры с угловым 7.0.4 с CLI 7.0.6 и вариант CSS без угловой маршрутизации

  • dist/main.[hash].bundle.js Ваше приложение в комплекте [размер: 169 КБ для нового приложения Angular CLI пусто, 42 КБ сжато].
  • dist/polyfill.[hash].bundle.js Связанные с полифиллом зависимости (@angular, RxJS...) в комплекте [размер: 37 КБ для нового приложения Angular CLI пусто, 11 КБ сжато].
  • dist/index.html точка входа вашего приложения.
  • dist/inline.[hash].bundle.js веб-загрузчик
  • dist/style.[hash].bundle.css определения стиля
  • dist/assets ресурсы, скопированные из конфигурации ресурсов Angular CLI

развертывание

Вы можете получить предварительный просмотр вашего приложения, используя ng serve --prod команда, которая запускает локальный HTTP-сервер, так что приложение с рабочими файлами доступно по http://localhost:4200/.

Для производственного использования вы должны развернуть все файлы из dist папку на HTTP-сервере по вашему выбору.

Источник

2.0.1 Final используя Gulp (TypeScript - Target: ES5)

Настройка OneTime

  • npm install (запускается в cmd, когда direcory является projectFolder)

Шаги объединения

  • npm run bundle (запускается в cmd, когда direcory является projectFolder)

    комплекты генерируются в projectFolder / bundles /

Выход

  • bundles/dependencies.bundle.js [ размер: ~ 1 МБ (как можно меньше) ]
    • содержит rxjs и угловые зависимости, а не целые рамки
  • bundles/app.bundle.js [ размер: зависит от вашего проекта, мой ~ 0,5 МБ ]
    • содержит ваш проект

Файловая структура

  • projectFolder / app / (все компоненты, директивы, шаблоны и т. д.)
  • 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 (аналогично руководству по быстрому запуску, только что показаны devDependencies и npm-скрипты, необходимые для комплектации) 

{
  "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 (так же, как руководство по быстрому запуску, там больше нет) 

(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 (только что показано отличие от systemjs.config.json) 

var map = {
    'app':                        'dist/app',
  };
  • projectFolder / index.html (production) - Порядок тегов скрипта имеет решающее значение. Размещение dist-systemjs.config.js тег после тега пакета все еще позволит программе работать, но пакет зависимостей будет игнорироваться, и зависимости будут загружаться из 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>
  • projectFolder / app / boot.ts - это место, где находится начальная загрузка.

Лучшее, что я мог сделать еще:)

Источник

Angular 2 с Webpack (без настройки CLI)

1- Учебник от команды Angular2

Команда Angular2 опубликовала руководство по использованию Webpack

Я создал и поместил файлы из учебника в небольшой начальный проект GitHub. Таким образом, вы можете быстро попробовать рабочий процесс.

Инструкции:

  • установка npm

  • нпм начало. Для развития. Это создаст виртуальную папку "dist", которая будет загружена в реальном времени по вашему локальному адресу.

  • нпм запустить сборку. Для производства. "Это создаст физическую версию папки" dist ", которую можно отправить на веб-сервер. Папка dist имеет размер 7,8 МБ, но для загрузки страницы в веб-браузер требуется всего 234 КБ".

2 - Стартовый комплект Webkit

Этот стартовый комплект Webpack предлагает больше возможностей для тестирования, чем приведенный выше учебник, и кажется довольно популярным.

Источник

Angular CLI 1.xx (работает с Angular 4.xx, 5.xx)

Это поддерживает:

  • Угловые 2.х и 4.х
  • Последний Webpack 2.x
  • Угловой компилятор AoT
  • Маршрутизация (нормальная и ленивая)
  • SCSS
  • Пользовательский пакет файлов (активы)
  • Дополнительные инструменты разработки (линтер, юнит и сквозные тестовые настройки)

Начальная настройка 

ng новое имя проекта - маршрутизация

Можете добавить --style=scss для поддержки SASS .scss.

Можете добавить --ng4 для использования Angular 4 вместо Angular 2.

После создания проекта CLI автоматически запустится npm install для тебя. Если вы хотите вместо этого использовать Yarn или просто посмотреть на скелет проекта без установки, проверьте, как это сделать, здесь.

Bundle Steps

Внутри папки проекта:

ng build -prod

В текущей версии вам нужно указать --aot вручную, потому что его можно использовать в режиме разработки (хотя это не практично из-за медлительности).

Это также выполняет AoT-компиляцию для еще меньших пакетов (без углового компилятора, вместо этого генерируется вывод компилятора). Пакеты намного меньше с AoT, если вы используете Angular 4, так как сгенерированный код меньше.
Вы можете протестировать свое приложение с AoT в режиме разработки (исходные карты, без минификации) и AoT, запустив ng build --aot,

Выход

Выходной каталог по умолчанию ./dist хотя это можно изменить в ./angular-cli.json,

Развертываемые файлы

Результатом шага сборки является следующее:

(Заметка: <content-hash> относится к хешу / отпечатку пальца содержимого файла, который предназначен для очистки кеша, это возможно, поскольку Webpack записывает script теги сами по себе)

  • ./dist/assets
    Файлы скопированы как есть ./src/assets/**
  • ./dist/index.html
    От ./src/index.html после добавления в него скриптов webpack
    Исходный файл шаблона настраивается в ./angular-cli.json
  • ./dist/inline.js
    Небольшой погрузчик для веб-пакетов / с полифилом
  • ./dist/main.<content-hash>.bundle.js
    Основной файл.js, содержащий все созданные и импортированные скрипты.js.
  • ./dist/styles.<content-hash>.bundle.js
    Когда вы используете загрузчики Webpack для CSS, что является способом CLI, они загружаются через JS здесь

В более старых версиях он также создавал GZIP-версии для проверки их размера, и .map файлы исходных карт, но этого больше не происходит, так как люди постоянно просят их удалить.

Другие файлы

В некоторых других случаях вы можете найти другие нежелательные файлы / папки:

  • ./out-tsc/
    От ./src/tsconfig.json "s outDir
  • ./out-tsc-e2e/
    От ./e2e/tsconfig.json "s outDir
  • ./dist/ngfactory/
    Из компилятора AoT (не настраивается без разветвления интерфейса командной строки начиная с бета-версии 16)
Источник

Рабочий процесс Angular 2 с помощью SystemJs builder и gulp

У Angular.io есть краткое руководство. Я скопировал этот учебник и расширил его несколькими простыми задачами для объединения всего в папку dist, которую можно скопировать на сервер и работать точно так же. Я попытался оптимизировать все, чтобы хорошо работать на Jenkis CI, поэтому node_modules можно кэшировать и не нужно копировать.

Исходный код с примером приложения на Github: https://github.com/Anjmao/angular2-production-workflow

Шаги к производству
  1. Чистые машинописные скрипты скомпилированные js-файлы и папка dist
  2. Компилировать машинописные файлы в папке приложения
  3. Используйте SystemJs bundler, чтобы связать все в папку dist с сгенерированными хешами для обновления кэша браузера.
  4. Используйте gulp-html-replace для замены сценариев index.html на связанные версии и копирование в папку dist
  5. Скопируйте все в папке активов в папку dist

Узел: Хотя вы всегда можете создать свой собственный процесс сборки, но я настоятельно рекомендую использовать angular-cli, потому что у него есть все необходимые рабочие процессы, и он отлично работает сейчас. Мы уже используем его в производстве, и у нас нет проблем с angular-cli.

Источник

На сегодняшний день я все еще нахожу кулинарную книгу с опережением времени как лучший рецепт для производства комплектации. Вы можете найти его здесь: https://angular.io/docs/ts/latest/cookbook/aot-compiler.html

До сих пор мой опыт работы с Angular 2 заключался в том, что AoT создает наименьшие сборки практически без времени загрузки. И самое главное, поскольку вопрос здесь о - вам нужно только отправить несколько файлов в производство.

Похоже, это связано с тем, что компилятор Angular не будет поставляться с производственными сборками, так как шаблоны компилируются "впереди времени". Также очень круто видеть, как разметка вашего HTML-шаблона преобразована в инструкции javascript, которые было бы очень трудно преобразовать в исходный HTML.

Я сделал простое видео, где демонстрирую размер загрузки, количество файлов и т. Д. Для приложения Angular 2 в сборке dev против AoT - вы можете увидеть здесь:

https://youtu.be/ZoZDCgQwnmQ

Вы найдете исходный код, используемый в видео здесь:

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="/">
    </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.
Источник

ng build --configuration production(начиная с angular 14)

Источник

Вы можете развернуть свое угловое приложение на github используя angular-cli-ghpages

Проверьте ссылку, чтобы найти, как развернуть с помощью этого Cli.

развернутый веб-сайт будет храниться в каком-то филиале в github типично

GH-страницы

use может клонировать ветку git и использовать ее как статический сайт на вашем сервере

Источник

"Лучший" зависит от сценария. Есть моменты, когда вы заботитесь только о наименьшем возможном единственном пакете, но в больших приложениях вам может потребоваться отложенная загрузка. В какой-то момент становится нецелесообразным обслуживать все приложение как единый пакет.

В последнем случае Webpack, как правило, лучший способ, так как он поддерживает разбиение кода.

Для одного пакета я бы рассмотрел Rollup или компилятор Closure, если вы чувствуете себя смелым:-)

Я создал образцы всех пакетов Angular, которые я когда-либо использовал здесь: http://www.syntaxsuccess.com/viewarticle/angular-production-builds

Код можно найти здесь: https://github.com/thelgevold/angular-2-samples

Угловая версия: 4.1.x

Источник

ng serve работает для обслуживания нашего приложения в целях разработки. А что насчет производства? Если мы заглянем в наш файл package.json, мы увидим, что есть скрипты, которые мы можем использовать:

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

Сценарий сборки использует сборку ng из Angular CLI с флагом --prod. Давайте попробуем это сейчас. Мы можем сделать это одним из двух способов:

# используя скрипты npm

npm run build

# используя cli напрямую

ng build --prod

На этот раз нам дается четыре файла вместо пяти. Флаг --prod указывает Angular сделать наше приложение намного меньше по размеру.

Источник

Просто установите angular 4 с помощью webpack 3 в течение одной минуты, и ваш комплект ENV для разработки и производства будет готов без каких-либо проблем, просто следуйте приведенной ниже инструкции github.

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

Источник

Пожалуйста, попробуйте выполнить команду CLI в текущем каталоге проекта. Это создаст пакет папки dist. чтобы вы могли загружать все файлы в папку dist для развертывания.

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

Источник

Пожалуйста, используйте следующий cmd в вашем терминале

        ng build --configuration production --aot
Источник
Другие вопросы по тегам