fix(@schematics/angular): enable TypeScript esModuleInterop by defa…

…ult for ESM compliance

The `esModuleInterop` TypeScript option is a TypeScript recommended option that ensures that TypeScript
emits compliant ESM code when transforming namespace and default imports. This is important for new projects
because they now use the `application` builder which emits full ESM code. Not using this option with certain
third-party packages (e.g., `moment`) can result in build warnings and the potential for runtime failure. For existing
applications that are considering migrating, information pertaining to this situation will be available within
the documentation.

Since the `allowSyntheticDefaultImports` is implied and automatically enabled when `esModuleInterop` is enabled,
the previous option has been replaced with this one.

Reference: https://www.typescriptlang.org/tsconfig#esModuleInterop
(cherry picked from commit 00872ea)

packages/schematics/angular/workspace/files/tsconfig.json.template

@@ -9,7 +9,7 @@
     "noPropertyAccessFromIndexSignature": true,
     "noImplicitReturns": true,
     "noFallthroughCasesInSwitch": true,<% } %>
-    "allowSyntheticDefaultImports": true,
+    "esModuleInterop": true,
     "sourceMap": true,
     "declaration": false,
     "downlevelIteration": true,

tests/legacy-cli/e2e/initialize/500-create-project.ts

@@ -45,6 +45,10 @@ export default async function () {
           buildOptimizer: false,
         };
       });
+      await updateJsonFile('tsconfig.json', (tsconfig) => {
+        delete tsconfig.compilerOptions.esModuleInterop;
+        tsconfig.compilerOptions.allowSyntheticDefaultImports = true;
+      });
     }
   }