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

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: