angular 13 ng serve normal, ng build sometime work, sometime not, maybe web worker not working (used to work with angular 12)

[hiepxanh]

🐞 Bug report

Command (mark with an x)

• new
• build
• serve
• test
• e2e
• generate
• add
• update
• lint
• extract-i18n
• run
• config
• help
• version
• doc

Is this a regression?

Yes, It just work normal in angular 12

Description

I build my app today after upgrade angular 13, my app build perfectly then after some change and save it. I rebuild it success but next time it not, build failing, and get this error very randomly, 10 time build 7 time success, 3 time fail. Even with the same code (not change anything, just new build):

Error: Cannot read properties of undefined (reading '0')
G:\small-cosmos\awread\libs\feature\upload-book\src\lib\gears\upload-book.gear.ts for concatenation


./libs/writer/web/ui-creation/src/lib/pages/detail-toc/detail-toc.page.ts + 8 modules - Error: Cannot read properties of undefined (reading '0')

while analysing module G:\small-cosmos\awread\node_modules\.pnpm\@angular-devkit+build-angular@13.1.2_399195a0fd38bd91aa8dde0856a90a6a\node_modules\@angular-devkit\build-angular\src\babel\webpack-loader.js??ruleSet[1].rules[2].use[0]!
G:\small-cosmos\awread\node_modules\.pnpm\@ngtools+webpack@13.1.2_08e2bc1fe65a4145f6802de023172619\node_modules\@ngtools\webpack\src\ivy\index.js!
G:\small-cosmos\awread\libs\feature\upload-book\src\lib\gears\upload-book.gear.ts for concatenation

🔬 Minimal Reproduction

I already try to isolate problem and see the problem is new Worker. with it it have error but will not if we remove it.

🔥 Exception or Error

not error

🌍 Your Environment

Angular CLI: 13.1.2
Node: 16.13.1
Package Manager: pnpm 6.11.5
OS: win32 x64

Angular: 13.1.1
... animations, cdk, common, compiler, compiler-cli, core, forms
... language-service, material, platform-browser
... platform-browser-dynamic, platform-server, router
... service-worker

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1301.2
@angular-devkit/build-angular   13.1.2
@angular-devkit/core            13.1.2
@angular-devkit/schematics      13.1.2
@angular/cli                    13.1.2
@nguniversal/builders           13.0.1
@nguniversal/express-engine     13.0.1
@schematics/angular             13.1.2
rxjs                            7.4.0
typescript                      4.5.4
webpack                         5.65.0

Anything else relevant?

i dont know what to do. when I build 10 time, it just work and not work randomly. I cannot find exactly what causing the problem, it just work 7/10 times

this is the build process for the same code:

some time it work

hiepx@HIEP-MOON MINGW64 /g/small-cosmos/awread (master)
$ pnpm build:writer

> awread@1.3.0 build:writer G:\small-cosmos\awread
> export ENVIRONMENT=production || set ENVIRONMENT=production&& pnpm timestamp writer && pnpm build writer-web

'export' is not recognized as an internal or external command,
operable program or batch file.

> awread@1.3.0 timestamp G:\small-cosmos\awread
> pnpm ts-node ./tools/builds/replacer-build.ts "writer"

Replacement results: [
  {
    file: './libs/global/environments/src/lib/domains/environment.writer.ts',
    hasChanged: true
  }
]


------------------------------------------------------------------

> awread@1.3.0 build G:\small-cosmos\awread
> ng build "writer-web"

✔ Browser application bundle generation complete.
✔ Copying assets complete.
✔ Index html generation complete.

Initial Chunk Files           | Names                                                            |  Raw Size | Estimated Transfer Size
main.cf44a3da048dc969.js      | main                                                             |   1.36 MB |               319.33 kB
styles.01f6aeaa8057a06d.css   | styles                                                           | 109.50 kB |                14.51 kB
polyfills.4fcbb58e454cc371.js | polyfills                                                        |  36.19 kB |                11.50 kB
runtime.64418dfd043f52d9.js   | runtime                                                          |   4.06 kB |                 1.94 kB

                              | Initial Total                                                    |   1.51 MB |               347.29 kB

Lazy Chunk Files              | Names                                                            |  Raw Size | Estimated Transfer Size
208.b1f6c7dfd34be554.js       | -                                                                | 509.78 kB |               105.55 kB
785.7d6c24ef55482587.js       | quill                                                            | 209.13 kB |                42.06 kB
633.2aef92a1a8b693e4.js       | pages-list-desktop-list-desktop-module                           |  46.46 kB |                11.45 kB
228.2be8725b68e3d263.js       | pages-business-desktop-business-desktop-module                   |  45.48 kB |                 9.59 kB
926.3a2170f330e06499.js       | pages-landing-mobile-landing-mobile-module                       |  31.28 kB |                 5.88 kB
837.36441e40338f47f8.js       | pages-book-prices-desktop-book-prices-desktop-module             |  31.27 kB |                 7.29 kB
105.e504fbdb919f4140.js       | pages-profile-desktop-profile-desktop-module                     |  27.57 kB |                 6.22 kB
368.6eb108def5718de0.js       | pages-register-complete-mobile-register-complete-mobile-module   |  26.50 kB |                 5.36 kB
265.95010adef73a1675.js       | pages-list-desktop-list-desktop-module                           |  23.72 kB |                 5.44 kB
common.ca69fa475b13dd6e.js    | common                                                           |  22.31 kB |                 5.79 kB
112.3d7f0dcd20b43b39.js       | pages-landing-desktop-landing-desktop-module                     |  22.03 kB |                 4.66 kB
269.636a0928417dcf10.js       | pages-detail-toc-mobile-detail-toc-mobile-module                 |  19.83 kB |                 6.10 kB
45.2d1798d7100ffabd.js        | pages-book-prices-mobile-book-prices-mobile-module               |  19.82 kB |                 4.38 kB
943.729f666b7762b0e8.js       | pages-writing-mobile-writing-mobile-module                       |  16.60 kB |                 5.10 kB
593.cedd0bee1a423ad1.js       | pages-detail-toc-desktop-detail-toc-desktop-module               |  16.42 kB |                 4.29 kB
459.8649560da27aa2da.js       | pages-writing-desktop-writing-desktop-module                     |  15.99 kB |                 4.12 kB
431.5a15a58d3ee5fc50.js       | pages-landing-mobile-landing-mobile-module                       |  15.05 kB |                 4.77 kB
306.90ca7646a8b3fc1a.js       | pages-detail-book-desktop-detail-book-desktop-module             |  14.46 kB |                 3.34 kB
162.fb351e89c7528b78.js       | pages-forgot-mobile-forgot-mobile-module                         |  11.98 kB |                 2.57 kB
9.bee45e4043a6a075.js         | pages-new-password-desktop-new-password-desktop-module           |   7.42 kB |                 2.08 kB
849.e116ddd321f93b85.js       | pages-register-complete-mobile-register-complete-mobile-module   |   1.39 kB |               621 bytes
294.713f3d3cea59603f.js       | pages-analytic-desktop-analytic-desktop-module                   |   1.37 kB |               703 bytes
911.418f4bf405f8fd7c.js       | pages-register-complete-desktop-register-complete-desktop-module |   1.36 kB |               615 bytes
77.66c5cf5e52fcdaa8.js        | pages-forgot-mobile-forgot-mobile-module                         |   1.02 kB |               508 bytes
82.8f20d2acb99fd2db.js        | pages-forgot-desktop-forgot-desktop-module                       |   1.02 kB |               508 bytes
968.fb98dcdf2b9d491a.js       | pages-new-password-mobile-new-password-mobile-module             | 899 bytes |               442 bytes
215.534af9ee4f421088.js       | pages-book-prices-mobile-book-prices-mobile-module               | 898 bytes |               446 bytes
111.6ce385f966238514.js       | pages-detail-book-mobile-detail-book-mobile-module               | 896 bytes |               448 bytes
410.c7f0d369b1c17498.js       | pages-detail-toc-mobile-detail-toc-mobile-module                 | 893 bytes |               446 bytes
974.693fd27cb88b9af3.js       | pages-business-mobile-business-mobile-module                     | 889 bytes |               438 bytes
260.e655e4b0b88f3a8b.js       | pages-analytic-mobile-analytic-mobile-module                     | 888 bytes |               438 bytes
99.f5a4a49af5e86395.js        | pages-setting-desktop-setting-desktop-module                     | 887 bytes |               437 bytes
671.0b22c8eaf69ffe1a.js       | pages-writing-mobile-writing-mobile-module                       | 885 bytes |               439 bytes
730.8746940e0cae178a.js       | pages-profile-mobile-profile-mobile-module                       | 884 bytes |               435 bytes
8.fe58215d070b5b61.js         | pages-setting-mobile-setting-mobile-module                       | 883 bytes |               439 bytes
175.46aec21187169569.js       | pages-home-desktop-home-desktop-module                           | 879 bytes |               437 bytes
335.b986ef15580b72a7.js       | pages-list-mobile-list-mobile-module                             | 876 bytes |               440 bytes
48.ad874b4e6fc1fb84.js        | pages-home-mobile-home-mobile-module                             | 875 bytes |               438 bytes
676.252724c5c18b05c4.js       | pages-list-desktop-list-desktop-module                           | 865 bytes |               419 bytes

