#angular-cli
#angular-cli
Вопрос:
Недавно мы заметили проблему, из-за которой ng build --prod генерируется неверный вывод (код не будет выполняться) в первый раз. Однако при повторном запуске сразу после этого вывод сборки немного больше и работает нормально. Вот некоторые результаты сборки:
~]> установка pnpm
Файл блокировки обновлен, шаг разрешения пропущен
Пакеты: 1700
Пакеты жестко связаны из хранилища, адресуемого содержимому, с виртуальным хранилищем.
Хранилище, адресуемое содержимому, находится по адресу: C:Userschezb.pnpm-storev3
Виртуальное хранилище находится по адресу: node_modules .pnpm
Прогресс: разрешено 1700, повторно использовано 1693, загружено 7, добавлено 1700, готово
node_modules/.pnpm/browser-tabs-lock@1.2.11/node_modules/browser-tabs-lock : Запуск сценария после установки, выполняется за 70 мс node_modules/.pnpm/core-js@3.6.4/node_modules/core-js
: Запуск сценария постинсталляции, выполняемого за 79 мс
node_modules/.pnpm/core-js@2.6.11/node_modules/core-js : Запуск сценария после установки, выполняется за 80 мс
node_modules/.pnpm/@angular/cli@10.1.3/node_modules/@angular/cli : Запуск сценария постинсталляции, выполняемого за 736 мс
node_modules/.pnpm/core-js@3.6.5/node_modules/core-js : Запуск сценария постинсталляции, выполняемого за 58 мс
node_modules/.pnpm/cypress@5.2.0/node_modules/cypress : Запуск сценария постинсталляции, выполняемого за 755
мс node_modules/.pnpm/husky@4.3.0/node_modules/husky : Запуск сценария установки, выполняемого за 206 мс
node_modules/.pnpm/husky@4.3.0/node_modules/husky : Запуск сценария постинсталляции, выполняемого за 68 мс
зависимости:
@angular / animations 10.1.3
@angular / cdk 10.2.2
@angular / common 10.1.3
@angular /compiler 10.1.3
@angular / core 10.1.3
@angular / forms 10.1.3
@angular /localize 10.1.3
@angular /material 10.2.2
@angular / platform-браузер 10.1.3
@angular /platform-browser-dynamic 10.1.3
@angular / router 10.1.3
@angular / service-worker 10.1.3
@auth0/auth0-spa-js 1.12.0
@babel / preset-env 7.11.5
@microsoft/applicationinsights-аналитика-js 2.5.8
@microsoft/applicationinsights-channel-js 2.5.8
@microsoft/applicationinsights-общие 2.5.8
@microsoft/applicationinsights-core-js 2.5.8
@microsoft/applicationinsights-зависимости-js 2.5.8
@microsoft/applicationinsights-свойства-js 2.5.8
@microsoft/applicationinsights-прокладки 1.0.2
@microsoft/applicationinsights-web 2.5.8
@microsoft/ dynamicproto-js 0.5.3
@ngrx / effects 10.0.0
@ngrx / store 10.0.0
@ngrx /store-devtools 10.0.0
@nrwl /workspace 10.0.13
@swimlane /ngx-datatable 17.1.0
@types /auth0 2.20.8
@types / knockout 3.4.69
@types / moment-часовой пояс 0.5.30
angular-in-memory-web-api 0.11.0
angular2-горячие клавиши 2.2.0
bootstrap 4.5.2
chart.js 2.9.3
classlist.js 1.1.20150312
одновременно 5.3.0
core-js 3.6.5
глубокое различие 1.0.2
elmah.io.javascript 3.3.1
file-saver 2.0.2
flexmonster 2.8.15
handlebars 4.7.6
jquery 3.5.1
нокаут 3.5.1
libphonenumber-js 1.7.58
Lodash-es 4.17.15
момент 2.28.0
момент времени 0.5.31
mousetrap 1.6.5
ng-block-ui 2.1.8
ng-flexmonster 2.8.15
ng2-диаграммы 2.4.1
ngx-авторазмер 1.8.0
ngx-bootstrap 5.6.2
ngx-маска 10.0.1
ngx-toastr 13.0.0
opencollective-postinstall 2.0.3
popper.js 1.16.1
строка запроса 0.2.0
отражение-метаданные 0.1.13
rxjs 6.6.3
stacktrace-js 2.0.2
опрос-angular 1.8.3
surveyjs-виджеты 1.8.3
toastr 2.1.4
ts-md5 1.2.7
tslib 2.0.1
util 0.12.3
uuid 3.4.0
vanilla-text-mask 5.1.1
zone.js 0.10.3
devDependencies:
@angular-devkit/build-angular 0.1001.3
@angular-devkit /schematics 10.1.3
@angular / cli 10.1.3
@angular/compiler-cli 10.1.3
@angular /language-service 10.1.3
@nrwl /angular 10.0.13
@nrwl / cli 9.6.0
@nrwl /cypress 10.0.13
@nrwl / jest 10.0.13
@types / file-saver 2.0.1
@types / jest 25.2.3
@types /node 12.12.62
babel-jest 26.3.0
babel-plugin-transform-es2015-modules-commonjs 6.26.2
babel-polyfill 6.26.0
codelyzer 6.0.0
cypress 5.2.0
cypress-загрузка файла 4.1.1
cypress-wait-until 1.7.1
husky 4.3.0
jest 26.4.2
jest-preset-angular 8.3.1
mailslurp-клиент 8.7.8
npm-run-all 4.1.5
красивее 2.1.2
довольно быстрый 2.0.2
ts-jest 26.3.0
ts-узел 8.10.2
tslint 6.1.3
typescript 3.9.7
> webapp@0.0.0 последующая установка
> ngcc --properties es2015
~]> ng build --prod
0% компиляции
Компиляция @angular / core: es2015 как esm2015
Компиляция @angular / common: es2015 как esm2015
Компиляция @angular / platform-browser: es2015 как esm2015
Компиляция @angular /platform-browser-dynamic: es2015 как esm2015
Компиляция angular2-горячие клавиши: es2015 как esm2015
Компиляция ng-block-ui: es2015 как esm2015
Компиляция @angular/common/http: es2015 как esm2015
Компиляция @angular / animations: es2015 как esm2015
Компиляция @angular /animations/ browser: es2015 как esm2015
Компиляция @angular /platform-browser / animations: es2015 как esm2015
Компиляция @ngrx / store: es2015 как esm2015
Компиляция @ngrx / effects: es2015 как esm2015
Компиляция ngx-bootstrap / utils: es2015 как esm2015
Компиляция ngx-bootstrap / позиционирование: es2015 как esm2015
Компиляция ngx-bootstrap / component-loader: es2015 как esm2015
Компиляция ngx-bootstrap / modal: es2015 как esm2015
Компиляция @ngrx /store-devtools: es2015 как esm2015
Компиляция @angular / forms: es2015 как esm2015
Компиляция ngx-маски: es2015 как esm2015
Компиляция @angular / service-worker: es2015 как esm2015
Компиляция ngx-bootstrap / dropdown: es2015 как esm2015
Компиляция ngx-bootstrap / chronos: es2015 как esm2015
Компиляция ngx-bootstrap / mini-ngrx: es2015 как esm2015
Компиляция ngx-bootstrap / datepicker: es2015 как esm2015
Компиляция @angular / router: es2015 как esm2015
Компиляция ngx-toastr: es2015 как esm2015
Компиляция @angular / cdk / platform: es2015 как esm2015
Компиляция @angular/cdk/text-field: es2015 как esm2015
Компиляция @angular / core / testing: es2015 как esm2015
Компиляция @swimlane/ngx-datatable: es2015 как esm2015
Компиляция ngx-bootstrap / tooltip: es2015 как esm2015
Компиляция @angular / cdk /bidi: es2015 как esm2015
Компиляция @angular/cdk/collections: es2015 как esm2015
Компиляция @angular / cdk / scrolling: es2015 как esm2015
Компиляция @angular / cdk / drag-drop: es2015 как esm2015
Компиляция ng2-диаграмм: es2015 как esm2015
Компиляция ng-flexmonster: es2015 как esm2015
фрагмент {} runtime.569f1d0041eff5195de4.js (время выполнения) 2.35 кБ [запись] [визуализация]
фрагмент {1} 1.fa4fcd5d2c7d15faf70f.js () 17,6 кБ [визуализировано]
фрагмент {2} 2.bda4a478890a0ad6fc5a.js () 29,3 кБ [визуализировано]
фрагмент {3} main.3ad7e1d57be3d1e02a85.js (основной) 1.45 МБ [начальный] [визуализированный]
фрагмент {4} polyfills.910addeb33ecd4e44bb1.js (полифиллы) 36,7 кБ [начальный] [визуализированный]
фрагмент {5} стили.5ea0e2968dbbdc171655.css (styles) 404 кБ [начальный] [визуализированный]
фрагмент {6} 6.e46eab05db6e2d7bcc39.js () 2.59 МБ [визуализированный]
фрагмент {7} 7.4fe3863b21c2130d85cb.js () 119 кБ [визуализировано]
фрагмент {8} 8.b373430e68dff33d6ed2.js () 21 кБ [визуализировано]
фрагмент {9} 9.9cee0294be954c4bbb7d.js () 8.57 кБ [визуализировано]
фрагмент {скрипты} scripts.b31bfd7c5283ba273864.js (скрипты) 240 кБ [запись] [визуализация]
Дата: 2020-09-25T21:29:48.640Z-хэш: 8420734c586a454a06de - Время: 96804 мс
ПРЕДУПРЕЖДЕНИЕ в бюджетах: начальный превышенный максимальный бюджет. Бюджет 2 МБ не был выполнен на 122 КБ с общим объемом 2,12 МБ.
~]> ng build --prod
фрагмент {} runtime.b22744c722394ab83a1d.js (время выполнения) 2.35 кБ [запись] [визуализация]
фрагмент {1} 1.44ca2caf5d1221a0bf27.js () 94,6 кБ [визуализировано]
фрагмент {2} 2.c20d2dffb2420057613a.js () 29,3 кБ [визуализировано]
фрагмент {3} main.3ed012144b5f14c0c457.js (основной) 1.62 МБ [начальный] [визуализированный]
фрагмент {4} polyfills.910addeb33ecd4e44bb1.js (полифиллы) 36,7 кБ [начальный] [визуализированный]
фрагмент {5} стили.5ea0e2968dbbdc171655.css (styles) 404 кБ [начальный] [визуализированный]
фрагмент {6} 6.f3432bf01fd2a37bd55c.js () 2.63 МБ [визуализированный]
фрагмент {7} 7.84727ef35fe737b4cdab.js () 119 кБ [визуализировано]
фрагмент {8} 8.504f8986a66c84232185.js () 21 кБ [визуализировано]
фрагмент {9} 9.c685321f51c184b2b259.js () 8.57 кБ [визуализировано]
фрагмент {скрипты} scripts.b31bfd7c5283ba273864.js (скрипты) 240 кБ [запись] [визуализация]
Дата: 2020-09-25T21:31:19.851Z - Хэш: 3968e68578df1b07b541 - Время: 75969ms
ПРЕДУПРЕЖДЕНИЕ в бюджетах: начальный превышенный максимальный бюджет. Бюджет 2 МБ не был выполнен на 296 КБ с общим объемом 2,29 МБ.
Обратите внимание, что хэши различаются, размеры файлов различаются. Каждая последующая сборка (пока мы не удалим node_modules) приводит к тому же результату, что и при втором запуске. Мы подозреваем, что это связано с шагами предварительной компиляции (ngcc), поскольку они появляются только для первой сборки. Мы читали в нескольких местах, что мы должны иметь возможность выполнить этот шаг вручную заранее, используя что-то вроде npx ngcc --properties module , но это никогда не генерирует никаких выходных данных для нас. Я что-то упускаю? Возможно, существует плохое взаимодействие между pnpm и ngcc, или, возможно, в ngcc есть какое-то неправильное поведение. Любая помощь приветствуется!
Информация о версии:
pnpm: 5.7.0
Angular CLI: 10.1.3
Node: 12.18.3
OS: win32 x64
Angular: 10.1.3
... animations, cli, common, compiler, compiler-cli, core, forms
... language-service, localize, platform-browser
... platform-browser-dynamic, router, service-worker
Ivy Workspace: Yes
Package Version
---------------------------------------------------------
@angular-devkit/architect 0.1001.3
@angular-devkit/build-angular 0.1001.3
@angular-devkit/core 10.1.3
@angular-devkit/schematics 10.1.3
@angular/cdk 10.2.2
@angular/material 10.2.2
@schematics/angular 10.1.3
@schematics/update 0.1001.3
rxjs 6.6.3
typescript 3.9.7
Комментарии:
1. Вам удалось это исправить?
2. я предполагаю, что бюджет — это параметр, который вы можете изменить
angular.json3. @FasidMpm К сожалению, нет. Мы отказались от pnpm. Это не обеспечивало достаточного преимущества в производительности по сравнению с количеством проблем, с которыми мы столкнулись.
4. @Katzura Предупреждение о бюджете не было проблемой. Проблема заключалась в том, что Angular build генерировал разные скомпилированные выходные данные. Первая сборка сгенерировала поврежденный вывод, но последующие сборки сгенерировали больший и допустимый вывод (что означает, что он будет корректно выполняться в браузере).