build: replace custom lint rule with compiler option

We currently have a lint rule that prevents dotted access in `SimpleChanges` objects, because it will break with property minification. These changes replace the rule with the built-in `noPropertyAccessFromIndexSignature` compiler option which has the same effect with the added benefit of aligning us closer with g3 and reducing the amount of code we need to maintain.

Author: crisbeto

integration/mdc-migration/verify-golden.ts

@@ -17,7 +17,7 @@ const TEST_DIRECTORY = CURRENT_WORKING_DIRECTORY;
 const GOLDEN_DIRECTORY = path.join(CURRENT_WORKING_DIRECTORY, process.argv[3]);
 const IGNORED_FILES = new Set(process.argv.slice(5));
 
-if (SHOULD_APPROVE && !process.env.BUILD_WORKSPACE_DIRECTORY) {
+if (SHOULD_APPROVE && !process.env['BUILD_WORKSPACE_DIRECTORY']) {
   console.error('Approval command must be run with `bazel run`.');
   process.exit(1);
 }
@@ -197,7 +197,7 @@ async function deleteFiles(file: string, ignoredFiles: Set<string>) {
     if (diffs.length) {
       if (SHOULD_APPROVE) {
         const APPROVED_GOLDEN_DIRECTORY = path.join(
-          process.env.BUILD_WORKSPACE_DIRECTORY!,
+          process.env['BUILD_WORKSPACE_DIRECTORY']!,
           process.argv[4],
         );
         await deleteFiles(

integration/size-test/check-size.ts

@@ -77,7 +77,7 @@ if (deviatedByPercentage) {
 /** Prints the command for approving the current test. */
 function printApproveCommand() {
   console.info(chalk.yellow('You can approve the golden by running the following command:'));
-  console.info(chalk.yellow(`  bazel run ${process.env.BAZEL_TARGET}.approve`));
+  console.info(chalk.yellow(`  bazel run ${process.env['BAZEL_TARGET']}.approve`));
 }
 
 /** Gets the lexicographically sorted size-test golden. */

scripts/build-docs-content.mts

@@ -21,7 +21,7 @@ const distDir = join(projectDir, 'dist/');
 const outputDir = join(distDir, 'docs-content-pkg');
 
 /** Command that runs Bazel. */
-const bazelCmd = process.env.BAZEL || `yarn -s bazel`;
+const bazelCmd = process.env['BAZEL'] || `yarn -s bazel`;
 
 /**
  * Builds the docs content NPM package in snapshot mode.

scripts/build-packages-dist.mts

@@ -20,7 +20,7 @@ const releaseTargetTag = 'release-package';
 const projectDir = join(dirname(fileURLToPath(import.meta.url)), '../');
 
 /** Command that runs Bazel. */
-const bazelCmd = process.env.BAZEL || `yarn -s bazel`;
+const bazelCmd = process.env['BAZEL'] || `yarn -s bazel`;
 
 /** Command that queries Bazel for all release package targets. */
 const queryPackagesCmd =

scripts/caretaking/resync-caretaker-app-prs.ts

@@ -2,7 +2,7 @@ import {Octokit} from '@octokit/rest';
 import * as fetch from 'node-fetch';
 
 const apiBaseUrl = 'https://test-jperrott.firebaseio.com/pulls';
-const github = new Octokit({auth: process.env.TOKEN});
+const github = new Octokit({auth: process.env['TOKEN']});
 
 async function resync() {
   const pulls: any[] = [];

scripts/circleci/notify-slack-job-failure.mts

@@ -8,15 +8,15 @@
 import sh from 'shelljs';
 import {isVersionBranch, getConfig, assertValidGithubConfig} from '@angular/ng-dev';
 
-if (process.env.CIRCLE_PR_NUMBER !== undefined) {
+if (process.env['CIRCLE_PR_NUMBER'] !== undefined) {
   console.info('Skipping notifications for pull requests.');
   process.exit(0);
 }
 
-const jobName = process.env.CIRCLE_JOB!;
-const branchName = process.env.CIRCLE_BRANCH!;
-const jobUrl = process.env.CIRCLE_BUILD_URL!;
-const webhookUrl = process.env.SLACK_COMPONENTS_CI_FAILURES_WEBHOOK_URL!;
+const jobName = process.env['CIRCLE_JOB']!;
+const branchName = process.env['CIRCLE_BRANCH']!;
+const jobUrl = process.env['CIRCLE_BUILD_URL']!;
+const webhookUrl = process.env['SLACK_COMPONENTS_CI_FAILURES_WEBHOOK_URL']!;
 
 const {github} = await getConfig([assertValidGithubConfig]);
 const isPublishBranch = isVersionBranch(branchName) || branchName === github.mainBranchName;

scripts/docs-deploy/deploy-ci-push.mts

@@ -13,19 +13,19 @@ import {getReleaseRepoWithApi} from './github-versioning.mjs';
 import {updateVersionsFile} from './update-versions-file.mjs';
 
 async function main() {
-  if (process.env.CIRCLE_PR_NUMBER !== undefined) {
+  if (process.env['CIRCLE_PR_NUMBER'] !== undefined) {
     console.log('Skipping deployment for pull request build.');
     return;
   }
 
-  const branchName = process.env.CIRCLE_BRANCH;
+  const branchName = process.env['CIRCLE_BRANCH'];
   if (branchName === undefined) {
     throw new Error('Deployment script is unable to determine CI branch.');
   }
 
   const repo = await getReleaseRepoWithApi();
   const active = await ActiveReleaseTrains.fetch(repo);
-  const description = `${branchName} - ${process.env.CIRCLE_SHA1!}`;
+  const description = `${branchName} - ${process.env['CIRCLE_SHA1']!}`;
   const {projectId, serviceKey} = firebaseConfig;
 
   if (branchName === active.next.branchName) {

scripts/docs-deploy/deploy-to-site.mts

@@ -45,7 +45,7 @@ export async function deployToSite(
   // Setup GCP service key for the docs-app deployment.
   // https://firebase.google.com/docs/admin/setup.
   await fs.promises.writeFile(gcpServiceKeyTmpFile, firebaseServiceKey);
-  process.env.GOOGLE_APPLICATION_CREDENTIALS = gcpServiceKeyTmpFile;
+  process.env['GOOGLE_APPLICATION_CREDENTIALS'] = gcpServiceKeyTmpFile;
 
   await firebase('use', info.projectId);
   await firebase('target:clear', 'hosting', 'mat-aio');

scripts/docs-deploy/utils.mts

@@ -11,7 +11,10 @@ export const projectDir = path.join(path.dirname(fileURLToPath(import.meta.url))
 
 /** Interface describing a site target for the docs-app. */
 export class SiteTarget {
-  constructor(public firebaseSiteId: string, public remoteUrl: string) {}
+  constructor(
+    public firebaseSiteId: string,
+    public remoteUrl: string,
+  ) {}
 }
 
 /** Object capturing all site targets for the docs-app. */
@@ -25,12 +28,12 @@ export const sites = {
 };
 
 /** Optional Github access token. Can be used for querying the active release trains. */
-export const githubAccessToken: string | undefined = process.env.DOCS_DEPLOY_GITHUB_TOKEN;
+export const githubAccessToken: string | undefined = process.env['DOCS_DEPLOY_GITHUB_TOKEN'];
 
 /** Configuration describing the Firebase project that we deploy to. */
 export const firebaseConfig = {
   projectId: 'material-angular-io',
-  serviceKey: process.env.DOCS_SITE_GCP_SERVICE_KEY!,
+  serviceKey: process.env['DOCS_SITE_GCP_SERVICE_KEY']!,
 };
 
 /** Finds and parsed the `package.json` of the specified project directory. */

src/bazel-tsconfig-build.json

@@ -10,6 +10,7 @@
     "noUnusedParameters": false,
     "noUnusedLocals": false,
     "strictNullChecks": true,
+    "noPropertyAccessFromIndexSignature": true,
     "noImplicitReturns": true,
     "strictFunctionTypes": true,
     "noImplicitOverride": true,

src/cdk/schematics/tsconfig.json

@@ -7,6 +7,7 @@
     "outDir": "../../../dist/packages/cdk/schematics",
     "noEmitOnError": false,
     "strictNullChecks": true,
+    "noPropertyAccessFromIndexSignature": true,
     "useUnknownInCatchVariables": true,
     "noImplicitOverride": true,
     "noImplicitReturns": true,

src/cdk/schematics/utils/build-component.ts

@@ -43,7 +43,8 @@ import {getDefaultComponentOptions, isStandaloneSchematic} from './schematic-opt
 function buildDefaultPath(project: workspaces.ProjectDefinition): string {
   const root = project.sourceRoot ? `/${project.sourceRoot}/` : `/${project.root}/src/`;
 
-  const projectDirName = project.extensions.projectType === ProjectType.Application ? 'app' : 'lib';
+  const projectDirName =
+    project.extensions['projectType'] === ProjectType.Application ? 'app' : 'lib';
 
   return `${root}${projectDirName}`;
 }

src/cdk/schematics/utils/html-manipulation.ts

@@ -72,7 +72,7 @@ export function addBodyClass(host: Tree, htmlFilePath: string, className: string
     if (!hasClass) {
       // We have source code location info enabled, and we pre-checked that the element
       // has attributes, specifically the `class` attribute.
-      const classAttributeLocation = body.sourceCodeLocation!.attrs!.class;
+      const classAttributeLocation = body.sourceCodeLocation!.attrs!['class'];
       const recordedChange = host
         .beginUpdate(htmlFilePath)
         .insertRight(classAttributeLocation.endOffset - 1, ` ${className}`);

src/cdk/schematics/utils/project-index-file.ts

@@ -12,8 +12,8 @@ import {defaultTargetBuilders, getTargetsByBuilderName} from './project-targets'
 /** Gets the path of the index file in the given project. */
 export function getProjectIndexFiles(project: workspaces.ProjectDefinition): Path[] {
   const paths = getTargetsByBuilderName(project, defaultTargetBuilders.build)
-    .filter(t => t.options?.index)
-    .map(t => t.options!.index as Path);
+    .filter(t => t.options?.['index'])
+    .map(t => t.options!['index'] as Path);
 
   // Use a set to remove duplicate index files referenced in multiple build targets of a project.
   return Array.from(new Set(paths));

src/cdk/schematics/utils/project-main-file.ts

@@ -13,7 +13,7 @@ import {getProjectTargetOptions} from './project-targets';
 /** Looks for the main TypeScript file in the given project and returns its path. */
 export function getProjectMainFile(project: workspaces.ProjectDefinition): Path {
   const buildOptions = getProjectTargetOptions(project, 'build');
-  const mainPath = buildOptions.browser as Path | undefined;
+  const mainPath = buildOptions['browser'] as Path | undefined;
 
   if (!mainPath) {
     throw new SchematicsException(

src/cdk/schematics/utils/project-style-file.ts

@@ -24,10 +24,10 @@ export function getProjectStyleFile(
   extension?: string,
 ): string | null {
   const buildOptions = getProjectTargetOptions(project, 'build');
-  if (buildOptions.styles && isJsonArray(buildOptions.styles) && buildOptions.styles.length) {
-    const styles = buildOptions.styles.map(s =>
-      typeof s === 'string' ? s : (s as {input: string}).input,
-    );
+  const buildStyles = buildOptions['styles'];
+
+  if (buildStyles && isJsonArray(buildStyles) && buildStyles.length) {
+    const styles = buildStyles.map(s => (typeof s === 'string' ? s : (s as {input: string}).input));
 
     // Look for the default style file that is generated for new projects by the Angular CLI. This
     // default style file is usually called `styles.ext` unless it has been changed explicitly.

src/cdk/schematics/utils/project-tsconfig-paths.ts

@@ -19,7 +19,7 @@ export function getTargetTsconfigPath(
   project: workspaces.ProjectDefinition,
   targetName: string,
 ): WorkspacePath | null {
-  const tsconfig = project.targets?.get(targetName)?.options?.tsConfig;
+  const tsconfig = project.targets?.get(targetName)?.options?.['tsConfig'];
   return tsconfig ? normalize(tsconfig as string) : null;
 }
 

src/cdk/schematics/utils/schematic-options.ts

@@ -71,8 +71,8 @@ function getDefaultComponentOption<T>(
   optionNames: string[],
   fallbackValue: T,
 ): T {
-  const schematicOptions = isJsonObject(project.extensions.schematics || null)
-    ? (project.extensions.schematics as JsonObject)
+  const schematicOptions = isJsonObject(project.extensions['schematics'] || null)
+    ? (project.extensions['schematics'] as JsonObject)
     : null;
   const defaultSchematic = schematicOptions
     ? (schematicOptions['@schematics/angular:component'] as JsonObject | null)

src/cdk/testing/tests/webdriver.e2e.spec.ts

@@ -57,7 +57,7 @@ describe('WebDriverHarnessEnvironment', () => {
 
   beforeAll(async () => {
     wd = await new webdriver.Builder()
-      .usingServer(process.env.WEB_TEST_WEBDRIVER_SERVER!)
+      .usingServer(process.env['WEB_TEST_WEBDRIVER_SERVER']!)
       .withCapabilities(webTestMetadata.capabilities)
       .build();
   });

src/material/schematics/ng-add/index.spec.ts

@@ -41,7 +41,7 @@ describe('ng-add schematic', () => {
 
   /** Expects the given file to be in the styles of the specified workspace project. */
   function expectProjectStyleFile(project: workspaces.ProjectDefinition, filePath: string) {
-    expect(getProjectTargetOptions(project, 'build').styles)
+    expect(getProjectTargetOptions(project, 'build')['styles'])
       .withContext(`Expected "${filePath}" to be added to the project styles in the workspace.`)
       .toContain(filePath);
   }
@@ -436,7 +436,7 @@ describe('ng-add schematic', () => {
       const tree = await runner.runSchematic('ng-add-setup-project', baseOptions, appTree);
       const workspace = await getWorkspace(tree);
       const project = getProjectFromWorkspace(workspace, baseOptions.project);
-      const styles = getProjectTargetOptions(project, 'build').styles;
+      const styles = getProjectTargetOptions(project, 'build')['styles'];
 
       expect(styles)
         .not.withContext('Expected the existing prebuilt theme file to be removed.')
@@ -452,7 +452,7 @@ describe('ng-add schematic', () => {
       const tree = await runner.runSchematic('ng-add-setup-project', baseOptions, appTree);
       const workspace = await getWorkspace(tree);
       const project = getProjectFromWorkspace(workspace, baseOptions.project);
-      const styles = getProjectTargetOptions(project, 'build').styles;
+      const styles = getProjectTargetOptions(project, 'build')['styles'];
 
       expect(styles)
         .not.withContext('Expected the default prebuilt theme to be not configured.')
@@ -467,7 +467,7 @@ describe('ng-add schematic', () => {
       const tree = await runner.runSchematic('ng-add-setup-project', baseOptions, appTree);
       const workspace = await getWorkspace(tree);
       const project = getProjectFromWorkspace(workspace, baseOptions.project);
-      const styles = getProjectTargetOptions(project, 'build').styles;
+      const styles = getProjectTargetOptions(project, 'build')['styles'];
 
       expect(styles)
         .withContext(

src/material/schematics/ng-add/setup-project.ts

@@ -38,7 +38,7 @@ export default function (options: Schema): Rule {
     const workspace = await getWorkspace(host);
     const project = getProjectFromWorkspace(workspace, options.project);
 
-    if (project.extensions.projectType === ProjectType.Application) {
+    if (project.extensions['projectType'] === ProjectType.Application) {
       return chain([
         addAnimationsModule(options),
         addThemeToAppStyles(options),

src/material/schematics/ng-add/theming/theming.ts

@@ -132,10 +132,10 @@ function addThemeStyleToTarget(
     }
 
     const targetOptions = getProjectTargetOptions(project, targetName);
-    const styles = targetOptions.styles as (string | {input: string})[];
+    const styles = targetOptions['styles'] as (string | {input: string})[];
 
     if (!styles) {
-      targetOptions.styles = [assetPath];
+      targetOptions['styles'] = [assetPath];
     } else {
       const existingStyles = styles.map(s => (typeof s === 'string' ? s : s.input));
 

src/material/schematics/tsconfig.json

@@ -6,6 +6,7 @@
     "outDir": "../../../dist/packages/material/schematics",
     "noEmitOnError": false,
     "strictNullChecks": true,
+    "noPropertyAccessFromIndexSignature": true,
     "useUnknownInCatchVariables": true,
     "noImplicitOverride": true,
     "noImplicitAny": true,

src/universal-app/prerender.ts

@@ -18,7 +18,7 @@ const themeCssPath = runfiles.resolvePackageRelative('./theme.css');
 const result = renderModule(KitchenSinkRootServerModule, {
   document: readFileSync(indexHtmlPath, 'utf-8'),
 });
-const outDir = process.env.TEST_UNDECLARED_OUTPUTS_DIR as string;
+const outDir = process.env['TEST_UNDECLARED_OUTPUTS_DIR'] as string;
 
 result
   .then(content => {

tools/dgeni/tsconfig.json

@@ -6,6 +6,7 @@
     "moduleResolution": "node",
     "esModuleInterop": true,
     "strictNullChecks": true,
+    "noPropertyAccessFromIndexSignature": true,
     "useUnknownInCatchVariables": true,
     "noImplicitReturns": true,
     "strictFunctionTypes": true,