fix(migrations): Fix typo for strict-template migration

Fix typo for strict-template migration

Author: aparzi

packages/core/schematics/BUILD.bazel

@@ -126,8 +126,8 @@ bundle_entrypoints = [
         "packages/core/schematics/migrations/http-xhr-backend/index.js",
     ],
     [
-        "strict-templates",
-        "packages/core/schematics/migrations/strict-template/index.js",
+        "strict-templates-default",
+        "packages/core/schematics/migrations/strict-templates-default/index.js",
     ],
     [
         "can-match-snapshot-required",
@@ -152,7 +152,7 @@ rollup.rollup(
         "//packages/core/schematics/migrations/change-detection-eager",
         "//packages/core/schematics/migrations/http-xhr-backend",
         "//packages/core/schematics/migrations/incremental-hydration",
-        "//packages/core/schematics/migrations/strict-template",
+        "//packages/core/schematics/migrations/strict-templates-default",
         "//packages/core/schematics/ng-generate/cleanup-unused-imports",
         "//packages/core/schematics/ng-generate/common-to-standalone-migration",
         "//packages/core/schematics/ng-generate/control-flow-migration",

packages/core/schematics/migrations.json

@@ -10,10 +10,10 @@
       "description": "Adds 'withXhr' to 'provideHttpClient' function calls when the 'HttpXhrBackend' is used. For more information see: https://angular.dev/api/common/http/withXhr",
       "factory": "./bundles/http-xhr-backend.cjs#migrate"
     },
-    "strict-template": {
+    "strict-templates-default": {
       "version": "22.0.0",
-      "description": "Adds 'strictTemplates: true' in tsconfig.json.",
-      "factory": "./bundles/strict-templates.cjs#migrate"
+      "description": "Adds 'strictTemplates: false' in tsconfig.json when not set.",
+      "factory": "./bundles/strict-templates-default.cjs#migrate"
     },
     "can-match-snapshot-required": {
       "version": "22.0.0",

packages/core/schematics/migrations/strict-template/index.ts

@@ -8,13 +8,15 @@ package(
 )
 
 ts_project(
-    name = "strict-template",
+    name = "strict-templates-default",
     srcs = glob(
         ["**/*.ts"],
         exclude = ["*.spec.ts"],
     ),
     deps = [
+        "//:node_modules/@angular-devkit/core",
         "//:node_modules/@angular-devkit/schematics",
+        "//:node_modules/@schematics/angular",
         "//packages/core/schematics/utils",
     ],
 )
@@ -24,9 +26,10 @@ ts_project(
     testonly = True,
     srcs = glob(["*.spec.ts"]),
     deps = [
-        ":strict-template",
+        ":strict-templates-default",
         "//:node_modules/@angular-devkit/core",
         "//:node_modules/@angular-devkit/schematics",
+        "//:node_modules/@schematics/angular",
         "//packages/core/schematics/utils",
     ],
 )

…s/migrations/strict-template/BUILD.bazel …ons/strict-templates-default/BUILD.bazelpackages/core/schematics/migrations/strict-template/BUILD.bazel renamed to packages/core/schematics/migrations/strict-templates-default/BUILD.bazel packages/core/schematics/migrations/strict-template/BUILD.bazel renamed to packages/core/schematics/migrations/strict-templates-default/BUILD.bazel

@@ -0,0 +1,73 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.dev/license
+ */
+
+import {Rule} from '@angular-devkit/schematics';
+import {getProjectTsConfigPaths} from '../../utils/project_tsconfig_paths';
+import {JSONFile} from '@schematics/angular/utility/json-file';
+import ts from 'typescript';
+import {dirname, join} from 'node:path';
+
+function getResolvedAngularCompilerOptions(tree: any, tsconfigPath: string): Record<string, any> {
+  const sourceFile = ts.readJsonConfigFile(tsconfigPath, (path) => tree.readText(path));
+  const config = ts.convertToObject(sourceFile, []);
+
+  let angularOptions = config.angularCompilerOptions || {};
+
+  // Manually resolve inheritance for Angular-specific options.
+  // Since the TypeScript API doesn't perform a deep merge of custom/non-standard keys
+  // during config parsing, we must traverse the inheritance chain manually
+  if (config.extends) {
+    // Management extends property...
+    const parentPath = join(dirname(tsconfigPath), config.extends);
+
+    if (tree.exists(parentPath)) {
+      const parentOptions = getResolvedAngularCompilerOptions(tree, parentPath);
+
+      // Merge: the options of the current file overwrite those of the parent
+      angularOptions = {
+        ...parentOptions,
+        ...angularOptions,
+      };
+    }
+  }
+
+  return angularOptions;
+}
+
+/**
+ * Migration that adds `strictTemplates: false` to `tsconfig.json` files.
+ */
+export function migrate(): Rule {
+  return async (tree) => {
+    const {buildPaths, testPaths} = await getProjectTsConfigPaths(tree);
+    const allPaths = [...new Set([...buildPaths, ...testPaths])];
+
+    for (const tsconfigPath of allPaths) {
+      const json = new JSONFile(tree, tsconfigPath);
+      const compilerOptions = json.get(['compilerOptions']);
+
+      if (
+        !compilerOptions ||
+        typeof compilerOptions !== 'object' ||
+        Object.keys(compilerOptions).length === 0
+      ) {
+        continue;
+      }
+
+      const angularOptions = getResolvedAngularCompilerOptions(tree, tsconfigPath);
+
+      if (angularOptions['strictTemplates'] !== undefined) {
+        continue;
+      }
+
+      if (json.get(['angularCompilerOptions', 'strictTemplates']) === undefined) {
+        json.modify(['angularCompilerOptions', 'strictTemplates'], false);
+      }
+    }
+  };
+}

packages/core/schematics/migrations/strict-templates-default/index.ts

@@ -10,7 +10,11 @@ import {HostTree} from '@angular-devkit/schematics';
 import {UnitTestTree} from '@angular-devkit/schematics/testing/index.js';
 import {migrate} from './index';
 
-describe('strict-template migration', () => {
+function parseConfig(tree: UnitTestTree, path: string) {
+  return JSON.parse(tree.readContent(path).replace(/\/\/.*$/gm, ''));
+}
+
+describe('strict-templates-default migration', () => {
   let tree: UnitTestTree;
 
   beforeEach(() => {
@@ -45,7 +49,7 @@ describe('strict-template migration', () => {
 
     await migrate()(tree, {} as any);
 
-    const tsconfig = JSON.parse(tree.readContent('/tsconfig.json'));
+    const tsconfig = parseConfig(tree, '/tsconfig.json');
     expect(tsconfig.angularCompilerOptions).toBeUndefined();
   });
 
@@ -54,7 +58,7 @@ describe('strict-template migration', () => {
 
     await migrate()(tree, {} as any);
 
-    const tsconfig = JSON.parse(tree.readContent('/tsconfig.json'));
+    const tsconfig = parseConfig(tree, '/tsconfig.json');
     expect(tsconfig.angularCompilerOptions).toBeUndefined();
   });
 
@@ -70,7 +74,7 @@ describe('strict-template migration', () => {
 
     await migrate()(tree, {} as any);
 
-    const tsconfig = JSON.parse(tree.readContent('/tsconfig.json'));
+    const tsconfig = parseConfig(tree, '/tsconfig.json');
     expect(tsconfig.angularCompilerOptions.strictTemplates).toBe(false);
   });
 
@@ -87,7 +91,7 @@ describe('strict-template migration', () => {
 
     await migrate()(tree, {} as any);
 
-    const tsconfig = JSON.parse(tree.readContent('/tsconfig.json'));
+    const tsconfig = parseConfig(tree, '/tsconfig.json');
     expect(tsconfig.angularCompilerOptions.strictTemplates).toBe(false);
   });
 
@@ -103,7 +107,68 @@ describe('strict-template migration', () => {
 
     await migrate()(tree, {} as any);
 
-    const tsconfig = JSON.parse(tree.readContent('/tsconfig.json'));
+    const tsconfig = parseConfig(tree, '/tsconfig.json');
     expect(tsconfig.angularCompilerOptions.strictTemplates).toBe(true);
   });
+
+  it('should handle tsconfig with comments', async () => {
+    tree.create(
+      '/tsconfig.json',
+      `{
+        // This is a comment
+        "compilerOptions": {
+          "target": "es2020"
+        }
+      }`,
+    );
+
+    const runMigration = migrate();
+    await runMigration(tree, {} as any);
+
+    const tsconfig = parseConfig(tree, '/tsconfig.json');
+    expect(tsconfig.compilerOptions.target).toBe('es2020');
+    expect(tsconfig.angularCompilerOptions.strictTemplates).toBe(false);
+  });
+
+  it('should not add strictTemplates to child tsconfig that inherits it from parent', async () => {
+    tree.create(
+      '/tsconfig.json',
+      JSON.stringify({
+        compilerOptions: {target: 'es2020'},
+        angularCompilerOptions: {strictTemplates: true},
+        include: ['src/**/*.d.ts'],
+      }),
+    );
+
+    tree.create(
+      '/tsconfig.app.json',
+      JSON.stringify({
+        extends: './tsconfig.json',
+        compilerOptions: {outDir: './out-tsc/app'},
+      }),
+    );
+
+    tree.overwrite(
+      '/angular.json',
+      JSON.stringify({
+        version: 1,
+        projects: {
+          t: {
+            root: '',
+            architect: {
+              build: {
+                options: {tsConfig: './tsconfig.app.json'},
+              },
+            },
+          },
+        },
+      }),
+    );
+
+    await migrate()(tree, {} as any);
+
+    // The child MUST NOT receive strictTemplates because it inherits it
+    const childTsconfig = parseConfig(tree, '/tsconfig.app.json');
+    expect(childTsconfig.angularCompilerOptions).toBeUndefined();
+  });
 });