angular-cli, де файл webpack.config.js - новий angular6 не підтримує викидання

ОНОВЛЕННЯ: грудень 2018 року (див. Відповідь "Анікет")

За допомогою Angular CLI 6 вам потрібно використовувати будівельники, оскільки викидання ng застаріле і незабаром буде видалено в 8.0

ОНОВЛЕННЯ: червень 2018: Кутовий 6 не підтримує витяг **

ОНОВЛЕННЯ: лютий 2017: використовуйте витяг

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

Я встановив кутовий затиск із цим:

npm install -g angular-cli@webpack

Коли я працював з angular1 та web pack, я міняв файл "webpack.config.js", щоб виконати всі завдання та плагіни, але в цьому проекті, створеному з angular-cli, хто це працює, я не бачу. це магія?

Я бачу, як Webpack працює, коли я роблю:

ng serve 

"Version: webpack 2.1.0-beta.18"

але я не розумію, як працює конфігурація кутового кліпу ...

У Angular CLI 6 вам потрібно використовувати будівельники, оскільки викидання ng застаріле і незабаром буде видалено в 8.0. Ось що пише, коли я намагаюся зробити витяг

Ви можете скористатись пакетом 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 у вашому ж кореневому каталозі та додати туди свою конфігурацію вебпакету .

Однак, на відміну від наданої тут конфігурації ng, буде об'єднано з конфігурацією за замовчуванням, тому просто додайте речі, які ви хочете відредагувати / додати.

Існує хороший спосіб вийняти webpack.config.js з angular -cli . Просто запустіть:

$ ng eject

Це створить webpack.config.js в кореневій папці вашого проекту, і ви можете налаштувати його так, як вам потрібно. Мінусом цього є те, що сценарії збірки / запуску у вашому пакеті.json будуть замінені новими командами, а не

$ ng serve

вам доведеться зробити щось подібне

$ npm run build & npm run start

Цей метод повинен працювати у всіх останніх версіях angular-cli (я особисто спробував декілька, найстаріший - 1.0.0-beta.21 , а останній 1.0.0 - beta.32.3 )

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

Враховуючи кількість корисної конфігурації на Webpack, це великий недолік.

Я б не рекомендував використовувати angular-cliдля виробничих додатків, оскільки це дуже впевнено.

Налаштування веб-пакету CLI тепер може бути вилучено. Перевірте відповідь Антона Нікіфорова .

застаріла:

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

Про github про це закрите питання "wont-fix": https://github.com/angular/angular-cli/isissue/1656

Що я думаю, що наявність веб-пакету було б легко при випуску продукції.

FYI: https://github.com/Piusha/ngx-lazyloading

Згідно з пропозицією, ng ejectяку ви можете використовуватиngx-build-plus

Існує кілька проектів, які можна використовувати разом з новим форматом конфігурації, які забезпечують переваги викидання без витрат на обслуговування. Один такий проект - ngx-build-plus, знайдений тут: https://github.com/manfredsteyer/ngx-build-plus