Як зв’язати кутовий додаток для виробництва


353

Який найкращий метод поєднати Angular (версії 2, 4, 6, ...) для виробництва на живому веб-сервері.

Будь ласка, включіть у відповідь Angular версію, щоб ми могли краще відслідковувати, коли вона переходить до пізніших версій.


Поки що (rc1). Ось кілька рішень stackoverflow.com/questions/37324511/how-to-bundle-angular2-rc1-with-systemjs
Pat M


Тепер rc3 пропонує пакетні версії файлів, які зменшують кількість запитів з 300+ до приблизно 40.
Пат М

2
Гей. Я також ненавиджу WebPack і будую кроки взагалі. Сорт надмірності за те, що просто намагаються зібрати простий веб-сайт. Таким чином я зробив це: github.com/schungx/angular2-bundle
Стівен Чун

Дякую, Стівен. Це було б простим рішенням для частини постачальників. Сподіваючись, що це може бути офіційно запропоновано та оновлено. Я думаю, ви використовуєте щось на зразок Gulp для файлів проекту?
Пт М

Відповіді:


361

2.x, 4.x, 5.x, 6.x, 7.x, 8.x, 9.x (TypeScript) з кутовим CLI

Налаштування 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 for 6)

Вихідні дані

Розміри з кутовим 9.0.0з CLI 9.0.1та опцією CSS без кутової маршрутизації

  • dist/main-[es-version].[hash].jsДодаток у комплекті [розмір ES5: 158 Кб для нової програми Angular CLI порожній, стиснуто 40 КБ ].
  • dist/polyfill-[es-version].[hash].bundle.jsзалежність полізаповнення (@angular, RxJS ...) в комплекті [розмір ES5: 127 Кб для нового додатка Angular CLI порожній, стиснуто 37 КБ ].
  • dist/index.html точка входу вашої заявки.
  • dist/runtime-[es-version].[hash].bundle.js webpack loader
  • dist/style.[hash].bundle.css визначення стилів
  • dist/assets ресурси, скопійовані з конфігурації активів Angular CLI

Розгортання

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

Для виробничого використання вам потрібно розгорнути всі файли з distпапки на обраному вами сервері HTTP.


Я отримав помилку під час запуску npm install -g angular-cli @ webpack: npm ERR! Будь ласка, додайте такий файл із будь-яким запитом підтримки: .... \ npm-debug.log. Ви знаєте, що відбувається?
Чонг Ван

2
@chrismarx він виробляє лише один комплект, що включає всі компоненти з їх html та стилями.
Ніколя Генно

4
У мене була програма, і я хотів використовувати цей метод, тому я запускаю ініціативу з папки проекту. Я зробив решту кроків, але коли я розгортаю свої додатки, це здається порожнім. Єдине, що з’являється - це «програма працює!» повідомлення, чи є якесь місце, де мені потрібно встановити, куди брати файли додатків?
mautrok

2
ng-init видалено з кутового кліпу. github.com/angular/angular-cli/isissue/5176
Pat M

2
Нарешті я позначив це прийнятою відповіддю. Хоча інші рішення можуть також працювати і навіть надавати додаткову гнучкість (я розмістив повідомлення про використання Webpack без CLI). Використання Angular CLI, безумовно, є тим, що дає менше головних болів. Я в кінцевому підсумку використовував Angular CLI і адаптував свій проект, щоб я міг легше використовувати AoT.
Пат М

57

