Angular 2 с CLI - сборка для производства

Ответ 1

Обновлено для Angular v6+

# Prod - these are equivalent
ng build --configuration=production
ng build --c=production
ng build --prod=true

# Dev - and so are these
ng build --configuration=development
ng build --c=development
ng build --prod=false
ng build

Больше настроек флага здесь

https://angular.io/cli/build

Согласно Angular-cli github wiki v2+, это наиболее распространенные способы запуска разработки и сборки продукта.

# Prod these are equivalent
ng build --target=production --environment=prod
ng build --prod --env=prod
ng build --prod

# Dev and so are these
ng build --target=development --environment=dev
ng build --dev --env=dev
ng build --dev
ng build

Существуют различные флаги по умолчанию, которые влияют на сборки --dev против --prod.

Flag                 --dev      --prod
--aot                false      true
--environment        dev        prod
--output-hashing     media      all
--sourcemaps         true       false
--extract-css        false      true

--prod также устанавливает следующие непомечаемые настройки:

• Добавляет работника сервиса, если настроено в .angular-cli.json.
• Заменяет process.env.NODE_ENV в модулях на production значение (это необходимо для некоторых библиотек, таких как реагирование).
• Запускает UglifyJS в коде.

Мне нужно сделать некоторые проблемы, чтобы заставить работать AOT. Когда я побежал:

ng build --prod --aot = false

Я бы получил вернет ошибку, похожую на

Module not found: Error: Can't resolve './$$_gendir/app/app.module.ngfactory'

Первоначально мне пришлось провести некоторый рефакторинг проекта, чтобы заставить AOT работать. Тем не менее, они могут быть исправлены, если вы столкнулись с этой ошибкой. Пытаться

Npm я улучшил[email protected]

https://github.com/angular/angular-cli/issues/7113

Ответ 2

Попробуйте использовать: ng build --target = production Это должно работать.

Ответ 3

попробуйте это

 ng build --env=prod

Система сборки по умолчанию использует среду dev, которая использует environment.ts, но если вы выполняете ng build --env=prod, вместо этого будет использоваться environment.prod.ts.

Пример результата, если ваш проект является новым angular кли.

 10% building mod3439ms building modules                                                                     1ms add01564ms 917ms asset45ms emittingHash: 9216e76d6f10637c945c                  
Version: webpack 2.1.0-beta.22
Time: 6358ms
            Asset       Size  Chunks             Chunk Names
   main.bundle.js     2.6 MB    0, 2  [emitted]  main
 styles.bundle.js    10.2 kB    1, 2  [emitted]  styles
        inline.js    5.53 kB       2  [emitted]  inline
         main.map    2.61 MB    0, 2  [emitted]  main
       styles.map    14.2 kB    1, 2  [emitted]  styles
       inline.map    5.59 kB       2  [emitted]  inline
       index.html  482 bytes          [emitted]  
assets/.npmignore    0 bytes          [emitted]  
chunk    {0} main.bundle.js, main.map (main) 2.06 MB {1} [initial] [rendered]
chunk    {1} styles.bundle.js, styles.map (styles) 9.96 kB {2} [initial] [rendered]
chunk    {2} inline.js, inline.map (inline) 0 bytes [entry] [rendered]
Child html-webpack-plugin for "index.html":
         Asset     Size  Chunks       Chunk Names
    index.html  2.82 kB       0       
    chunk    {0} index.html 350 bytes [entry] [rendered]

Готово и оно под /dist, если вы не изменили outDir в angular-cli.json

Ответ 4

В версии cli (1.0.1) используйте:

ng build --prod

Это даст вам папку dist с index.html и весь пакетный файл js, готовый для производства.

Ответ 5

Является ли Aot или не реализован.

Если Aot реализован:

ng build --prod

Если Aot не реализован:

ng build --prod --aot=false

Ответ 6

Вы должны обновить последнюю версию angular -cli, typescript. Если вы используете команду:

ng build --prod --aot=false

Ваш проект компилирует JIT-компиляцию и должен работать, если вы используете angular -cli.

если вы хотите построить с помощью команды

ng build --prod --aot=true

то это будет компиляция AOT, и вы должны обновить файл main.ts в:

import { enableProdMode } from '@angular/core';
import { platformBrowser }    from '@angular/platform-browser';

import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

if (environment.production) {
  enableProdMode();
}

platformBrowser().bootstrapModuleFactory(AppModule);

Ответ 7

Вы хотите использовать AOT, что подразумевается при использовании переключателя -prod. К сожалению, когда Angular сам CLI ломается, сообщения об ошибках не помогают. Вот как я это решил:

npm install [email protected]

Я нашел решение длинным, длинным вниз по этой странице: https://github.com/angular/angular-cli/issues/7113

Я уже упоминал, что обновление версии Angular CLI, по крайней мере, 1.2.6. также сталкивается с проблемой, но еще не проверила ее.

Ответ 8

Существует множество команд для сборки приложения angular в рабочий режим с использованием angular cli.

ng build --env = prod

После того, как вы выполните эту команду в cmd dist, будет создана папка по умолчанию, которая будет содержать все уменьшенные файлы, относящиеся к сборке prod, но она не будет устанавливать базовый путь в index.html. Для изменения в index.html либо перейдите и выполните ручное изменение, например, добавив (.) Т.е.

<base href="./">

Вы также можете передать параметр при сборке кода в режиме prod с помощью команды angular/CLI.

ng build --base-href=./ --env=prod

Существуют и другие команды для сборки, такие как прохождение AOT и build-оптимизатора (для уменьшения размеров пакета).

ng build --prod --build-optimizer

Если вы хотите изменить имя папки по умолчанию (dist) после сборки, вы можете изменить значение outDir в .angular-cli.json.

Ответ 9

Это предупреждения uglify js либо из исходного кода java- script, либо из сторонних библиотек, которые вы используете в своем проекте. Теперь вы можете игнорировать их.

Angular Команда cli работает над подавлением этого для сборки prod https://github.com/angular/angular-cli/pull/1609