@nx/angular 16.10.0-beta.2 → 17.0.0-beta.1

package/generators.d.ts

@@ -3,7 +3,6 @@ export * from './src/generators/application/application';
 export * from './src/generators/component-cypress-spec/component-cypress-spec';
 export * from './src/generators/component-story/component-story';
 export * from './src/generators/component/component';
-export * from './src/generators/convert-tslint-to-eslint/convert-tslint-to-eslint';
 export * from './src/generators/directive/directive';
 export * from './src/generators/host/host';
 export * from './src/generators/init/init';

package/generators.js

@@ -6,7 +6,6 @@ tslib_1.__exportStar(require("./src/generators/application/application"), export
 tslib_1.__exportStar(require("./src/generators/component-cypress-spec/component-cypress-spec"), exports);
 tslib_1.__exportStar(require("./src/generators/component-story/component-story"), exports);
 tslib_1.__exportStar(require("./src/generators/component/component"), exports);
-tslib_1.__exportStar(require("./src/generators/convert-tslint-to-eslint/convert-tslint-to-eslint"), exports);
 tslib_1.__exportStar(require("./src/generators/directive/directive"), exports);
 tslib_1.__exportStar(require("./src/generators/host/host"), exports);
 tslib_1.__exportStar(require("./src/generators/init/init"), exports);

package/generators.json

@@ -39,12 +39,6 @@
       "schema": "./src/generators/component-test/schema.json",
       "description": "Creates a cypress component test file for a component."
     },
-    "convert-tslint-to-eslint": {
-      "factory": "./src/generators/convert-tslint-to-eslint/compat",
-      "schema": "./src/generators/convert-tslint-to-eslint/schema.json",
-      "description": "Converts a project from TSLint to ESLint.",
-      "x-deprecated": "This generator is deprecated and will be removed in a future version of Nx. Migrate to ESLint."
-    },
     "init": {
       "factory": "./src/generators/init/init.compat#initSchematic",
       "schema": "./src/generators/init/schema.json",
@@ -193,12 +187,6 @@
       "schema": "./src/generators/component-test/schema.json",
       "description": "Creates a cypress component test file for a component."
     },
