Angular compiler options plugin

Just like the TS plugin, I think that having a plugin for angularCompilerOptions would be 🔥.

The strictTemplates option from angularCompilerOptions is especially hard to turn on on an existing code base.

The thing is, it can’t be done from the Typescript plugin only as Typescript doesn’t care about that option. We’d have to make a build of an app or a library using angular CLI I assume.

I just watched this morning btw a video from ng-conf where Alex Rickabaugh talks about the new strictTemplates option and the fact that it can be hard to turn on on an existing code base: https://www.youtube.com/watch?v=7yge1cHFExI but the only advice is to turn on that mode while improving things locally and turning it off before pushing but this is not optimal as regressions could come in easily and I think that Betterer could shine here 🌞 😄!

[phenomnomnominal]

I got this working with something like this:

import { CompilerOptions, performCompilation, readConfiguration } from '@angular/compiler-cli';
import { BettererFileTest, BettererFileResolver } from '@betterer/betterer';
import { BettererError } from '@betterer/errors';
import { DiagnosticWithLocation, flattenDiagnosticMessageText } from 'typescript';

export default {
  // getting the right path here is very important!
  'strict templates': angular('./apps/docs/tsconfig.app.json', { strictTemplates: true })
};

function angular(configFilePath: string, extraCompilerOptions: CompilerOptions): BettererFileTest {
  if (!configFilePath) {
    throw new BettererError("For `@betterer/angular` to work, you need to provide the path to a tsconfig.json file, e.g. `'./tsconfig.json'`. ❌");
  }
  if (!extraCompilerOptions) {
    throw new BettererError('For `@betterer/angular` to work, you need to provide compiler options, e.g. `{ strictTemplates: true }`. ❌');
  }

  const resolver = new BettererFileResolver();

  return new BettererFileTest(resolver, async (_, fileTestResult) => {
    let { rootNames, options } = readConfiguration(configFilePath, extraCompilerOptions);

    const files = await resolver.validate(rootNames);
    const { diagnostics } = performCompilation({
      rootNames: files as Array<string>,
      options
    });

    diagnostics.forEach((diagnostic) => {
      const { file, start, length } = diagnostic as DiagnosticWithLocation;
      const { fileName } = file;
      const result = fileTestResult.addFile(fileName, file.getFullText());
      const message = flattenDiagnosticMessageText(diagnostic.messageText, '\n');
      result.addIssue(start, start + length, message);
    });
  });
}

I did it on quite a big project and it revealed some issues with the default reporter, so I’m fixing up that and then I’m going to write up something about how this works.

[phenomnomnominal]

I actually tried this yesterday and couldn’t get it to work, so I’m going to look at it again 😊

The basic idea is there, but I think I need to hook into the CLI a bit deeper.