feat(migrations): add strictTemplates to tsconfig during ng update

Add the strictTemplates option to tsconfig.json with a default value of false

Author: aparzi

packages/core/schematics/BUILD.bazel

@@ -125,6 +125,10 @@ bundle_entrypoints = [
         "http-xhr-backend",
         "packages/core/schematics/migrations/http-xhr-backend/index.js",
     ],
+    [
+        "strict-templates",
+        "packages/core/schematics/migrations/strict-template/index.js",
+    ],
 ]
 
 rollup.rollup(
@@ -138,6 +142,7 @@ rollup.rollup(
         "//packages/core/schematics:tsconfig_build",
         "//packages/core/schematics/migrations/change-detection-eager",
         "//packages/core/schematics/migrations/http-xhr-backend",
+        "//packages/core/schematics/migrations/strict-template",
         "//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

@@ -9,6 +9,11 @@
       "version": "22.0.0",
       "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": {
+      "version": "22.0.0",
+      "description": "Adds 'strictTemplates: true' in tsconfig.json.",
+      "factory": "./bundles/strict-templates.cjs#migrate"
     }
   }
 }

packages/core/schematics/migrations/strict-template/BUILD.bazel

@@ -0,0 +1,37 @@
+load("//tools:defaults.bzl", "jasmine_test", "ts_project")
+
+package(
+    default_visibility = [
+        "//packages/core/schematics:__pkg__",
+        "//packages/core/schematics/test:__pkg__",
+    ],
+)
+
+ts_project(
+    name = "strict-template",
+    srcs = glob(
+        ["**/*.ts"],
+        exclude = ["*.spec.ts"],
+    ),
+    deps = [
+        "//:node_modules/@angular-devkit/schematics",
+        "//packages/core/schematics/utils",
+    ],
+)
+
+ts_project(
+    name = "test_lib",
+    testonly = True,
+    srcs = glob(["*.spec.ts"]),
+    deps = [
+        ":strict-template",
+        "//:node_modules/@angular-devkit/core",
+        "//:node_modules/@angular-devkit/schematics",
+        "//packages/core/schematics/utils",
+    ],
+)
+
+jasmine_test(
+    name = "test",
+    data = [":test_lib"],
+)

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

@@ -0,0 +1,58 @@
+/**
+ * @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';
+
+/**
+ * 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 path of allPaths) {
+      const content = tree.read(path);
+      if (!content) continue;
+
+      const contentStr = content.toString('utf-8');
+
+      // Check if it's already there to avoid parsing if not needed.
+      if (contentStr.includes('strictTemplates')) {
+        continue;
+      }
+
+      try {
+        // Use a simple JSON.parse for now. In a real world scenario we might want to use
+        // a parser that supports comments (JSONC), but for this migration it's likely
+        // that tsconfig files are standard enough or that overwriting them is acceptable
+        // in the context of an ng update.
+        const json = JSON.parse(contentStr);
+
+        if (!json.compilerOptions || Object.keys(json.compilerOptions).length === 0) {
+          continue;
+        }
+
+        if (!json.angularCompilerOptions) {
+          json.angularCompilerOptions = {strictTemplates: false};
+          tree.overwrite(path, JSON.stringify(json, null, 2));
+          continue;
+        }
+
+        if (json.angularCompilerOptions.strictTemplates === undefined) {
+          json.angularCompilerOptions.strictTemplates = false;
+          tree.overwrite(path, JSON.stringify(json, null, 2));
+        }
+      } catch (e) {
+        // If parsing fails, skip the file to avoid corrupting it.
+        continue;
+      }
+    }
+  };
+}

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

@@ -0,0 +1,109 @@
+/**
+ * @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 {HostTree} from '@angular-devkit/schematics';
+import {UnitTestTree} from '@angular-devkit/schematics/testing/index.js';
+import {migrate} from './index';
+
+describe('strict-template migration', () => {
+  let tree: UnitTestTree;
+
+  beforeEach(() => {
+    tree = new UnitTestTree(new HostTree());
+    tree.create(
+      '/angular.json',
+      JSON.stringify({
+        version: 1,
+        projects: {
+          t: {
+            root: '',
+            architect: {
+              build: {
+                options: {
+                  tsConfig: './tsconfig.json',
+                },
+              },
+            },
+          },
+        },
+      }),
+    );
+  });
+
+  it('should not add options if compilerOptions is empty', async () => {
+    tree.create(
+      '/tsconfig.json',
+      JSON.stringify({
+        compilerOptions: {},
+      }),
+    );
+
+    await migrate()(tree, {} as any);
+
+    const tsconfig = JSON.parse(tree.readContent('/tsconfig.json'));
+    expect(tsconfig.angularCompilerOptions).toBeUndefined();
+  });
+
+  it('should not add options if compilerOptions is missing', async () => {
+    tree.create('/tsconfig.json', JSON.stringify({}));
+
+    await migrate()(tree, {} as any);
+
+    const tsconfig = JSON.parse(tree.readContent('/tsconfig.json'));
+    expect(tsconfig.angularCompilerOptions).toBeUndefined();
+  });
+
+  it('should add strictTemplates to false if compilerOptions is not empty', async () => {
+    tree.create(
+      '/tsconfig.json',
+      JSON.stringify({
+        compilerOptions: {
+          target: 'es2020',
+        },
+      }),
+    );
+
+    await migrate()(tree, {} as any);
+
+    const tsconfig = JSON.parse(tree.readContent('/tsconfig.json'));
+    expect(tsconfig.angularCompilerOptions.strictTemplates).toBe(false);
+  });
+
+  it('should add strictTemplates to false if angularCompilerOptions is empty but compilerOptions is not', async () => {
+    tree.create(
+      '/tsconfig.json',
+      JSON.stringify({
+        compilerOptions: {
+          target: 'es2020',
+        },
+        angularCompilerOptions: {},
+      }),
+    );
+
+    await migrate()(tree, {} as any);
+
+    const tsconfig = JSON.parse(tree.readContent('/tsconfig.json'));
+    expect(tsconfig.angularCompilerOptions.strictTemplates).toBe(false);
+  });
+
+  it('should not change strictTemplates if already present', async () => {
+    tree.create(
+      '/tsconfig.json',
+      JSON.stringify({
+        angularCompilerOptions: {
+          strictTemplates: true,
+        },
+      }),
+    );
+
+    await migrate()(tree, {} as any);
+
+    const tsconfig = JSON.parse(tree.readContent('/tsconfig.json'));
+    expect(tsconfig.angularCompilerOptions.strictTemplates).toBe(true);
+  });
+});