-    "convert-tslint-to-eslint": {
-      "factory": "./src/generators/convert-tslint-to-eslint/convert-tslint-to-eslint#conversionGenerator",
-      "schema": "./src/generators/convert-tslint-to-eslint/schema.json",
-      "description": "Converts a project from TSLint to ESLint.",
-      "x-deprecated": "This generator is deprecated and will be removed in a future version of Nx. Migrate to ESLint."
-    },
     "directive": {
       "factory": "./src/generators/directive/directive",
       "schema": "./src/generators/directive/schema.json",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nx/angular",
-  "version": "16.10.0-beta.2",
+  "version": "17.0.0-beta.1",
   "private": false,
   "description": "The Nx Plugin for Angular contains executors, generators, and utilities for managing Angular applications and libraries within an Nx workspace. It provides: \n\n- Integration with libraries such as Storybook, Jest, ESLint, Tailwind CSS, and Cypress. \n\n- Generators to help scaffold code quickly (like: Micro Frontends, Libraries, both internal to your codebase and publishable to npm) \n\n- Upgrading AngularJS applications \n\n- Single Component Application Modules (SCAMs) \n\n- NgRx helpers. \n\n- Utilities for automatic workspace refactoring.",
   "repository": {
@@ -79,14 +79,14 @@
     "webpack": "^5.80.0",
     "webpack-merge": "^5.8.0",
     "enquirer": "^2.3.6",
-    "@nx/devkit": "16.10.0-beta.2",
-    "@nx/cypress": "16.10.0-beta.2",
-    "@nx/jest": "16.10.0-beta.2",
-    "@nx/js": "16.10.0-beta.2",
-    "@nx/linter": "16.10.0-beta.2",
-    "@nx/webpack": "16.10.0-beta.2",
-    "@nx/workspace": "16.10.0-beta.2",
-    "@nrwl/angular": "16.10.0-beta.2"
+    "@nx/devkit": "17.0.0-beta.1",
+    "@nx/cypress": "17.0.0-beta.1",
+    "@nx/jest": "17.0.0-beta.1",
+    "@nx/js": "17.0.0-beta.1",
+    "@nx/linter": "17.0.0-beta.1",
+    "@nx/webpack": "17.0.0-beta.1",
+    "@nx/workspace": "17.0.0-beta.1",
+    "@nrwl/angular": "17.0.0-beta.1"
   },
   "peerDependencies": {
     "@angular-devkit/build-angular": ">= 14.0.0 < 17.0.0",

package/src/builders/utilities/module-federation.js

@@ -47,7 +47,7 @@ function getModuleFederationConfig(tsconfigPath, workspaceRoot, projectRoot) {
     let moduleFederationConfigPath = moduleFederationConfigPathJS;
     let cleanupTranspiler = () => { };
     if ((0, fs_1.existsSync)(moduleFederationConfigPathTS)) {
-        cleanupTranspiler = (0, internal_1.registerTsProject)(moduleFederationConfigPathTS, tsconfigPath);
+        cleanupTranspiler = (0, internal_1.registerTsProject)((0, path_1.join)(workspaceRoot, tsconfigPath));
         moduleFederationConfigPath = moduleFederationConfigPathTS;
     }
     try {

package/src/builders/utilities/webpack.js

@@ -3,8 +3,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.resolveIndexHtmlTransformer = exports.resolveCustomWebpackConfig = exports.mergeCustomWebpackConfig = void 0;
 const webpack_merge_1 = require("webpack-merge");
 const internal_1 = require("@nx/js/src/internal");
+const devkit_1 = require("@nx/devkit");
+const path_1 = require("path");
 async function mergeCustomWebpackConfig(baseWebpackConfig, pathToWebpackConfig, options, target) {
-    const customWebpackConfiguration = resolveCustomWebpackConfig(pathToWebpackConfig, options.tsConfig);
+    const customWebpackConfiguration = resolveCustomWebpackConfig(pathToWebpackConfig, (0, path_1.join)(devkit_1.workspaceRoot, options.tsConfig));
     // The extra Webpack configuration file can also export a Promise, for instance:
     // `module.exports = new Promise(...)`. If it exports a single object, but not a Promise,
     // then await will just resolve that object.
@@ -20,7 +22,7 @@ async function mergeCustomWebpackConfig(baseWebpackConfig, pathToWebpackConfig,
 }
 exports.mergeCustomWebpackConfig = mergeCustomWebpackConfig;
 function resolveCustomWebpackConfig(path, tsConfig) {
-    const cleanupTranspiler = (0, internal_1.registerTsProject)(path, tsConfig);
+    const cleanupTranspiler = (0, internal_1.registerTsProject)(tsConfig);
     const customWebpackConfig = require(path);
     cleanupTranspiler();
     // If the user provides a configuration in TS file
@@ -32,7 +34,7 @@ function resolveCustomWebpackConfig(path, tsConfig) {
 }
 exports.resolveCustomWebpackConfig = resolveCustomWebpackConfig;
 function resolveIndexHtmlTransformer(path, tsConfig, target) {
-    const cleanupTranspiler = (0, internal_1.registerTsProject)(path, tsConfig);
+    const cleanupTranspiler = (0, internal_1.registerTsProject)(tsConfig);
     const indexTransformer = require(path);
     cleanupTranspiler();
     const transform = indexTransformer.default ?? indexTransformer;

package/src/generators/host/files/ts/webpack.server.config.ts__tmpl__

@@ -0,0 +1,4 @@
+import {withModuleFederationForSSR} from '@nx/angular/module-federation';
+import config from './module-federation.config';
+
+export default withModuleFederationForSSR(config)

package/src/generators/host/host.d.ts

@@ -1,5 +1,5 @@
 import { Tree } from '@nx/devkit';
 import type { Schema } from './schema';
 export declare function host(tree: Tree, options: Schema): Promise<import("@nx/devkit").GeneratorCallback>;
-export declare function hostInternal(tree: Tree, options: Schema): Promise<import("@nx/devkit").GeneratorCallback>;
+export declare function hostInternal(tree: Tree, schema: Schema): Promise<import("@nx/devkit").GeneratorCallback>;
 export default host;

package/src/generators/host/host.js

@@ -17,12 +17,13 @@ async function host(tree, options) {
     });
 }
 exports.host = host;
-async function hostInternal(tree, options) {
+async function hostInternal(tree, schema) {
     const installedAngularVersionInfo = (0, version_utils_1.getInstalledAngularVersionInfo)(tree);
-    if ((0, semver_1.lt)(installedAngularVersionInfo.version, '14.1.0') && options.standalone) {
+    if ((0, semver_1.lt)(installedAngularVersionInfo.version, '14.1.0') && schema.standalone) {
         throw new Error((0, devkit_1.stripIndents) `The "standalone" option is only supported in Angular >= 14.1.0. You are currently using ${installedAngularVersionInfo.version}.
     You can resolve this error by removing the "standalone" option or by migrating to Angular 14.1.0.`);
     }
+    const { typescriptConfiguration = true, ...options } = schema;
     const projects = (0, devkit_1.getProjects)(tree);
     const remotesToGenerate = [];
     const remotesToIntegrate = [];
@@ -64,10 +65,11 @@ async function hostInternal(tree, options) {
         skipE2E,
         e2eProjectName: skipE2E ? undefined : `${hostProjectName}-e2e`,
         prefix: options.prefix,
+        typescriptConfiguration,
     });
     let installTasks = [appInstallTask];
     if (options.ssr) {
-        let ssrInstallTask = await (0, lib_1.addSsr)(tree, options, hostProjectName);
+        let ssrInstallTask = await (0, lib_1.addSsr)(tree, options, hostProjectName, typescriptConfiguration);
         installTasks.push(ssrInstallTask);
     }
     for (const remote of remotesToGenerate) {
@@ -88,6 +90,7 @@ async function hostInternal(tree, options) {
             host: hostProjectName,
             skipFormat: true,
             standalone: options.standalone,
+            typescriptConfiguration,
         });
     }
     if (!options.skipFormat) {

package/src/generators/host/lib/add-ssr.d.ts

@@ -1,3 +1,3 @@
 import type { Tree } from '@nx/devkit';
 import type { Schema } from '../schema';
-export declare function addSsr(tree: Tree, options: Schema, appName: string): Promise<import("@nx/devkit").GeneratorCallback>;
+export declare function addSsr(tree: Tree, options: Schema, appName: string, typescriptConfiguration: boolean): Promise<import("@nx/devkit").GeneratorCallback>;

package/src/generators/host/lib/add-ssr.js

@@ -5,7 +5,7 @@ const devkit_1 = require("@nx/devkit");
 const setup_ssr_1 = require("../../setup-ssr/setup-ssr");
 const versions_1 = require("../../../utils/versions");
 const path_1 = require("path");
-async function addSsr(tree, options, appName) {
+async function addSsr(tree, options, appName, typescriptConfiguration) {
     let project = (0, devkit_1.readProjectConfiguration)(tree, appName);
     await (0, setup_ssr_1.default)(tree, {
         project: appName,
@@ -14,17 +14,21 @@ async function addSsr(tree, options, appName) {
     tree.rename((0, devkit_1.joinPathFragments)(project.sourceRoot, 'main.server.ts'), (0, devkit_1.joinPathFragments)(project.sourceRoot, 'bootstrap.server.ts'));
     tree.write((0, devkit_1.joinPathFragments)(project.root, 'server.ts'), "import('./src/main.server');");
     const browserBundleOutput = (0, devkit_1.joinPathFragments)(project.targets.build.options.outputPath, 'browser');
-    (0, devkit_1.generateFiles)(tree, (0, path_1.join)(__dirname, '../files'), project.root, {
+    (0, devkit_1.generateFiles)(tree, (0, path_1.join)(__dirname, '../files/common'), project.root, {
         appName,
         browserBundleOutput,
         standalone: options.standalone,
         tmpl: '',
     });
+    const pathToTemplateFiles = typescriptConfiguration ? 'ts' : 'js';
+    (0, devkit_1.generateFiles)(tree, (0, path_1.join)(__dirname, '../files', pathToTemplateFiles), project.root, {
+        tmpl: '',
+    });
     // update project.json
     project = (0, devkit_1.readProjectConfiguration)(tree, appName);
     project.targets.server.executor = '@nx/angular:webpack-server';
     project.targets.server.options.customWebpackConfig = {
-        path: (0, devkit_1.joinPathFragments)(project.root, 'webpack.server.config.js'),
+        path: (0, devkit_1.joinPathFragments)(project.root, `webpack.server.config.${pathToTemplateFiles}`),
     };
     project.targets['serve-ssr'].executor =
         '@nx/angular:module-federation-dev-ssr';

package/src/generators/host/schema.d.ts

@@ -29,4 +29,5 @@ export interface Schema {
   skipFormat?: boolean;
   standalone?: boolean;
   ssr?: boolean;
+  typescriptConfiguration?: boolean;
 }

package/src/generators/host/schema.json

@@ -173,6 +173,11 @@
       "type": "boolean",
       "default": false,
       "x-priority": "important"
+    },
+    "typescriptConfiguration": {
+      "type": "boolean",
+      "description": "Whether the module federation configuration and webpack configuration files should use TS.",
+      "default": true
     }
   },
   "additionalProperties": false,

package/src/generators/ng-add/migrators/migrator.js

@@ -62,13 +62,11 @@ class Migrator {
             return;
         }
         const nxJson = (0, devkit_1.readNxJson)(this.tree);
-        Object.keys(nxJson.tasksRunnerOptions ?? {}).forEach((taskRunnerName) => {
-            const taskRunner = nxJson.tasksRunnerOptions[taskRunnerName];
-            taskRunner.options.cacheableOperations = Array.from(new Set([
-                ...(taskRunner.options.cacheableOperations ?? []),
-                ...targetNames,
-            ]));
-        });
+        nxJson.targetDefaults ??= {};
+        for (const target of targetNames) {
+            nxJson.targetDefaults[target] ??= {};
+            nxJson.targetDefaults[target].cache ??= true;
+        }
         (0, devkit_1.updateNxJson)(this.tree, nxJson);
     }
     // TODO(leo): This should be moved to BuilderMigrator once everything is split into builder migrators.

package/src/generators/ng-add/utilities/workspace.js

@@ -31,19 +31,6 @@ function createNxJson(tree, options, defaultProject) {
         affected: {
             defaultBase: options.defaultBase ?? (0, default_base_1.deduceDefaultBase)(),
         },
-        tasksRunnerOptions: {
-            default: {
-                runner: 'nx/tasks-runners/default',
-                options: {
-                    cacheableOperations: [
-                        'build',
-                        targets.test ? 'test' : undefined,
-                        targets.lint ? 'lint' : undefined,
-                        targets.e2e ? 'e2e' : undefined,
-                    ].filter(Boolean),
-                },
-            },
-        },
         namedInputs: {
             sharedGlobals: [],
             default: ['{projectRoot}/**/*', 'sharedGlobals'],
@@ -65,10 +52,12 @@ function createNxJson(tree, options, defaultProject) {
             build: {
                 dependsOn: ['^build'],
                 inputs: ['production', '^production'],
+                cache: true,
             },
             test: targets.test
                 ? {
                     inputs: ['default', '^production', '{workspaceRoot}/karma.conf.js'],
+                    cache: true,
                 }
                 : undefined,
             lint: targets.lint
@@ -78,11 +67,13 @@ function createNxJson(tree, options, defaultProject) {
                         '{workspaceRoot}/.eslintrc.json',
                         '{workspaceRoot}/eslint.config.js',
                     ],
+                    cache: true,
                 }
                 : undefined,
             e2e: targets.e2e
                 ? {
                     inputs: ['default', '^production'],
+                    cache: true,
                 }
                 : undefined,
         },

package/src/generators/remote/files/base-ts/webpack.server.config.ts__tmpl__

@@ -0,0 +1,4 @@
+import {withModuleFederationForSSR} from '@nx/angular/module-federation';
+import config from './module-federation.config';
+
+export default withModuleFederationForSSR(config)

package/src/generators/remote/lib/add-ssr.d.ts

@@ -1,6 +1,7 @@
 import type { Tree } from '@nx/devkit';
-export declare function addSsr(tree: Tree, { appName, port, standalone, }: {
+export declare function addSsr(tree: Tree, { appName, port, standalone, typescriptConfiguration, }: {
     appName: string;
     port: number;
     standalone: boolean;
+    typescriptConfiguration: boolean;
 }): Promise<import("@nx/devkit").GeneratorCallback>;

package/src/generators/remote/lib/add-ssr.js

@@ -4,7 +4,7 @@ exports.addSsr = void 0;
 const devkit_1 = require("@nx/devkit");
 const setup_ssr_1 = require("../../setup-ssr/setup-ssr");
 const versions_1 = require("../../../utils/versions");
-async function addSsr(tree, { appName, port, standalone, }) {
+async function addSsr(tree, { appName, port, standalone, typescriptConfiguration, }) {
     let project = (0, devkit_1.readProjectConfiguration)(tree, appName);
     await (0, setup_ssr_1.default)(tree, {
         project: appName,
@@ -14,13 +14,17 @@ async function addSsr(tree, { appName, port, standalone, }) {
     tree.write((0, devkit_1.joinPathFragments)(project.root, 'server.ts'), "import('./src/main.server');");
     const browserBundleOutput = (0, devkit_1.joinPathFragments)(project.targets.build.options.outputPath, 'browser');
     const serverBundleOutput = (0, devkit_1.joinPathFragments)(project.targets.build.options.outputPath, 'server');
-    (0, devkit_1.generateFiles)(tree, (0, devkit_1.joinPathFragments)(__dirname, '../files/base'), project.root, {
+    (0, devkit_1.generateFiles)(tree, (0, devkit_1.joinPathFragments)(__dirname, `../files/common`), project.root, {
         appName,
         browserBundleOutput,
         serverBundleOutput,
         standalone,
         tmpl: '',
     });
+    const pathToTemplateFiles = typescriptConfiguration ? 'base-ts' : 'base';
+    (0, devkit_1.generateFiles)(tree, (0, devkit_1.joinPathFragments)(__dirname, `../files/${pathToTemplateFiles}`), project.root, {
+        tmpl: '',
+    });
     if (standalone) {
         (0, devkit_1.generateFiles)(tree, (0, devkit_1.joinPathFragments)(__dirname, '../files/standalone'), project.root, {
             appName,
@@ -32,7 +36,7 @@ async function addSsr(tree, { appName, port, standalone, }) {
     project = (0, devkit_1.readProjectConfiguration)(tree, appName);
     project.targets.server.executor = '@nx/angular:webpack-server';
     project.targets.server.options.customWebpackConfig = {
-        path: (0, devkit_1.joinPathFragments)(project.root, 'webpack.server.config.js'),
+        path: (0, devkit_1.joinPathFragments)(project.root, `webpack.server.config.${typescriptConfiguration ? 'ts' : 'js'}`),
     };
     project.targets['serve-ssr'].options = {
         ...(project.targets['serve-ssr'].options ?? {}),

package/src/generators/remote/remote.d.ts

@@ -1,5 +1,5 @@
 import { Tree } from '@nx/devkit';
 import type { Schema } from './schema';
 export declare function remote(tree: Tree, options: Schema): Promise<import("@nx/devkit").GeneratorCallback>;
-export declare function remoteInternal(tree: Tree, options: Schema): Promise<import("@nx/devkit").GeneratorCallback>;
+export declare function remoteInternal(tree: Tree, schema: Schema): Promise<import("@nx/devkit").GeneratorCallback>;
 export default remote;

package/src/generators/remote/remote.js

@@ -16,12 +16,13 @@ async function remote(tree, options) {
     });
 }
 exports.remote = remote;
-async function remoteInternal(tree, options) {
+async function remoteInternal(tree, schema) {
     const installedAngularVersionInfo = (0, version_utils_1.getInstalledAngularVersionInfo)(tree);
-    if ((0, semver_1.lt)(installedAngularVersionInfo.version, '14.1.0') && options.standalone) {
+    if ((0, semver_1.lt)(installedAngularVersionInfo.version, '14.1.0') && schema.standalone) {
         throw new Error((0, devkit_1.stripIndents) `The "standalone" option is only supported in Angular >= 14.1.0. You are currently using ${installedAngularVersionInfo.version}.
     You can resolve this error by removing the "standalone" option or by migrating to Angular 14.1.0.`);
     }
+    const { typescriptConfiguration = true, ...options } = schema;
     const projects = (0, devkit_1.getProjects)(tree);
     if (options.host && !projects.has(options.host)) {
         throw new Error(`The name of the application to be used as the host app does not exist. (${options.host})`);
@@ -55,12 +56,14 @@ async function remoteInternal(tree, options) {
         e2eProjectName: skipE2E ? undefined : `${remoteProjectName}-e2e`,
         standalone: options.standalone,
         prefix: options.prefix,
+        typescriptConfiguration,
     });
     let installTasks = [appInstallTask];
     if (options.ssr) {
         let ssrInstallTask = await (0, lib_1.addSsr)(tree, {
             appName: remoteProjectName,
             port,
+            typescriptConfiguration,
             standalone: options.standalone,
         });
         installTasks.push(ssrInstallTask);

package/src/generators/remote/schema.d.ts

@@ -28,4 +28,5 @@ export interface Schema {
   skipFormat?: boolean;
   standalone?: boolean;
   ssr?: boolean;
+  typescriptConfiguration?: boolean;
 }

package/src/generators/remote/schema.json

@@ -166,6 +166,11 @@
       "description": "Whether to configure SSR for the remote application to be consumed by a host application using SSR.",
       "type": "boolean",
       "default": false
+    },
+    "typescriptConfiguration": {
+      "type": "boolean",
+      "description": "Whether the module federation configuration and webpack configuration files should use TS.",
+      "default": true
     }
   },
   "additionalProperties": false,

package/src/generators/setup-mf/files/ts-webpack/module-federation.config.ts__tmpl__

@@ -0,0 +1,12 @@
+import { ModuleFederationConfig } from '@nx/webpack';
+
+const config: ModuleFederationConfig = {
+  name: '<%= name %>',<% if(type === 'host') { %>
+  remotes: [<% remotes.forEach(function(remote) { %>'<%= remote.remoteName %>',<% }); %>]<% } %><% if(type === 'remote') { %>
+  exposes: {<% if(standalone) { %>
+    './Routes': '<%= projectRoot %>/src/app/remote-entry/entry.routes.ts',<% } else { %>
+    './Module': '<%= projectRoot %>/src/app/remote-entry/entry.module.ts',<% } %>
+  },<% } %>
+};
+
+export default config;

package/src/generators/setup-mf/files/ts-webpack/webpack.config.ts__tmpl__

@@ -0,0 +1,4 @@
+import {withModuleFederation} from '@nx/angular/module-federation';
+import config from './module-federation.config';
+
+export default withModuleFederation(config);

package/src/generators/setup-mf/files/ts-webpack/webpack.prod.config.ts__tmpl__

@@ -0,0 +1,16 @@
+import {withModuleFederation} from '@nx/angular/module-federation';
+import config from './module-federation.config';
+
+export default withModuleFederation({
+    ...config,
+    /*
+     * Remote overrides for production.
+     * Each entry is a pair of a unique name and the URL where it is deployed.
+     *
+     * e.g.
+     * remotes: [
+     *   ['app1', 'https://app1.example.com'],
+     *   ['app2', 'https://app2.example.com'],
+     * ]
+     */
+});

package/src/generators/setup-mf/lib/add-remote-to-host.js

@@ -20,8 +20,9 @@ function addRemoteToHost(tree, options) {
         const hostProject = (0, devkit_1.readProjectConfiguration)(tree, options.host);
         const pathToMFManifest = (0, devkit_1.joinPathFragments)(hostProject.sourceRoot, 'assets/module-federation.manifest.json');
         const hostFederationType = determineHostFederationType(tree, pathToMFManifest);
+        const isHostUsingTypescriptConfig = tree.exists((0, devkit_1.joinPathFragments)(hostProject.root, 'module-federation.config.ts'));
         if (hostFederationType === 'static') {
-            addRemoteToStaticHost(tree, options, hostProject);
+            addRemoteToStaticHost(tree, options, hostProject, isHostUsingTypescriptConfig);
         }
         else if (hostFederationType === 'dynamic') {
             addRemoteToDynamicHost(tree, options, pathToMFManifest);
@@ -46,10 +47,12 @@ exports.addRemoteToHost = addRemoteToHost;
 function determineHostFederationType(tree, pathToMfManifest) {
     return tree.exists(pathToMfManifest) ? 'dynamic' : 'static';
 }
-function addRemoteToStaticHost(tree, options, hostProject) {
-    const hostMFConfigPath = (0, devkit_1.joinPathFragments)(hostProject.root, 'module-federation.config.js');
+function addRemoteToStaticHost(tree, options, hostProject, isHostUsingTypescrpt) {
+    const hostMFConfigPath = (0, devkit_1.joinPathFragments)(hostProject.root, isHostUsingTypescrpt
+        ? 'module-federation.config.ts'
+        : 'module-federation.config.js');
     if (!hostMFConfigPath || !tree.exists(hostMFConfigPath)) {
-        throw new Error(`The selected host application, ${options.host}, does not contain a module-federation.config.js or module-federation.manifest.json file. Are you sure it has been set up as a host application?`);
+        throw new Error(`The selected host application, ${options.host}, does not contain a module-federation.config.{ts,js} or module-federation.manifest.json file. Are you sure it has been set up as a host application?`);
     }
     const hostMFConfig = tree.read(hostMFConfigPath, 'utf-8');
     const { tsquery } = require('@phenomnomnominal/tsquery');

package/src/generators/setup-mf/lib/change-build-target.js

@@ -4,17 +4,18 @@ exports.changeBuildTarget = void 0;
 const devkit_1 = require("@nx/devkit");
 function changeBuildTarget(host, options) {
     const appConfig = (0, devkit_1.readProjectConfiguration)(host, options.appName);
+    const configExtName = options.typescriptConfiguration ? 'ts' : 'js';
     appConfig.targets.build.executor = '@nx/angular:webpack-browser';
     appConfig.targets.build.options = {
         ...appConfig.targets.build.options,
         customWebpackConfig: {
-            path: `${appConfig.root}/webpack.config.js`,
+            path: `${appConfig.root}/webpack.config.${configExtName}`,
         },
     };
     appConfig.targets.build.configurations.production = {
         ...appConfig.targets.build.configurations.production,
         customWebpackConfig: {
-            path: `${appConfig.root}/webpack.prod.config.js`,
+            path: `${appConfig.root}/webpack.prod.config.${configExtName}`,
         },
     };
     (0, devkit_1.updateProjectConfiguration)(host, options.appName, appConfig);

package/src/generators/setup-mf/lib/generate-config.js

@@ -5,11 +5,17 @@ const devkit_1 = require("@nx/devkit");
 function generateWebpackConfig(tree, options, appRoot, remotesWithPorts) {
     if (tree.exists(`${appRoot}/module-federation.config.js`) ||
         tree.exists(`${appRoot}/webpack.config.js`) ||
-        tree.exists(`${appRoot}/webpack.prod.config.js`)) {
+        tree.exists(`${appRoot}/webpack.prod.config.js`) ||
+        tree.exists(`${appRoot}/module-federation.config.ts`) ||
+        tree.exists(`${appRoot}/webpack.config.ts`) ||
+        tree.exists(`${appRoot}/webpack.prod.config.ts`)) {
         devkit_1.logger.warn(`NOTE: We encountered an existing webpack config for the app ${options.appName}. We have overwritten this file with the Module Federation Config.\n
       If this was not the outcome you expected, you can discard the changes we have made, create a backup of your current webpack config, and run the command again.`);
     }
-    (0, devkit_1.generateFiles)(tree, (0, devkit_1.joinPathFragments)(__dirname, '../files/webpack'), appRoot, {
+    const pathToWebpackTemplateFiles = options.typescriptConfiguration
+        ? 'ts-webpack'
+        : 'webpack';
+    (0, devkit_1.generateFiles)(tree, (0, devkit_1.joinPathFragments)(__dirname, `../files/${pathToWebpackTemplateFiles}`), appRoot, {
         tmpl: '',
         type: options.mfType,
         name: options.appName,

package/src/generators/setup-mf/lib/normalize-options.js

@@ -5,6 +5,7 @@ const project_1 = require("../../utils/project");
 function normalizeOptions(tree, options) {
     return {
         ...options,
+        typescriptConfiguration: options.typescriptConfiguration ?? true,
         federationType: options.federationType ?? 'static',
         prefix: options.prefix ?? (0, project_1.getProjectPrefix)(tree, options.appName),
     };

package/src/generators/setup-mf/lib/setup-host-if-dynamic.js

@@ -11,7 +11,7 @@ function setupHostIfDynamic(tree, options) {
     if (!tree.exists(pathToMFManifest)) {
         tree.write(pathToMFManifest, '{}');
     }
-    const pathToProdWebpackConfig = (0, devkit_1.joinPathFragments)(project.root, 'webpack.prod.config.js');
+    const pathToProdWebpackConfig = (0, devkit_1.joinPathFragments)(project.root, `webpack.prod.config.${options.typescriptConfiguration ? 'ts' : 'js'}`);
     if (tree.exists(pathToProdWebpackConfig)) {
         tree.delete(pathToProdWebpackConfig);
     }

package/src/generators/setup-mf/schema.d.ts

@@ -14,6 +14,7 @@ export interface Schema {
   prefix?: string;
   standalone?: boolean;
   skipE2E?: boolean;
+  typescriptConfiguration?: boolean;
 }
 
 export interface NormalizedOptions extends Schema {

package/src/generators/setup-mf/schema.json

@@ -73,6 +73,11 @@
       "type": "boolean",
       "description": "Whether the application is a standalone application. _Note: This is only supported in Angular versions >= 14.1.0_",
       "default": false
+    },
+    "typescriptConfiguration": {
+      "type": "boolean",
+      "description": "Whether the module federation configuration and webpack configuration files should use TS.",
+      "default": true
     }
   },
   "required": ["appName", "mfType"],

package/src/generators/setup-ssr/lib/update-project-config.js

@@ -67,6 +67,10 @@ function updateProjectConfig(tree, schema) {
         ];
         (0, devkit_1.updateNxJson)(tree, nxJson);
     }
+    nxJson.targetDefaults ??= {};
+    nxJson.targetDefaults.server ??= {};
+    nxJson.targetDefaults.server.cache ??= true;
+    (0, devkit_1.updateNxJson)(tree, nxJson);
 }
 exports.updateProjectConfig = updateProjectConfig;
 function getServerOptions(options = {}) {

package/src/generators/storybook-configuration/storybook-configuration.js

@@ -6,7 +6,7 @@ const assert_compatible_storybook_version_1 = require("./lib/assert-compatible-s
 const generate_stories_1 = require("./lib/generate-stories");
 const generate_storybook_configuration_1 = require("./lib/generate-storybook-configuration");
 const validate_options_1 = require("./lib/validate-options");
-// TODO(v18): remove Cypress
+// TODO(katerina): Nx 18 -> remove Cypress
 async function storybookConfigurationGenerator(tree, options) {
     (0, assert_compatible_storybook_version_1.assertCompatibleStorybookVersion)();
     (0, validate_options_1.validateOptions)(options);

package/src/generators/convert-tslint-to-eslint/compat.d.ts

@@ -1,4 +0,0 @@
-/**
- * @deprecated This generator will be removed in v17
- */
-export declare const conversionSchematic: (generatorOptions: import("../../../../../build/packages/linter").ConvertTSLintToESLintSchema) => (tree: any, context: any) => Promise<any>;

package/src/generators/convert-tslint-to-eslint/compat.js

@@ -1,10 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.conversionSchematic = void 0;
-const devkit_1 = require("@nx/devkit");
-const warn_for_schematic_usage_1 = require("../utils/warn-for-schematic-usage");
-const convert_tslint_to_eslint_1 = require("./convert-tslint-to-eslint");
-/**
- * @deprecated This generator will be removed in v17
- */
-exports.conversionSchematic = (0, warn_for_schematic_usage_1.warnForSchematicUsage)((0, devkit_1.convertNxGenerator)(convert_tslint_to_eslint_1.conversionGenerator));

package/src/generators/convert-tslint-to-eslint/convert-tslint-to-eslint.d.ts

@@ -1,6 +0,0 @@
-import { Tree } from '@nx/devkit';
-import { ConvertTSLintToESLintSchema } from '@nx/linter';
-/**
- * @deprecated This generator will be removed in v17
- */
-export declare function conversionGenerator(host: Tree, options: ConvertTSLintToESLintSchema): Promise<() => Promise<void>>;

package/src/generators/convert-tslint-to-eslint/convert-tslint-to-eslint.js

@@ -1,171 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.conversionGenerator = void 0;
-const cypress_1 = require("@nx/cypress");
-const devkit_1 = require("@nx/devkit");
-const linter_1 = require("@nx/linter");
-const add_linting_1 = require("../add-linting/add-linting");
-/**
- * @deprecated This generator will be removed in v17
- */
-async function conversionGenerator(host, options) {
-    /**
-     * The ProjectConverter instance encapsulates all the standard operations we need
-     * to perform in order to convert a project from TSLint to ESLint, as well as some
-     * extensibility points for adjusting the behavior on a per package basis.
-     *
-     * E.g. @nx/angular projects might need to make different changes to the final
-     * ESLint config when compared with @nx/next projects.
-     *
-     * See the ProjectConverter implementation for a full breakdown of what it does.
-     */
-    const projectConverter = new linter_1.ProjectConverter({
-        host,
-        projectName: options.project,
-        ignoreExistingTslintConfig: options.ignoreExistingTslintConfig,
-        eslintInitializer: async ({ projectName, projectConfig }) => {
-            await (0, add_linting_1.addLintingGenerator)(host, {
-                projectName,
-                projectRoot: projectConfig.root,
-                prefix: projectConfig.prefix || 'app',
-                /**
-                 * We set the parserOptions.project config just in case the converted config uses
-                 * rules which require type-checking. Later in the conversion we check if it actually
-                 * does and remove the config again if it doesn't, so that it is most efficient.
-                 */
-                setParserOptionsProject: true,
-                skipFormat: true,
-            });
-        },
-    });
-    /**
-     * If root eslint configuration already exists it will not be recreated
-     * but we also don't want to re-run the tslint config conversion
-     * as it was likely already done
-     */
-    const rootEslintConfigExists = host.exists('.eslintrc.json');
-    /**
-     * Create the standard (which is applicable to the current package) ESLint setup
-     * for converting the project.
-     */
-    const eslintInitInstallTask = await projectConverter.initESLint();
-    /**
-     * Convert the root tslint.json and apply the converted rules to the root .eslintrc.json
-     */
-    const rootConfigInstallTask = await projectConverter.convertRootTSLintConfig((json) => {
-        json.overrides = [
-            { files: ['*.ts'], rules: {} },
-            { files: ['*.html'], rules: {} },
-        ];
-        return applyAngularRulesToCorrectOverrides(json);
-    }, rootEslintConfigExists);
-    /**
-     * Convert the project's tslint.json to an equivalent ESLint config.
-     */
-    const projectConfigInstallTask = await projectConverter.convertProjectConfig((json) => applyAngularRulesToCorrectOverrides(json));
-    /**
-     * Clean up the original TSLint configuration for the project.
-     */
-    projectConverter.removeProjectTSLintFile();
-    // Only project shouldn't be added as a default
-    const { project, ...defaults } = options;
-    /**
-     * Store user preferences for the collection
-     */
-    projectConverter.setDefaults('@nx/angular', defaults);
-    /**
-     * If the Angular project is an app which has an e2e project, try and convert that as well.
-     */
-    let cypressInstallTask = () => Promise.resolve(undefined);
-    const e2eProjectName = projectConverter.getE2EProjectName();
-    if (e2eProjectName) {
-        try {
-            cypressInstallTask = await (0, cypress_1.conversionGenerator)(host, {
-                project: e2eProjectName,
-                ignoreExistingTslintConfig: options.ignoreExistingTslintConfig,
-                /**
-                 * We can always set this to false, because it will already be handled by the next
-                 * step of this parent generator, if applicable
-                 */
-                removeTSLintIfNoMoreTSLintTargets: false,
-                skipFormat: true,
-            });
-        }
-        catch {
-            devkit_1.logger.warn('This Angular app has an e2e project, but it was not possible to convert it from TSLint to ESLint. This could be because the e2e project did not have a tslint.json file to begin with.');
-        }
-    }
-    /**
-     * Based on user preference and remaining usage, remove TSLint from the workspace entirely.
-     */
-    let uninstallTSLintTask = () => Promise.resolve(undefined);
-    if (options.removeTSLintIfNoMoreTSLintTargets &&
-        !projectConverter.isTSLintUsedInWorkspace()) {
-        uninstallTSLintTask = projectConverter.removeTSLintFromWorkspace();
-    }
-    if (!options.skipFormat) {
-        await (0, devkit_1.formatFiles)(host);
-    }
-    return async () => {
-        await eslintInitInstallTask();
-        await rootConfigInstallTask();
-        await projectConfigInstallTask();
-        await cypressInstallTask();
-        await uninstallTSLintTask();
-    };
-}
-exports.conversionGenerator = conversionGenerator;
-/**
- * In the case of Angular lint rules, we need to apply them to correct override depending upon whether
- * or not they require @typescript-eslint/parser or @angular-eslint/template-parser in order to function.
- *
- * By this point, the applicable overrides have already been scaffolded for us by the Nx generators
- * that ran earlier within this generator.
- */
-function applyAngularRulesToCorrectOverrides(json) {
-    const rules = json.rules;
-    if (rules && Object.keys(rules).length) {
-        for (const [ruleName, ruleConfig] of Object.entries(rules)) {
-            for (const override of json.overrides) {
-                if (override.files.includes('*.html') &&
-                    ruleName.startsWith('@angular-eslint/template')) {
-                    // Prioritize the converted rules over any base implementations from the original Nx generator
-                    override.rules[ruleName] = ruleConfig;
-                }
-                /**
-                 * By default, tslint-to-eslint-config will try and apply any rules without known converters
-                 * by using eslint-plugin-tslint. We instead explicitly warn the user about this missing converter,
-                 * and therefore at this point we strip out any rules which start with @typescript-eslint/tslint/config
-                 */
-                if (override.files.includes('*.ts') &&
-                    !ruleName.startsWith('@angular-eslint/template')) {
-                    // Prioritize the converted rules over any base implementations from the original Nx generator
-                    override.rules[ruleName] = ruleConfig;
-                }
-            }
-        }
-    }
-    // It's possible that there are plugins to apply to the TS override
-    if (json.plugins) {
-        for (const override of json.overrides) {
-            if (override.files.includes('*.ts')) {
-                override.plugins = override.plugins || [];
-                override.plugins = [
-                    ...override.plugins,
-                    ...json.plugins.filter((plugin) => plugin !== '@angular-eslint/eslint-plugin-template'),
-                ];
-            }
-            if (override.files.includes('*.html') &&
-                json.plugins.includes('@angular-eslint/eslint-plugin-template')) {
-                override.plugins = ['@angular-eslint/eslint-plugin-template'];
-            }
-        }
-        delete json.plugins;
-    }
-    /**
-     * We now no longer need the flat list of rules at the root of the config
-     * because they have all been applied to an appropriate override.
-     */
-    delete json.rules;
-    return json;
-}

package/src/generators/convert-tslint-to-eslint/schema.json

@@ -1,55 +0,0 @@
-{
-  "$schema": "http://json-schema.org/schema",
-  "$id": "NxAngularConvertTSLintToESLintGenerator",
-  "cli": "nx",
-  "title": "Convert an Angular project from TSLint to ESLint",
-  "description": "Convert an Angular project from TSLint to ESLint. NOTE: Does not work in `--dry-run mode`.",
-  "x-deprecated": "This generator is deprecated and will be removed in a future version of Nx. Migrate to ESLint.",
-  "examples": [
-    {
-      "command": "nx g convert-tslint-to-eslint myapp",
-      "description": "The following will first configure the project, `myapp`, the same way a _new_ project is configured i.e. It will use Nx's new recommended ESLint config. By default, this also adds the existing TSLint configuration on top of the default ESLint config from Nx to continue checking what it checks today. This is done by migrating TSLint rules to their equivalent ESLint rules to the best of its abilities. Some TSLint rules may not have ESLint equivalents and will be reported during the conversion"
-    },
-    {
-      "command": "nx g convert-tslint-to-eslint myapp --ignoreExistingTslintConfig=true",
-      "description": "If your TSLint config isn't extremely important to you, ignoring it makes this process more deterministic. Unlike the prior example, this will discard the existing TSLint configuration, meaning that the project will only have the Nx's latest recommended ESLint configuration which may be good enough for some workspaces"
-    },
-    {
-      "command": "nx g convert-tslint-to-eslint myapp --removeTSLintIfNoMoreTSLintTargets=false",
-      "description": "By default, this process removes the TSLint related dependencies and configuration once no more projects use TSLint. This can be disabled with the following flag to keep TSLint related dependencies and configuration in the repo"
-    }
-  ],
-  "type": "object",
-  "properties": {
-    "project": {
-      "description": "The name of the Angular project to convert. Please note, if the project is an Angular app with an associated Cypress e2e project, it will also attempt to convert that.",
-      "type": "string",
-      "$default": {
-        "$source": "argv",
-        "index": 0
-      },
-      "x-prompt": "Which Angular project would you like to convert from TSLint to ESLint?",
-      "x-priority": "important"
-    },
-    "ignoreExistingTslintConfig": {
-      "type": "boolean",
-      "description": "If true, it will not use existing TSLint config as a reference, it will just reset the project with the latest recommended ESLint config.",
-      "default": false,
-      "x-prompt": "Would you like to ignore the existing TSLint config? Recommended if the TSLint config has not been altered much as it makes the new ESLint config cleaner."
-    },
-    "removeTSLintIfNoMoreTSLintTargets": {
-      "type": "boolean",
-      "description": "If this conversion leaves no more TSLint usage in the workspace, it will remove TSLint and related dependencies and configuration.",
-      "default": true,
-      "x-prompt": "Would you like to remove TSLint and its related config if there are no TSLint projects remaining after this conversion?"
-    },
-    "skipFormat": {
-      "type": "boolean",
-      "description": "Skip formatting files.",
-      "default": false,
-      "x-priority": "internal"
-    }
-  },
-  "additionalProperties": false,
-  "required": ["project"]
-}