fix(@angular-devkit/build-angular): set public class fields as properties (#24849)

alan-agius4 · clydin · web-flow · commit 04274afc1508 · 2023-03-14T07:37:57.000Z
* fix(@angular-devkit/build-angular): set public class fields as properties Configure Babel to use `setPublicClassFields: true`. As when shipping Angular packages without `"useDefineForClassFields": false` will increase the bundle size of an ng-new app by ~2Kb when `useDefineForClassFields` is not false. due to the additional `_defineProperty`, which will be added on every class property. See: https://babeljs.io/docs/babel-plugin-proposal-class-properties * fixup! fix(@angular-devkit/build-angular): set public class fields as properties Co-authored-by: Charles <19598772+clydin@users.noreply.github.com> --------- Co-authored-by: Charles <19598772+clydin@users.noreply.github.com>
diff --git a/packages/angular_devkit/build_angular/src/webpack/configs/common.ts b/packages/angular_devkit/build_angular/src/webpack/configs/common.ts
@@ -411,6 +411,13 @@ export async function getCommonConfig(wco: WebpackConfigOptions): Promise<Config
             {
               loader: require.resolve('../../babel/webpack-loader'),
               options: {
+                assumptions: {
+                  // Use `setPublicClassFields: true` to avoid decrease bundle sizes
+                  // when targetting ES2022+ with `useDefineForClassFields: true`.
+                  // This is because ervery property of the class will otherwise be wrapped in a `_defineProperty`.
+                  // This is not needed for TypeScript as TS itself will emit the right declaration of class properties.
+                  setPublicClassFields: true,
+                },
                 cacheDirectory: (cache.enabled && path.join(cache.path, 'babel-webpack')) || false,
                 aot: buildOptions.aot,
                 optimize: buildOptions.buildOptimizer,
