cleanup(angular): use module & moduleResolution node16

packages/angular/src/executors/application/application.impl.ts

@@ -46,7 +46,7 @@ export default async function* applicationExecutor(
     {
       builderName: 'application',
       description: 'Build an application.',
-      optionSchema: await import('./schema.json'),
+      optionSchema: require('./schema.json'),
     },
     context
   );

packages/angular/src/executors/browser-esbuild/browser-esbuild.impl.ts

@@ -41,17 +41,15 @@ export default async function* esbuildExecutor(
 
   const plugins = await loadPlugins(pluginPaths, options.tsConfig);
 
-  const { buildEsbuildBrowser } = await import(
-    '@angular-devkit/build-angular/src/builders/browser-esbuild/index'
-  );
+  const { buildEsbuildBrowser } = <
+    typeof import('@angular-devkit/build-angular/src/builders/browser-esbuild')
+  >require('@angular-devkit/build-angular/src/builders/browser-esbuild');
 
   const builderContext = await createBuilderContext(
     {
       builderName: 'browser-esbuild',
       description: 'Build a browser application',
-      optionSchema: await import(
-        '@angular-devkit/build-angular/src/builders/browser-esbuild/schema.json'
-      ),
+      optionSchema: require('@angular-devkit/build-angular/src/builders/browser-esbuild/schema.json'),
     },
     context
   );

packages/angular/src/executors/extract-i18n/extract-i18n.impl.ts

@@ -29,7 +29,7 @@ export default async function* extractI18nExecutor(
     {
       builderName: 'extrct-i18n',
       description: 'Extracts i18n messages from source code.',
-      optionSchema: await import('./schema.json'),
+      optionSchema: require('./schema.json'),
     },
     context
   );

packages/angular/src/executors/module-federation-dev-server/module-federation-dev-server.impl.ts

@@ -63,9 +63,7 @@ export async function* moduleFederationDevServerExecutor(
             {
               builderName: '@nx/angular:webpack-browser',
               description: 'Build a browser application',
-              optionSchema: await import(
-                '../../builders/webpack-browser/schema.json'
-              ),
+              optionSchema: require('../../builders/webpack-browser/schema.json'),
             },
             context
           )

packages/angular/src/executors/ng-packagr-lite/ng-packagr-adjustments/ng-packagr.ts

@@ -8,13 +8,13 @@ export async function getNgPackagrInstance(
   const { major: angularMajorVersion } = getInstalledAngularVersionInfo();
   if (angularMajorVersion >= 17) {
     const { WRITE_BUNDLES_TRANSFORM } = await import(
-      './v17+/ng-package/entry-point/write-bundles.di'
+      './v17+/ng-package/entry-point/write-bundles.di.js'
     );
     const { WRITE_PACKAGE_TRANSFORM } = await import(
-      './v17+/ng-package/entry-point/write-package.di'
+      './v17+/ng-package/entry-point/write-package.di.js'
     );
     const { STYLESHEET_PROCESSOR } = await import(
-      '../../utilities/ng-packagr/stylesheet-processor.di'
+      '../../utilities/ng-packagr/stylesheet-processor.di.js'
     );
 
     const packagr = ngPackagr();
@@ -28,11 +28,13 @@ export async function getNgPackagrInstance(
   }
 
   const { NX_ENTRY_POINT_PROVIDERS } = await import(
-    './pre-v17/ng-package/entry-point/entry-point.di'
+    './pre-v17/ng-package/entry-point/entry-point.di.js'
+  );
+  const { nxProvideOptions } = await import(
+    './pre-v17/ng-package/options.di.js'
   );
-  const { nxProvideOptions } = await import('./pre-v17/ng-package/options.di');
   const { NX_PACKAGE_PROVIDERS, NX_PACKAGE_TRANSFORM } = await import(
-    './pre-v17/ng-package/package.di'
+    './pre-v17/ng-package/package.di.js'
   );
 
   const packagr = new NgPackagr([

packages/angular/src/executors/ng-packagr-lite/ng-packagr-adjustments/pre-v17/ngc/compile-source-files.ts

@@ -6,10 +6,6 @@
  * - Support Angular Compiler `incrementalDriver` for Angular < 16.
  */
 
-import type {
-  CompilerOptions,
-  ParsedConfiguration,
-} from '@angular/compiler-cli';
 import { BuildGraph } from 'ng-packagr/lib/graph/build-graph';
 import {
   EntryPointNode,
@@ -25,21 +21,23 @@ import * as log from 'ng-packagr/lib/utils/log';
 import { join } from 'node:path';
 import * as ts from 'typescript';
 import { getInstalledAngularVersionInfo } from '../../../../utilities/angular-version-utils';
-import { ngCompilerCli } from '../../../../utilities/ng-compiler-cli';
+import { loadEsmModule } from '../../../../utilities/module-loader';
 import { NgPackagrOptions } from '../ng-package/options.di';
 import { StylesheetProcessor } from '../styles/stylesheet-processor';
 
 export async function compileSourceFiles(
   graph: BuildGraph,
-  tsConfig: ParsedConfiguration,
+  tsConfig: any,
   moduleResolutionCache: ts.ModuleResolutionCache,
   options: NgPackagrOptions,
-  extraOptions?: Partial<CompilerOptions>,
+  extraOptions?: Partial<ts.CompilerOptions>,
   stylesheetProcessor?: StylesheetProcessor
 ) {
-  const { NgtscProgram, formatDiagnostics } = await ngCompilerCli();
+  const { NgtscProgram, formatDiagnostics } = await loadEsmModule<any>(
+    '@angular/compiler-cli'
+  );
   const { cacheDirectory, watch, cacheEnabled } = options;
-  const tsConfigOptions: CompilerOptions = {
+  const tsConfigOptions: ts.CompilerOptions = {
     ...tsConfig.options,
     ...extraOptions,
   };

packages/angular/src/executors/ng-packagr-lite/ng-packagr-adjustments/pre-v17/styles/stylesheet-processor.ts

@@ -6,7 +6,7 @@
  * - Added PostCSS plugin needed to support TailwindCSS.
  */
 
-import * as browserslist from 'browserslist';
+import browserslist from 'browserslist';
 import { existsSync } from 'fs';
 import { EsbuildExecutor } from 'ng-packagr/lib/esbuild/esbuild-executor';
 import {
@@ -16,7 +16,7 @@ import {
 } from 'ng-packagr/lib/utils/cache';
 import * as log from 'ng-packagr/lib/utils/log';
 import { dirname, extname, join } from 'path';
-import * as autoprefixer from 'autoprefixer';
+import autoprefixer from 'autoprefixer';
 import * as postcssUrl from 'postcss-url';
 import { pathToFileURL } from 'node:url';
 import {

packages/angular/src/executors/package/ng-packagr-adjustments/ng-package/entry-point/compile-ngc.transform.ts

@@ -19,7 +19,7 @@ import {
   PackageNode,
 } from 'ng-packagr/lib/ng-package/nodes';
 import { setDependenciesTsConfigPaths } from 'ng-packagr/lib/ts/tsconfig';
-import * as ora from 'ora';
+import ora from 'ora';
 import * as path from 'path';
 import * as ts from 'typescript';
 import { getInstalledAngularVersionInfo } from '../../../../utilities/angular-version-utils';

packages/angular/src/executors/package/ng-packagr-adjustments/ng-packagr.ts

@@ -8,7 +8,7 @@ export async function getNgPackagrInstance(
   const { major: angularMajorVersion } = getInstalledAngularVersionInfo();
   if (angularMajorVersion >= 17) {
     const { STYLESHEET_PROCESSOR } = await import(
-      '../../utilities/ng-packagr/stylesheet-processor.di'
+      '../../utilities/ng-packagr/stylesheet-processor.di.js'
     );
 
     const packagr = ngPackagr();
@@ -17,11 +17,11 @@ export async function getNgPackagrInstance(
   }
 
   const { NX_ENTRY_POINT_PROVIDERS } = await import(
-    './ng-package/entry-point/entry-point.di'
+    './ng-package/entry-point/entry-point.di.js'
   );
-  const { nxProvideOptions } = await import('./ng-package/options.di');
+  const { nxProvideOptions } = await import('./ng-package/options.di.js');
   const { NX_PACKAGE_PROVIDERS, NX_PACKAGE_TRANSFORM } = await import(
-    './ng-package/package.di'
+    './ng-package/package.di.js'
   );
 
   const packagr = new NgPackagr([

packages/angular/src/executors/package/ng-packagr-adjustments/ngc/compile-source-files.ts

@@ -7,10 +7,6 @@
  * - Support Angular Compiler `incrementalDriver` for Angular < 16.
  */
 
-import type {
-  CompilerOptions,
-  ParsedConfiguration,
-} from '@angular/compiler-cli';
 import { BuildGraph } from 'ng-packagr/lib/graph/build-graph';
 import {
   EntryPointNode,
@@ -26,22 +22,24 @@ import {
 import { join } from 'node:path';
 import * as ts from 'typescript';
 import { getInstalledAngularVersionInfo } from '../../../utilities/angular-version-utils';
-import { ngCompilerCli } from '../../../utilities/ng-compiler-cli';
+import { loadEsmModule } from '../../../utilities/module-loader';
 import { NgPackagrOptions } from '../ng-package/options.di';
 import { StylesheetProcessor } from '../styles/stylesheet-processor';
 
 export async function compileSourceFiles(
   graph: BuildGraph,
-  tsConfig: ParsedConfiguration,
+  tsConfig: any,
   moduleResolutionCache: ts.ModuleResolutionCache,
   options: NgPackagrOptions,
-  extraOptions?: Partial<CompilerOptions>,
+  extraOptions?: ts.CompilerOptions,
   stylesheetProcessor?: StylesheetProcessor,
   ngccProcessor?: any
 ) {
-  const { NgtscProgram, formatDiagnostics } = await ngCompilerCli();
+  const { NgtscProgram, formatDiagnostics } = await loadEsmModule<any>(
+    '@angular/compiler-cli'
+  );
   const { cacheDirectory, watch, cacheEnabled } = options;
-  const tsConfigOptions: CompilerOptions = {
+  const tsConfigOptions = {
     ...tsConfig.options,
     ...extraOptions,
   };

packages/angular/src/executors/package/ng-packagr-adjustments/styles/stylesheet-processor.ts

@@ -6,7 +6,7 @@
  * - Added PostCSS plugin needed to support TailwindCSS.
  */
 
-import * as browserslist from 'browserslist';
+import browserslist from 'browserslist';
 import { existsSync } from 'fs';
 import { EsbuildExecutor } from 'ng-packagr/lib/esbuild/esbuild-executor';
 import {
@@ -16,7 +16,7 @@ import {
 } from 'ng-packagr/lib/utils/cache';
 import * as log from 'ng-packagr/lib/utils/log';
 import { dirname, extname, join } from 'path';
-import * as autoprefixer from 'autoprefixer';
+import autoprefixer from 'autoprefixer';
 import * as postcssUrl from 'postcss-url';
 import { pathToFileURL } from 'node:url';
 import {

packages/angular/src/executors/utilities/esbuild-extensions.ts

@@ -1,7 +1,6 @@
 import type { IndexHtmlTransform } from '@angular-devkit/build-angular/src/utils/index-file/index-html-generator';
 import { registerTsProject } from '@nx/js/src/internal';
 import type { Plugin } from 'esbuild';
-import type { Connect } from 'vite';
 import { loadModule } from './module-loader';
 
 export type PluginSpec = {
@@ -45,7 +44,7 @@ async function loadPlugin(pluginSpec: string | PluginSpec): Promise<Plugin> {
 export async function loadMiddleware(
   middlewareFns: string[] | undefined,
   tsConfig: string
-): Promise<Connect.NextHandleFunction[]> {
+): Promise<any[]> {
   if (!middlewareFns?.length) {
     return [];
   }

packages/angular/src/executors/utilities/ng-packagr/stylesheet-processor.ts

@@ -6,7 +6,7 @@
  * config at the root of the workspace.
  */
 
-import * as browserslist from 'browserslist';
+import browserslist from 'browserslist';
 import { existsSync } from 'fs';
 import { dirname, join } from 'path';
 const Piscina = require('piscina');
@@ -200,9 +200,9 @@ export class AsyncStylesheetProcessor {
       getInstalledPackageVersionInfo('ng-packagr');
     let postcssConfiguration: PostcssConfiguration | undefined;
     if (ngPackagrVersion === '17.2.0') {
-      const { loadPostcssConfiguration } = await import(
-        'ng-packagr/lib/styles/postcss-configuration'
-      );
+      const {
+        loadPostcssConfiguration,
+      } = require('ng-packagr/lib/styles/postcss-configuration');
       postcssConfiguration = await loadPostcssConfiguration(
         this.projectBasePath
       );

packages/angular/src/executors/utilities/typescript.ts

@@ -7,19 +7,13 @@
  * to be the original tsconfig file.
  */
 
-import type {
-  CompilerOptions,
-  ParsedConfiguration,
-} from '@angular/compiler-cli';
 import { resolve } from 'path';
 import * as ts from 'typescript';
-import { ngCompilerCli } from './ng-compiler-cli';
+import { loadEsmModule } from './module-loader';
 
-async function readDefaultTsConfig(
-  fileName: string
-): Promise<ParsedConfiguration> {
+async function readDefaultTsConfig(fileName: string) {
   // these options are mandatory
-  const extraOptions: CompilerOptions = {
+  const extraOptions: ts.CompilerOptions = {
     target: ts.ScriptTarget.ES2020,
     experimentalDecorators: true,
 
@@ -39,7 +33,9 @@ async function readDefaultTsConfig(
     flatModuleOutFile: 'AUTOGENERATED',
   };
 
-  const { readConfiguration } = await ngCompilerCli();
+  const { readConfiguration } = await loadEsmModule<any>(
+    '@angular/compiler-cli'
+  );
 
   return readConfiguration(fileName, extraOptions);
 }
@@ -51,7 +47,7 @@ export async function parseRemappedTsConfigAndMergeDefaults(
   workspaceRoot: string,
   originalFilePath: string,
   remappedFilePath: string
-): Promise<ParsedConfiguration> {
+) {
   const parsedConfiguration = await readDefaultTsConfig(remappedFilePath);
   parsedConfiguration.options.configFilePath = resolve(
     workspaceRoot,

packages/angular/src/generators/component-test/component-test.ts

@@ -18,9 +18,9 @@ export async function componentTestGenerator(
   options: ComponentTestSchema
 ) {
   ensurePackage('@nx/cypress', nxVersion);
-  const { assertMinimumCypressVersion } = await import(
-    '@nx/cypress/src/utils/cypress-version'
-  );
+  const { assertMinimumCypressVersion } = <
+    typeof import('@nx/cypress/src/utils/cypress-version')
+  >require('@nx/cypress/src/utils/cypress-version');
   assertMinimumCypressVersion(10);
   const { root } = readProjectConfiguration(tree, options.project);
   const componentDirPath = joinPathFragments(root, options.componentDir);

packages/angular/src/generators/cypress-component-configuration/cypress-component-configuration.ts

@@ -74,7 +74,9 @@ async function addFiles(
     'support',
     'component.ts'
   );
-  const { addMountDefinition } = await import('@nx/cypress/src/utils/config');
+  const { addMountDefinition } = <
+    typeof import('@nx/cypress/src/utils/config')
+  >require('@nx/cypress/src/utils/config');
   const updatedCmpContents = await addMountDefinition(
     tree.read(componentFile, 'utf-8')
   );
@@ -126,9 +128,9 @@ async function configureCypressCT(
   let found: FoundTarget = { target: options.buildTarget, config: undefined };
 
   if (!options.buildTarget) {
-    const { findBuildConfig } = await import(
-      '@nx/cypress/src/utils/find-target-options'
-    );
+    const { findBuildConfig } = <
+      typeof import('@nx/cypress/src/utils/find-target-options')
+    >require('@nx/cypress/src/utils/find-target-options');
     found = await findBuildConfig(tree, {
       project: options.project,
       buildTarget: options.buildTarget,
@@ -158,9 +160,9 @@ async function configureCypressCT(
     ctConfigOptions.buildTarget = found.target;
   }
 
-  const { addDefaultCTConfig, getProjectCypressConfigPath } = await import(
-    '@nx/cypress/src/utils/config'
-  );
+  const { addDefaultCTConfig, getProjectCypressConfigPath } = <
+    typeof import('@nx/cypress/src/utils/config')
+  >require('@nx/cypress/src/utils/config');
   const cypressConfigPath = getProjectCypressConfigPath(
     tree,
     projectConfig.root

packages/angular/src/generators/ng-add/migrators/projects/e2e.migrator.ts

@@ -343,7 +343,9 @@ export class E2eMigrator extends ProjectMigrator<SupportedTargets> {
     const addPlugin =
       process.env.NX_ADD_PLUGINS !== 'false' &&
       nxJson.useInferencePlugins !== false;
-    const { configurationGenerator } = await import('@nx/cypress');
+    const { configurationGenerator } = <typeof import('@nx/cypress')>(
+      require('@nx/cypress')
+    );
     await configurationGenerator(this.tree, {
       project: this.project.name,
       linter: this.isProjectUsingEsLint ? Linter.EsLint : Linter.None,

packages/angular/src/generators/storybook-configuration/lib/generate-stories.ts

@@ -10,9 +10,9 @@ export async function generateStories(
 ) {
   const project = readProjectConfiguration(tree, options.project);
   ensurePackage('@nx/cypress', nxVersion);
-  const { getE2eProjectName } = await import(
-    '@nx/cypress/src/utils/project-name'
-  );
+  const { getE2eProjectName } = <
+    typeof import('@nx/cypress/src/utils/project-name')
+  >require('@nx/cypress/src/utils/project-name');
   const e2eProjectName = getE2eProjectName(
     options.project,
     project.root,