Build at: 2021-12-26T10:46:53.464Z - Hash: 6855762c4063578f - Time: 48044ms

Warning: G:/small-cosmos/awread/libs/writer/web/ui-single/src/lib/atomics/molecs/lp-section-header/lp-section-header.molec.scss exceeded maximum budget. Budget 3.00 kB was not met by 2.84 kB with a total of 5.84 kB.

Warning: bundle initial exceeded maximum budget. Budget 500.00 kB was not met by 1.02 MB with a total of 1.51 MB.

some time it not work, does not change anything on the code base

hiepx@HIEP-MOON MINGW64 /g/small-cosmos/awread (master)
$ pnpm build:writer

> awread@1.3.0 build:writer G:\small-cosmos\awread
> export ENVIRONMENT=production || set ENVIRONMENT=production&& pnpm timestamp writer && pnpm build writer-web

'export' is not recognized as an internal or external command,
operable program or batch file.

> awread@1.3.0 timestamp G:\small-cosmos\awread
> pnpm ts-node ./tools/builds/replacer-build.ts "writer"

Replacement results: [
  {
    file: './libs/global/environments/src/lib/domains/environment.writer.ts',
    hasChanged: true
  }
]

> awread@1.3.0 build G:\small-cosmos\awread
> ng build "writer-web"

✔ Browser application bundle generation complete.

Warning: G:/small-cosmos/awread/libs/writer/web/ui-single/src/lib/atomics/molecs/lp-section-header/lp-section-header.molec.scss exceeded maximum budget. Budget 3.00 kB was not met by 2.84 kB with a total of 5.84 kB.



./libs/writer/web/ui-creation/src/lib/pages/detail-toc/detail-toc.page.ts + 8 modules - Error: Cannot read properties of undefined (reading '0')

while analysing module G:\small-cosmos\awread\node_modules\.pnpm\@angular-devkit+build-angular@13.1.2_399195a0fd38bd91aa8dde0856a90a6a\node_modules\@angular-devkit\build-angular\src\babel\webpack-loader.js??ruleSet[1].rules[2].use[0]!
G:\small-cosmos\awread\node_modules\.pnpm\@ngtools+webpack@13.1.2_08e2bc1fe65a4145f6802de023172619\node_modules\@ngtools\webpack\src\ivy\index.js!
G:\small-cosmos\awread\libs\feature\upload-book\src\lib\gears\upload-book.gear.ts for concatenation


 ERROR  Command failed with exit code 1.
 ERROR  Command failed with exit code 1.

i belive it maybe have some connection with this: #22388 and this issue #22351

I can close this issue if the cause if it duplicate with those issue above

[hiepxanh]

update:
delete .angular is help get rid of error. Is that something I can do to change my code base? should we notice about .angular? maybe caching have some issue with service worker?
If you need anything or new information or need me do anything, please just tell me

[hiepxanh]

can confirm that delete .angular solve the problem

[magnusbakken]

I'm having the same issue, also with a web worker, and also using import.meta.url in the code.

What I would add is that the problem only started with @angular-devkit/build-angular 13.1.2. I had been on 13.1.1 for about a week prior to that without any issues, and downgrading @angular-devkit/build-angular to 13.1.1 now appears to work again.

Deleting the webpack cache also fixes the problem, but only temporarily.

Because it looks like a regression in 13.1.2, I suspect this commit is somehow the source of the problem: f31d7f7

[alan-agius4]

Hi @magnusbakken and @hiepxanh,

Can you check if the issue persists with the following change

node_modules/@ngtools/webpack/src/ivy/plugin.js

       // Initialize webpack cache
       if (!this.webpackCache && compilation.options.cache) {
-        this.webpackCache = compilation.getCache(PLUGIN_NAME);
+        this.webpackCache = compilation.getCache(`${PLUGIN_NAME}__${this.pluginOptions.tsconfig}`);
       }

[hiepxanh]

I'm trying to reproduce, just need take few day because I'm little busy sir @alan-agius4

[magnusbakken]

I tried to reproduce the issue locally with 13.1.2, but of course now I can't get it to happen, with or without your modification. 😄 Previously I was mostly getting it in CI builds, so I'll need a little time to verify this.