Build error after implementation hot fix esbuild 0.16.17

[kwhjvdkamp]

Which @angular/* package(s) are the source of the bug?

Don't known / other

Is this a regression?

Yes

Description

Which @angular/* package(s) are the source of the bug?

esbuild
Seems to be still experimental (may I say but why is this implementen in Angular 15?

Is this a regression?
YES

Description
Performing 'production' build after upgrading to Angular 15.1.0 (from Angular 15.0.4) and implemention suggestions on esbuild 0.16.17

Investigation through command
$ ng build MY-PROJECT-NAME --configuration=production --aot --named-chunks --verbose --build-optimizer=false --source-map

Result
[WARNING] [plugin angular-compiler] TypeScript compiler options "target" and "useDefineForClassFields" are set to "ES2022" and "false" respectively by the Angular CLI.
tsconfig.app.json:0:0:
0 │
╵ ^
To control ECMA version and features use the Browerslist configuration. For more information, see https://angular.io/guide/build#configuring-browser-compatibility

RESULT: NO OUTPUT No folder ./dist/MY-PROJECT-NAME/*

=====BEGIN VERBOSE=================================================================

$ ng build MY-PROJECT_NAME --configuration=production --aot --named-chunks --verbose --build-optimizer=false --source-map
The esbuild browser application builder ('browser-esbuild') is currently experimental.
The 'allowedCommonJsDependencies' option is currently unsupported by this experimental builder and will be ignored.
The 'budgets' option is currently unsupported by this experimental builder and will be ignored.
The 'extractLicenses' option is currently unsupported by this experimental builder and will be ignored.
The 'progress' option is currently unsupported by this experimental builder and will be ignored.
The 'namedChunks' option is currently unsupported by this experimental builder and will be ignored.
One or more browsers which are configured in the project's Browserslist configuration will be ignored as ES5 output is not supported by the Angular CLI.
Ignored browsers: kaios 2.5, op_mini all
▲ [WARNING] [plugin angular-compiler] TypeScript compiler options "target" and "useDefineForClassFields" are set to "ES2022" and "false" respectively by the Angular CLI.

tsconfig.app.json:0:0:
  0 │ 
    ╵ ^

To control ECMA version and features use the Browerslist configuration. For more information, see
https://angular.io/guide/build#configuring-browser-compatibility

● [DEBUG] Top-level "this" will be replaced with undefined since this file is an ECMAScript module [this-is-undefined-in-esm]

node_modules/@angular/fire/fesm2015/angular-fire.js:211:16:
  211 │   const _this = this;
      │                 ~~~~
      ╵                 undefined

This file is considered to be an ECMAScript module because of the "export" keyword here:

node_modules/@angular/fire/fesm2015/angular-fire.js:279:0:
  279 │ export { VERSION, keepUnstableUntilFirst, observeInsideAngular, observeOutsideAngular, ɵAngularFireSchedulers, ɵZoneScheduler, ɵgetAllInstancesOf, ɵgetDefaultInstanceOf, ɵisAnalyticsSuppor...      
      ╵ ~~~~~~

1 warning

main.OGI34H5G.js 4.6mb
polyfills.L6JZ4VR7.js 410.2kb
chunk-D4EV4CLD.js 132.9kb
chunk-33OJIR6V.js 46.7kb
index.esm-KNSLYXLU.js 9.3kb
chunk-QBTISSSK.js 1.2kb
index.esm-4RIOOHAR.js 132b
main.OGI34H5G.js.map 17.8mb
polyfills.L6JZ4VR7.js.map 2.0mb
chunk-D4EV4CLD.js.map 630.2kb
chunk-33OJIR6V.js.map 205.9kb
index.esm-KNSLYXLU.js.map 40.5kb
chunk-QBTISSSK.js.map 93b
index.esm-4RIOOHAR.js.map 93b

Done in 14037ms
▲ [WARNING] [plugin angular-compiler] TypeScript compiler options "target" and "useDefineForClassFields" are set to "ES2022" and "false" respectively by the Angular CLI.

tsconfig.app.json:0:0:
  0 │ 
    ╵ ^

To control ECMA version and features use the Browerslist configuration. For more information, see https://angular.io/guide/build#configuring-browser-compatibility

Complete. [17.102 seconds]

=====END VERBOSE===================================================================

Please provide the environment you discovered this bug in (run ng version)
Angular CLI: 15.1.0
Node: 18.12.1
Package Manager: npm 9.1.3
OS: win32 x64

Angular: 15.1.0
... animations, cdk, cli, common, compiler, compiler-cli, core
... forms, language-service, localize, material
... material-moment-adapter, platform-browser
... platform-browser-dynamic, router, service-worker

Package Version

@angular-devkit/architect 0.1501.0
@angular-devkit/build-angular 15.1.0
@angular-devkit/core 15.1.0
@angular-devkit/schematics 15.1.0
@angular/fire 7.5.0
@schematics/angular 15.1.0
rxjs 7.8.0
typescript 4.9.4

According previous bug notification tried to follow instruction #24531
Did not understand quit well what to implement what going on under the hood!
Followed trial-error approach: implemented: npm i esbuild
Development environment compilates without trouble

Please provide a link to a minimal reproduction of the bug

No response

Please provide the exception or error you saw

▲ [WARNING] [plugin angular-compiler] TypeScript compiler options "target" and "useDefineForClassFields" are set to "ES2022" and "false" respectively by the Angular CLI.

Please provide the environment you discovered this bug in (run ng version)

Angular CLI: 15.1.0
Node: 18.12.1
Package Manager: npm 9.1.3
OS: win32 x64

Angular: 15.1.0
... animations, cdk, cli, common, compiler, compiler-cli, core
... forms, language-service, localize, material
... material-moment-adapter, platform-browser
... platform-browser-dynamic, router, service-worker

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1501.0
@angular-devkit/build-angular   15.1.0
@angular-devkit/core            15.1.0
@angular-devkit/schematics      15.1.0
@angular/fire                   7.5.0
@schematics/angular             15.1.0
rxjs                            7.8.0
typescript                      4.9.4

Anything else?

According previous bug notification tried to follow instruction #24531
Did not understand quit well what to implement what going on under the hood!
Followed trial-error approach: implemented: npm i esbuild
Development environment compilates without trouble
At first try, I had to comment out three imports in styles.scss
/**

• In folder global-styles, the styles.scss file
• is intended to add several style files together
• The '' syntax means it can found in folder nodes_modules
  */
  // @import '@fortawesome/fontawesome-free/css/all.min.css';
  // @import '~material-design-icons/iconfont/material-icons.css';
  // @import '~firebaseui/dist/firebaseui.css';
  ...next, after commenting out these imports, the errors stay away... ...but other very un-descriptive 'characters' are popping-up ??

#48711

Related (not very descriptive, very cryptive)

Presented as fix (again not very descriptive, very cryptive... ...very likely it could be a fix... ...however not to me !)

[alan-agius4]

Hi @kwhjvdkamp,

The esbuild builder (@angular-devkit/build-angular:browser-esbuild) is indeed experimental and to use it, one needs to opt-in by changing the configuration in angular.json. In your case it appears that you did just that. That said, in Angular CLI, esbuild is also used as a CSS and JS optimizer when using the Webpack based builder (@angular-devkit/build-angular:browser) that has been the cases for a number of major versions.

I strongly suggest that revert all the changes you did and update to 15.1.1.

[kwhjvdkamp]

Hoi @alan-agius4,

STEP 1 - Reverted to status yesterday as suggested

angular.json (removed: 'es-build' trouble)
package.json (removed: 'es-build' trouble)

---

Intermezzo did not know what to do with this cryptive instructions (atsjo)

"resolutions": {
"@angular-devkit/build-angular/esbuild": "^0.16.17"
}

STEP 2 - Deleted node_modules and package-lock.json
$ ✍ rm -rf node_modules
$ ✍ rm -f package-lock.json

STEP 2 - Cleaned npm cache
$ ✍ npm cache clean --force

STEP 3 - ReInstalled packages
$ ✍ npm install

STEP 4 - Implement packages
$ ✍ ng update @angular/core@15.1.1 @angular/cli@15.1.1
RESULT:
Package specified by '@angular/core@15.1.1' does not exist within the registry

STEP 5 - Implemented latest stuff
$ ✍ ng update @angular/core@latest @angular/cli@latest
RESULT:
Package '@angular/core' is already up to date.
Package '@angular/cli' is already up to date.

STEP 6 - Implemented latest stuff (for better or for worse...)
$ ✍ ng update @angular/material@15
RESULT:
Package '@angular/material' is already up to date

STEP 7 - Tested to compilate localhost
RESULT:
Project compiled successfully

STEP 8 - Latest commit

STEP 9 - Tried to build production (with everything on and to it)...
$ ✍ ng build MY-PROJECT-NAME --configuration=production --aot --named-chunks --verbose --build-optimizer=false --source-map
RESULT:
Build at: 2023-01-13T13:01:45.644Z - Hash: 9d44b0637414b866 - Time: 57866ms

Still receive warning:
[DedupeModuleResolvePlugin]: C:\GitHubRepositories\MY-PROJECT-NAME\frontend\node_modules@fortawesome\fontawesome-free\css\all.min.css
-> C:\GitHubRepositories\MY-PROJECT-NAME\frontend\node_modules@fortawesome\fontawesome-free\css\all.min.css?ngGlobalStyle

FINALLY... ...proper deploy!

Thanks to you and the other guys (@...) fast response last night!

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}