2.0.1 Final за допомогою Gulp (TypeScript - Ціль: 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 (те саме, що керівництво Quickstart , щойно показані devDependitions та 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 (те саме, що посібник із Quickstart , там більше не доступний)

(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 (виробництво) - Порядок тегів сценарію є критичним. Розміщення 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 - це місце завантаження.

Найкраще, що я міг зробити :)


2
Привіт, сценарій gulp створює пакети, але я не впевнений, що має бути у файлі boot.ts? Чи не всі файли зараз у комплекті? Чи виконуємо ми пакет?
chrismarx

2
Ага, я думаю, мені потрібно спробувати ще раз. Я спробував перейти на builder.buildStatic і отримав помилки від rxjs про те, що не завантажувався як commonjs або amd модуль. Я ще раз спробую
chrismarx

1
Мені також незрозуміло, як набори насправді звикають у цій установці? Здається, я стикаюся з абсолютно тими ж проблемами, що і @chrismarx. Я можу створювати пачки, але тоді, здається, все ще завантажується з моєї папки з перекладеною та скопійованою програмою (розташована в dist / app). Якщо я заглянув у свою мережеву панель, я можу побачити, що мої файли, пов’язані з додатком, фактично завантажуються звідти (компоненти тощо), а не все, що стосується програми, що надходить із app.bundle.js. A_Singh, ти можеш поділитися своїм boot.ts? Здається, я чогось тут пропускаю, і я хотів би трохи уточнити.
jbgarr

1
A_Singh, я не бачу, як це допомагає. Після inline-templatesзапуску він вкладає шаблони, а потім створює копію всіх папок та файлів програми на dist/app. Тоді в dist-systemjs.config.jsзіставленні appз dist/appякої знаходиться папка , в якій не буде існувати , якщо ви використовуєте distпапку в кореневому каталозі. Не хочете запускати додаток із distпапки? І якщо це так, у вас не було б distвкладеної папки в кореневу distпапку. Я, мабуть, тут пропускаю щось інше. Чи не потрібно казати systemjs використовувати файли, що входять у комплект, а не звичайні файли, що знаходяться в dist/appпапці?
jbgarr

1
У мене виникає проблема з вашим рішенням, завантаження - це те, чого тут не існує, і коли я замінюю його на "додаток" Я можу помилку, модуль не визначений ".
LoïcR

22

Кутовий 2 з веб-пакетом (без налаштування CLI)

1- Підручник команди Angular2

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

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

Інструкції :

  • npm встановити

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

  • npm run build . Для виробництва. "Це створить фізичну версію папки" dist ", ніж її можна надіслати веб-серверу. Папка dist становить 7,8 МБ, але для завантаження сторінки у веб-браузер фактично потрібно лише 234 КБ.

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

Цей веб- пакет Starter Kit пропонує ще кілька функцій тестування, ніж вищевказаний підручник і здається досить популярним.


привіт, чи можна оновити проект насіння з кутовим 2.1.0? У підручнику зараз використовується кутовий 2.1.0. Я стежив за цим і не зміг змусити його працювати. Помилка http 404 - не вдається знайти app.component.html.
heq99

Я без проблем оновив кутовий 2.1.0. app.component.html викликається з app.component.ts (templateUrl: './app.component.html'). у вас є обидва файли в одній папці додатків?
Пат М

1
Тремтіння дерев, мінімізація та гзіппінг можуть значно зменшити розмір, коли ви йдете на виробництво. ось відмінне прочитання з прикладом, blog.mgechev.com/2016/06/26/…
Hamzeen Hameem

16

Кутовий робочий процес 2 кутовий з конструктором SystemJs та глотком

У Angular.io є підручник із швидкого запуску. Я скопіював цей підручник і доповнив декілька простих завдань із gulp, щоб зв'язати все, щоб розібрати папку, яку можна скопіювати на сервер і працювати просто так. Я намагався оптимізувати все, щоб добре працювати на Jenkis CI, тому node_modules можна кешувати і не потрібно копіювати.

Вихідний код із зразком програми в Github: https://github.com/Anjmao/angular2-production-workflow

Кроки до виробництва
  1. Очистіть машинописи, складені js-файли та папку dist
  2. Компілюйте файли машинопису всередині папки додатків
  3. Використовуйте пакет постачальників SystemJs, щоб згрупувати все, щоб відключити папку з генерованими хешами для оновлення кешу браузера
  4. Використовуйте gulp-html-substitution для заміни скриптів index.html пакетними версіями та скопіюйте їх у папку dist
  5. Скопіюйте все, що знаходиться у папці активів, щоб відключити папку

Вузол : Хоча ви завжди можете створити власний процес збирання, але я настійно рекомендую використовувати кутові клітинки, оскільки у нього є всі необхідні робочі процеси, і він ідеально працює зараз. Ми вже використовуємо його у виробництві і взагалі не має проблем із кутовими кліпами.


Це те, що я шукаю. Проба програми на Github дуже корисна. Спасибі
Шахріар Хасан сказав:

14

Кутовий CLI 1.xx (працює з кутовими 4.xx, 5.xx)

Це підтримує:

  • Кутовий 2.x і 4.x
  • Останній Webpack 2.x
  • Кутовий компілятор AoT
  • Маршрут (нормальний і ледачий)
  • SCSS
  • Спеціальна група файлів (активи)
  • Додаткові інструменти розробки (лінійки, установки та тестові установки)

Початкова настройка

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

Ви можете додати --style=scssпідтримку SASS .scss.

Ви можете додати --ng4для використання Angular 4 замість Angular 2.

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

Сходи кроків

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

ng build -prod

У поточній версії потрібно вказати --aotвручну, оскільки її можна використовувати в режимі розробки (хоча це не практично через повільність).

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

Вихідні дані

Вихідний dir за замовчуванням є ./dist, хоча його можна змінити ./angular-cli.json.

Розгортаються файли

Результат кроку збірки такий:

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

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

У старих версіях він також створював gzipped версії для перевірки їх розміру та .mapфайлів вихідних карт, але цього більше не відбувається, оскільки люди продовжували просити їх видалити.

Інші файли

У деяких інших випадках ви можете знайти інші непотрібні файли / папки:

  • ./out-tsc/
    З ./src/tsconfig.jsonoutDir
  • ./out-tsc-e2e/
    З ./e2e/tsconfig.jsonoutDir
  • ./dist/ngfactory/
    Від компілятора AoT (не налаштовується без відключення CLI станом на бета-версію 16)

Чи можна відокремити кутову вкладку та їх залежності від мого додатка?
Домінік Піганелл

Не використовувати CLI, який спеціально призначений для струшування дерев на роботу. Це видалення всіх модулів Angular EcmaScript, які не використовуються у вашій програмі. Існує план відключити це в режимі розробки на швидкість (вони викликають завантажені бібліотеки, як це "DLL"), але не планують відокремлювати кінцевий результат. Це має бути досяжним, якщо ви прокатуєте власні речі Webpack, хоча без CLI.
Мелігія

Як перевірити свій додаток за допомогою папки dist. Як я можу розмістити на своєму веб-сервері?
raj m

Ви просто скопіюєте його на сервер. Це звичайний статичний веб-сайт, який можна розмістити в будь-якому випадку. Якщо ви використовуєте маршрутизацію, можливо, ви хочете перенаправити всі виклики до HTML-файлу, для цього перевірте кутовий docss розгортання в розділі конфігурації сервера angular.io/docs/ts/latest/guide/…
Meligy

@Meligy, що робити, якщо я видалю <content-hash>з пачок у продажі. це може спричинити проблеми з отриманням останнього пакета?
k11k2

5

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

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

Це, мабуть, тому, що кутовий компілятор не буде поставлений із складаннями виробництва, оскільки шаблони складаються "Попереду часу". Також дуже здорово бачити, як розмітка вашого шаблону HTML трансформується в інструкції javascript, які дуже важко повернути інженеру в оригінальний HTML.

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

https://youtu.be/ZoZDCgQwnmQ

Тут ви знайдете вихідний код, який використовується у відео:

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


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

2

Ви можете розгорнути свою кутову програму, githubвикористовуючи кутові клітинки

перегляньте посилання, щоб дізнатися, як розгорнути цей кліп.

розгорнутий веб-сайт githubзазвичай зберігатиметься в якійсь галузі

gh-сторінки

використання може клонувати гілку git і використовувати її як статичний веб-сайт на вашому сервері


1

"Кращий" залежить від сценарію. Бувають випадки, коли ви дбаєте лише про найменший можливий одиночний пакет, але у великих програмах вам, можливо, доведеться враховувати ледачу завантаження. У якийсь момент стає недоцільним обслуговувати весь додаток як єдиний пакет.

В останньому випадку Webpack, як правило, найкращий спосіб, оскільки він підтримує розбиття коду.

Якщо ви хочете почути себе хоробрим, для одного пакету я б розглядав сукупність або компілятор закриття :-)

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

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

Кутова версія: 4.1.x


0

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

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


0

Спробуйте нижче команду CLI у поточному каталозі проекту. Це створить розшарування папок dist. тож ви можете завантажувати всі файли в папку dist для розгортання.

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


0

ng виконувати роботи для обслуговування нашої програми для цілей розвитку. А як щодо виробництва? Якщо ми подивимось на наш файл 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

# використання кліпу безпосередньо

ng build --prod

Цього разу нам надано чотири файли замість п'яти. Прапор --prod повідомляє Angular зробити наш додаток значно меншим за розміром.

Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.