build: remove usages of useDefineForClassFields: false (angular#58297)

When setting `"useDefineForClassFields": false`, static fields are compiled within a block that relies on the `this` context. This output makes it more difficult for bundlers to treeshake and eliminate unused code.

PR Close angular#58297

Author: alan-agius4

adev/src/content/api-examples/upgrade/static/ts/full/module.ts

@@ -105,7 +105,7 @@ export class Ng1HeroComponentWrapper extends UpgradeComponent {
   // The names of the input and output properties here must match the names of the
   // `<` and `&` bindings in the AngularJS component that is being wrapped
   @Input() hero!: Hero;
-  @Output() onRemove!: EventEmitter<void>;
+  @Output() onRemove: EventEmitter<void> = new EventEmitter();
 
   constructor(elementRef: ElementRef, injector: Injector) {
     // We must pass the name of the directive as used by AngularJS to the super

adev/src/content/api-examples/upgrade/static/ts/lite/module.ts

@@ -116,7 +116,7 @@ class Ng1HeroComponentWrapper extends UpgradeComponent {
   // The names of the input and output properties here must match the names of the
   // `<` and `&` bindings in the AngularJS component that is being wrapped.
   @Input() hero!: Hero;
-  @Output() onRemove!: EventEmitter<void>;
+  @Output() onRemove: EventEmitter<void> = new EventEmitter();
 
   constructor(elementRef: ElementRef, injector: Injector) {
     // We must pass the name of the directive as used by AngularJS to the super.

devtools/projects/ng-devtools-backend/src/lib/highlighter.ts

@@ -103,10 +103,19 @@ export function highlightHydrationElement(el: Node, status: HydrationStatus) {
 }
 
 export function unHighlight(): void {
-  if (selectedElementOverlay) {
-    document.body.removeChild(selectedElementOverlay);
-    selectedElementOverlay = null;
+  if (!selectedElementOverlay) {
+    return;
   }
+
+  for (const node of document.body.childNodes) {
+    if (node === selectedElementOverlay) {
+      document.body.removeChild(selectedElementOverlay);
+
+      break;
+    }
+  }
+
+  selectedElementOverlay = null;
 }
 
 export function removeHydrationHighlights(): void {

goldens/size-tracking/integration-payloads.json

@@ -47,7 +47,7 @@
   },
   "defer": {
     "uncompressed": {
-      "main": 11497,
+      "main": 12094,
       "polyfills": 33807,
       "defer.component": 345
     }

packages/bazel/src/ng_module/ng_module.bzl

@@ -208,10 +208,6 @@ def _ngc_tsconfig(ctx, files, srcs, **kwargs):
     # https://github.com/bazelbuild/rules_nodejs/blob/901df3868e3ceda177d3ed181205e8456a5592ea/third_party/github.com/bazelbuild/rules_typescript/internal/common/tsconfig.bzl#L195
     # TODO(devversion): In the future, combine prodmode and devmode so we can get rid of the
     # ambiguous terminology and concept that can result in slow-down for development workflows.
-    # TODO(alanagius): The below causes a drastic size increase when enabled (4Kb in the //integration/forms:test). This is mainly due to Babel transforms for Safari 15.
-    # https://github.com/angular/angular-cli/blob/3e8bdf72d6b7e2925d2822da807b726f88a77e1a/packages/angular_devkit/build_angular/src/babel/presets/application.ts#L199-L204
-    # https://www.diffchecker.com/9Ge3pexk
-    tsconfig["compilerOptions"]["useDefineForClassFields"] = False
     tsconfig["compilerOptions"]["target"] = "es2022"
     tsconfig["compilerOptions"]["module"] = "esnext"
 

packages/bazel/test/ng_package/example_package.golden

@@ -128,9 +128,9 @@ import * as i0 from '@angular/core';
 import { NgModule } from '@angular/core';
 
 class A11yModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "0.0.0", ngImport: i0, type: A11yModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "0.0.0", ngImport: i0, type: A11yModule }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "0.0.0", ngImport: i0, type: A11yModule }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "0.0.0", ngImport: i0, type: A11yModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "0.0.0", ngImport: i0, type: A11yModule });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "0.0.0", ngImport: i0, type: A11yModule });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "0.0.0", ngImport: i0, type: A11yModule, decorators: [{
             type: NgModule,
@@ -157,20 +157,21 @@ import * as i0 from '@angular/core';
 import { Injectable } from '@angular/core';
 
 class MySecondService {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "0.0.0", ngImport: i0, type: MySecondService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "0.0.0", ngImport: i0, type: MySecondService, providedIn: 'root' }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "0.0.0", ngImport: i0, type: MySecondService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "0.0.0", ngImport: i0, type: MySecondService, providedIn: 'root' });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "0.0.0", ngImport: i0, type: MySecondService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
 
 class MyService {
+    secondService;
     constructor(secondService) {
         this.secondService = secondService;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "0.0.0", ngImport: i0, type: MyService, deps: [{ token: MySecondService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "0.0.0", ngImport: i0, type: MyService, providedIn: 'root' }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "0.0.0", ngImport: i0, type: MyService, deps: [{ token: MySecondService }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "0.0.0", ngImport: i0, type: MyService, providedIn: 'root' });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "0.0.0", ngImport: i0, type: MyService, decorators: [{
             type: Injectable,
@@ -197,9 +198,9 @@ import * as i0 from '@angular/core';
 import { NgModule } from '@angular/core';
 
 class SecondaryModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "0.0.0", ngImport: i0, type: SecondaryModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "0.0.0", ngImport: i0, type: SecondaryModule }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "0.0.0", ngImport: i0, type: SecondaryModule }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "0.0.0", ngImport: i0, type: SecondaryModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "0.0.0", ngImport: i0, type: SecondaryModule });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "0.0.0", ngImport: i0, type: SecondaryModule });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "0.0.0", ngImport: i0, type: SecondaryModule, decorators: [{
             type: NgModule,
@@ -227,9 +228,9 @@ import * as i0 from '@angular/core';
 import { NgModule } from '@angular/core';
 
 class MyModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "0.0.0", ngImport: i0, type: MyModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "0.0.0", ngImport: i0, type: MyModule }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "0.0.0", ngImport: i0, type: MyModule }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "0.0.0", ngImport: i0, type: MyModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "0.0.0", ngImport: i0, type: MyModule });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "0.0.0", ngImport: i0, type: MyModule });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "0.0.0", ngImport: i0, type: MyModule, decorators: [{
             type: NgModule,

packages/bazel/test/ng_package/example_with_ts_library_package.golden

@@ -76,9 +76,9 @@ import * as i0 from '@angular/core';
 import { NgModule } from '@angular/core';
 
 class PortalModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "0.0.0", ngImport: i0, type: PortalModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "0.0.0", ngImport: i0, type: PortalModule }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "0.0.0", ngImport: i0, type: PortalModule }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "0.0.0", ngImport: i0, type: PortalModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "0.0.0", ngImport: i0, type: PortalModule });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "0.0.0", ngImport: i0, type: PortalModule });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "0.0.0", ngImport: i0, type: PortalModule, decorators: [{
             type: NgModule,

packages/bazel/test/ngc-wrapped/ivy_enabled/ng_module_ivy_test.ts

@@ -15,6 +15,6 @@ describe('ng_module with ivy enabled', () => {
       'packages/bazel/test/ngc-wrapped/ivy_enabled/test_module_default_compilation.mjs',
     );
     const fileContent = readFileSync(outputFile, 'utf8');
-    expect(fileContent).toContain(`static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent`);
+    expect(fileContent).toContain(`static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent`);
   });
 });

