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

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

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

315
04 июня '16 в 16:59
источник поделиться
12 ответов

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 комплект продукции для производства (список документации, включенной в флаг производства, см. в документации по Angular).

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

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

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

Выход

Размеры с Angular 8.0.0-rc.2 с CLI 8.0.0-rc.2 и опцией CSS без угловой маршрутизации

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

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

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

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

329
04 авг. '16 в 14:18
источник

Связанные вопросы


Похожие вопросы

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);
    });
});

{
  "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 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 - это где загрузочный файл.

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

53
17 июня '16 в 9:32
источник

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 предлагает несколько дополнительных функций тестирования, чем вышеупомянутый учебник, и кажется довольно популярным.

22
08 окт. '16 в 23:41
источник

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.

14
18 сент. '16 в 21:59
источник

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

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

  • Angular 2.x и 4.x
  • Последний веб-пакет 2.x
  • Angular Компилятор AoT
  • Маршрутизация (нормальная и ленивая)
  • SCSS
  • Пользовательское связывание файлов (активы)
  • Дополнительные инструменты для разработки (тестовые настройки с помощью linter, unit и end-to-end)

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

ng new project-name --routing

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

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

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

Шаги набора

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

ng build -prod

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

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

Выход

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

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

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

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

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

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

Другие файлы

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

  • ./out-tsc/
    Из ./src/tsconfig.json outDir
  • ./out-tsc-e2e/
    Из ./e2e/tsconfig.json outDir
  • ./dist/ngfactory/
    Из компилятора AoT (не настраивается без наложения CLI на бета-версию 16).
13
06 окт. '16 в 13:39
источник

На сегодняшний день я по-прежнему считаю, что кулинарная книга "Вперед сборщика времени" является лучшим рецептом для объединения продуктов. Вы можете найти его здесь: 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

5
13 янв. '17 в 22:55
источник

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

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

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

GH-страницы

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

2
01 сент. '17 в 10:26
источник
        **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.
2
10 янв. '17 в 11:42
источник

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

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

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

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

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

Angular версия: 4.1.x

1
23 мая '17 в 4:53
источник

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

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

0
03 сент. '17 в 15:04
источник

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

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

0
15 мая '19 в 10:42
источник

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

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

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

npm run build:prod

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

-2
07 дек. '16 в 13:41
источник

Посмотрите другие вопросы по меткам или Задайте вопрос