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

Как лучше всего связать Angular (версии 2, 4, 6,...) для производства на живом веб-сервере.

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

Ответ 1

`2.x, 4.x, 5.x, 6.x, 7.x, 8.x` (TypeScript) с угловым интерфейсом командной строки

Настройка OneTime

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

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

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

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

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

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

Выход

Размеры с Angular 8.2.5 с CLI 8.3.3 и опцией CSS без angular маршрутизации

dist/main-[es-version].[hash].js Ваше приложение в комплекте [размер ES5: 183 КБ для нового приложения Angular CLI пустое, 44 КБ сжатое].
dist/polyfill-[es-version].[hash].bundle.js Связанные с полифиллом зависимости (@angular, RxJS...) в комплекте [размер ES5: 122 КБ для нового приложения Angular CLI пусто, 36 КБ сжато].
dist/index.html точка входа вашего приложения.
dist/runtime-[es-version].[hash].bundle.js загрузчик веб-пакетов
dist/style.[hash].bundle.css определения стиля
dist/assets ресурсы, скопированные из конфигурации ресурсов Angular CLI

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

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

Ответ 2

`2.0.1 Final` с помощью Gulp (TypeScript - Цель: ES5)

Настройка OneTime

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

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

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

сгенерированы в projectFolder/bundles/

Выход

bundles/dependencies.bundle.js [ размер: ~ 1 МБ (как можно меньше)]
- содержит зависимости rxjs и angular, а не все структуры
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 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) - порядок тэгов script имеет решающее значение. Размещение тега 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 - это где загрузочный файл.

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

Ответ 3

Angular 2 с помощью Webpack (без настройки CLI)

1- Учебное пособие командой Angular2

Команда Angular2 опубликовала учебник для использования Webpack

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

Инструкции

npm install
npm start. Для развития. Это создаст виртуальную папку "dist", которая будет загружена с помощью вашего адреса localhost.
npm run build. Для производства. "Это создаст физическую версию" dist ", чем может быть отправлена на веб-сервер. Папка dist - 7.8MB, но для загрузки страницы в веб-браузере требуется всего 234 КБ.

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

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

Ответ 4

Angular 2 производственный рабочий процесс с конструктором SystemJs и gulp

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

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

Этапы производства

Очистить скрипты, скомпилированные js файлы и папку dist
Скомпилировать typescript файлы внутри папки приложения
Используйте SystemJs bundler для того, чтобы связать все с диском dist с созданными хэшами для обновления кеша браузера.
Используйте gulp -html-replace, чтобы заменить скрипты index.html в комплекте версий и скопировать в папку dist
Скопировать все содержимое папки с данными в папку dist

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

Ответ 5

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

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

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

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

ng new project-name --routing

Вы можете добавить --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 умолчанию - ./dist, хотя его можно изменить в ./angular-cli.json.

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

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

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

./dist/assets
Файлы скопированы как есть с ./src/assets/**
./dist/index.html
Из ./src/index.html, после добавления в него скриптов веб-пакета
Исходный файл шаблона настраивается в ./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/
From ./src/tsconfig.json outDir
./out-tsc-e2e/
From ./e2e/tsconfig.json outDir
./dist/ngfactory/
Из компилятора AoT (не настраивается без разветвления CLI начиная с бета-версии 16)

Ответ 6

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

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

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

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

https://youtu.be/ZoZDCgQwnmQ

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

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

Ответ 7

        **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.

Ответ 8

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

проверьте ссылку, чтобы узнать, как ее использовать, используя этот cli.

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

GH-страницы

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

Ответ 9

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

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

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

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

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

Angular версия: 4.1.x

Ответ 10

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

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

Ответ 11

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

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

Ответ 12

У меня также стояла одна и та же проблема - подготовить готовый комплект. Я добавил следующую строку кода в package.json

"build:prod": "webpack --config config/webpack.prod.js  --progress --profile --bail",

и вызвал его с помощью npm

npm run build:prod

Это помогло мне подготовить готовые js и соответствующие файлы карт.

Ответ 1

2.x, 4.x, 5.x, 6.x, 7.x, 8.x (TypeScript) с угловым интерфейсом командной строки

Настройка OneTime

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

Выход

Ответ 2

2.0.1 Final с помощью Gulp (TypeScript - Цель: ES5)

Настройка OneTime

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

Выход

Структура файла

Ответ 3

Angular 2 с помощью Webpack (без настройки CLI)

1- Учебное пособие командой Angular2

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

Ответ 4

Angular 2 производственный рабочий процесс с конструктором SystemJs и gulp

Ответ 5

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

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

Bundle Steps

Выход

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

Другие файлы

Ответ 6

Ответ 7

Ответ 8

Ответ 9

Ответ 10

Ответ 11

Ответ 12

`2.x, 4.x, 5.x, 6.x, 7.x, 8.x` (TypeScript) с угловым интерфейсом командной строки

`2.0.1 Final` с помощью Gulp (TypeScript - Цель: ES5)