ОБНОВЛЕНИЕ: декабрь 2018 г. (см. Ответ Aniket)

С Angular CLI 6 вам нужно использовать построители, так как ng eject устарел и скоро будет удален в 8.0

ОБНОВЛЕНИЕ: июнь 2018: Angular 6 не поддерживает извлечение **

ОБНОВЛЕНИЕ: февраль 2017: используйте извлечение

ОБНОВЛЕНИЕ: ноябрь 2016: angular-cli теперь использует только webpack. Вам нужно всего лишь выполнить обычную установку с помощью npm install -g angular-cli. «Мы изменили систему сборки между beta.10 и beta.14, с SystemJS на Webpack.», Но на самом деле я использую angular-cli только для первой структуры и папок, а затем больше, я использую конфигурацию webpack вручную

Я установил angular cli следующим образом:

npm install -g angular-cli@webpack

Когда я работал с angular1 и веб-пакетом, я изменял файл «webpack.config.js» для выполнения всех задач и плагинов, но я не вижу в этом проекте, созданном с помощью angular-cli, кто это делает. . это магия?

Я вижу, что Webpack работает, когда я это делаю:

ng serve 

"Version: webpack 2.1.0-beta.18"

но я не понимаю, как работает конфигурация angular-cli ...

stackdave

Ответов: 5

Ответы (5)

С Angular CLI 6 вам нужно использовать компоновщики, так как ng eject устарел и скоро будет удален в версии 8.0. Это то, что он говорит, когда я пытаюсь выполнить выброс нг

enter image description here

Вы можете использовать пакет angular-builders (https://github.com/meltedspark/angular-builders) для предоставления вашей пользовательской конфигурации веб-пакета.

Я попытался обобщить все в одном сообщении в моем блоге - Как настроить конфигурацию сборки с помощью настраиваемой конфигурации веб-пакета в Angular CLI 6

, но по сути вы добавляете следующие зависимости -

  "devDependencies": {
    "@angular-builders/custom-webpack": "^7.0.0",
    "@angular-builders/dev-server": "^7.0.0",
    "@angular-devkit/build-angular": "~0.11.0",

В angular.json внесите следующие изменения -

  "architect": {
    "build": {
      "builder": "@angular-builders/custom-webpack:browser",
      "options": {
        "customWebpackConfig": {"path": "./custom-webpack.config.js"},

Обратите внимание на изменение конструктора и новую опцию customWebpackConfig. Также измените

    "serve": {
      "builder": "@angular-builders/dev-server:generic",

Обратите внимание на изменение построителя снова для цели обслуживания. Опубликуйте эти изменения, вы можете создать файл с именем custom-webpack.config.js в том же корневом каталоге и добавить туда свою конфигурацию webpack.

Однако, в отличие от ng eject, конфигурация, представленная здесь, будет объединена с конфигурацией по умолчанию, поэтому просто добавьте то, что вы хотите отредактировать / добавить.

Я думаю, что веб-пакет будет легко при выпуске в производство.

К вашему сведению: https://github.com/Piusha/ngx-lazyloading

Согласно этой проблеме, это было дизайнерское решение, не позволяющее пользователям изменять конфигурацию Webpack, чтобы сократить время обучения.

Учитывая количество полезных настроек в Webpack, это большой недостаток.

Я бы не рекомендовал использовать angular-cli для производственных приложений, так как это весьма упрямый вариант.

Есть хороший способ извлечь webpack.config.js из angular-cli. Просто запустите:

$ ng eject

Это создаст webpack.config.js в корневой папке вашего проекта, и вы можете настроить его так, как хотите. Обратной стороной этого является то, что скрипты сборки / запуска в вашем package.json будут заменены новыми командами вместо

$ ng serve

вам нужно будет сделать что-то вроде

$ npm run build & npm run start

Этот метод должен работать во всех последних версиях angular-cli (я лично пробовал несколько, из которых самая старая - 1.0.0-beta.21, а последняя 1.0.0 -бета 32,3)

Конфигурация веб-пакета интерфейса командной строки теперь может быть извлечена. Отметьте ответ Антона Никифорова.


устарело:

Вы можете взломать шаблон конфигурации в angular-cli / addon / ng2 / models. На данный момент нет официального способа изменить конфигурацию веб-пакета.

В github есть закрытая проблема с "обычным исправлением": https://github.com/angular/angular-cli/issues/1656

2022 WebDevInsider