packages/compiler-cli/linker/src/file_linker/linker_environment.ts

@@ -15,18 +15,21 @@ import {DEFAULT_LINKER_OPTIONS, LinkerOptions} from './linker_options';
 import {Translator} from './translator';
 
 export class LinkerEnvironment<TStatement, TExpression> {
-  readonly translator = new Translator<TStatement, TExpression>(this.factory);
-  readonly sourceFileLoader = this.options.sourceMapping
-    ? new SourceFileLoader(this.fileSystem, this.logger, {})
-    : null;
+  readonly translator: Translator<TStatement, TExpression>;
+  readonly sourceFileLoader: SourceFileLoader | null;
 
   private constructor(
     readonly fileSystem: ReadonlyFileSystem,
     readonly logger: Logger,
     readonly host: AstHost<TExpression>,
     readonly factory: AstFactory<TStatement, TExpression>,
     readonly options: LinkerOptions,
-  ) {}
+  ) {
+    this.translator = new Translator<TStatement, TExpression>(this.factory);
+    this.sourceFileLoader = this.options.sourceMapping
+      ? new SourceFileLoader(this.fileSystem, this.logger, {})
+      : null;
+  }
 
   static create<TStatement, TExpression>(
     fileSystem: ReadonlyFileSystem,

packages/compiler-cli/test/ngtsc/env.ts

@@ -48,13 +48,15 @@ export class NgtscTestEnvironment {
   private multiCompileHostExt: MultiCompileHostExt | null = null;
   private oldProgram: Program | null = null;
   private changedResources: Set<string> | null = null;
-  private commandLineArgs = ['-p', this.basePath];
+  private commandLineArgs: string[];
 
   private constructor(
     private fs: FileSystem,
     readonly outDir: AbsoluteFsPath,
     readonly basePath: AbsoluteFsPath,
-  ) {}
+  ) {
+    this.commandLineArgs = ['-p', this.basePath];
+  }
 
   /**
    * Set up a new testing environment.