refactor(@angular-devkit/build-angular): use Webpack provided loader types

Webpack now provides loader function type definitions. These type definitions are now used in custom loaders within the package.
This improves type safety and behavior correctness of the loaders when used with Webpack.

Author: clydin

packages/angular_devkit/build_angular/src/extract-i18n/ivy-extract-loader.ts

@@ -7,26 +7,23 @@
  */
 
 import { MessageExtractor } from '@angular/localize/src/tools/src/extract/extraction';
-import { getOptions } from 'loader-utils';
 import * as nodePath from 'path';
 
+// Extract loader source map parameter type since it is not exported directly
+type LoaderSourceMap = Parameters<import('webpack').LoaderDefinitionFunction>[1];
+
 interface LocalizeExtractLoaderOptions {
   messageHandler: (messages: import('@angular/localize').ɵParsedMessage[]) => void;
 }
 
 export default function localizeExtractLoader(
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  this: any,
+  this: import('webpack').LoaderContext<LocalizeExtractLoaderOptions>,
   content: string,
-  // Source map types are broken in the webpack type definitions
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  map: any,
+  map: LoaderSourceMap,
 ) {
   // eslint-disable-next-line @typescript-eslint/no-this-alias
   const loaderContext = this;
-
-  // Casts are needed to workaround the loader-utils typings limited support for option values
-  const options = (getOptions(this) as unknown) as LocalizeExtractLoaderOptions | undefined;
+  const options = this.getOptions();
 
   // Setup a Webpack-based logger instance
   const logger = {
@@ -37,20 +34,22 @@ export default function localizeExtractLoader(
       console.debug(...args);
     },
     info(...args: string[]): void {
-      loaderContext.emitWarning(args.join(''));
+      loaderContext.emitWarning(new Error(args.join('')));
     },
     warn(...args: string[]): void {
-      loaderContext.emitWarning(args.join(''));
+      loaderContext.emitWarning(new Error(args.join('')));
     },
     error(...args: string[]): void {
-      loaderContext.emitError(args.join(''));
+      loaderContext.emitError(new Error(args.join('')));
     },
   };
 
   let filename = loaderContext.resourcePath;
-  if (map?.file) {
+  const mapObject =
+    typeof map === 'string' ? (JSON.parse(map) as Exclude<LoaderSourceMap, string>) : map;
+  if (mapObject?.file) {
     // The extractor's internal sourcemap handling expects the filenames to match
-    filename = nodePath.join(loaderContext.context, map.file);
+    filename = nodePath.join(loaderContext.context, mapObject.file);
   }
 
   // Setup a virtual file system instance for the extractor

packages/angular_devkit/build_angular/src/webpack/plugins/postcss-cli-resources.ts

@@ -32,8 +32,7 @@ export interface PostcssCliResourcesOptions {
   /** CSS is extracted to a `.css` or is embedded in a `.js` file. */
   extracted?: boolean;
   filename: (resourcePath: string) => string;
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  loader: any;
+  loader: import('webpack').LoaderContext<unknown>;
   emitFile: boolean;
 }
 
@@ -94,20 +93,20 @@ export default function (options?: PostcssCliResourcesOptions): Plugin {
     const { pathname, hash, search } = url.parse(inputUrl.replace(/\\/g, '/'));
     const resolver = (file: string, base: string) =>
       new Promise<string>((resolve, reject) => {
-        loader.resolve(base, decodeURI(file), (err: Error, result: string) => {
+        loader.resolve(base, decodeURI(file), (err, result) => {
           if (err) {
             reject(err);
 
             return;
           }
-          resolve(result);
+          resolve(result as string);
         });
       });
 
     const result = await resolve(pathname as string, context, resolver);
 
     return new Promise<string>((resolve, reject) => {
-      loader.fs.readFile(result, (err: Error, content: Buffer) => {
+      loader.fs.readFile(result, (err, content) => {
         if (err) {
           reject(err);
 
@@ -125,7 +124,8 @@ export default function (options?: PostcssCliResourcesOptions): Plugin {
 
         loader.addDependency(result);
         if (emitFile) {
-          loader.emitFile(outputPath, content, undefined, { sourceFilename: result });
+          // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+          loader.emitFile(outputPath, content!, undefined, { sourceFilename: result });
         }
 
         let outputUrl = outputPath.replace(/\\/g, '/');
@@ -172,7 +172,7 @@ export default function (options?: PostcssCliResourcesOptions): Plugin {
         try {
           processedUrl = await process(originalUrl, context, resourceCache);
         } catch (err) {
-          loader.emitError(decl.error(err.message, { word: originalUrl }).toString());
+          loader.emitError(decl.error(err.message, { word: originalUrl }));
           continue;
         }
 

packages/angular_devkit/build_angular/src/webpack/plugins/single-test-transform.ts

@@ -7,7 +7,6 @@
  */
 
 import { logging, tags } from '@angular-devkit/core';
-import { getOptions } from 'loader-utils';
 import { extname } from 'path';
 
 export interface SingleTestTransformLoaderOptions {
@@ -32,8 +31,11 @@ export const SingleTestTransformLoader = __filename;
  * array to import them directly, and thus run the tests there.
  */
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-export default function loader(this: any, source: string): string {
-  const { files = [], logger = console } = getOptions(this) as SingleTestTransformLoaderOptions;
+export default function loader(
+  this: import('webpack').LoaderContext<SingleTestTransformLoaderOptions>,
+  source: string,
+): string {
+  const { files = [], logger = console } = this.getOptions();
   // signal the user that expected content is not present.
   if (!source.includes('require.context(')) {
     logger.error(tags.stripIndent`The 'include' option requires that the 'main' file for tests includes the below line: