@nx/angular 17.2.8 → 17.3.0-beta.2

package/README.md

@@ -1,4 +1,9 @@
-<p style="text-align: center;"><img src="https://raw.githubusercontent.com/nrwl/nx/master/images/nx.png" width="600" alt="Nx - Smart, Fast and Extensible Build System"></p>
+<p style="text-align: center;">
+  <picture>
+    <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/nrwl/nx/master/images/nx-dark.svg">
+    <img alt="Nx - Smart Monorepos · Fast CI" src="https://raw.githubusercontent.com/nrwl/nx/master/images/nx-light.svg" width="100%">
+  </picture>
+</p>
 
 <div style="text-align: center;">
 
@@ -15,9 +20,9 @@
 
 <hr>
 
-# Nx: Smart, Fast and Extensible Build System
+# Nx: Smart Monorepos · Fast CI
 
-Nx is a next generation build system with first class monorepo support and powerful integrations.
+Nx is a build system with built-in tooling and advanced CI capabilities. It helps you maintain and scale monorepos, both locally and on CI.
 
 This package is an [Angular plugin for Nx](https://nx.dev/packages/angular).
 
@@ -59,5 +64,5 @@ npx nx@latest init
 - [Blog Posts About Nx](https://blog.nrwl.io/nx/home)
 
 <p style="text-align: center;"><a href="https://nx.dev/#learning-materials" target="_blank" rel="noreferrer"><img src="https://raw.githubusercontent.com/nrwl/nx/master/images/nx-courses-and-videos.svg" 
-width="100%" alt="Nx - Smart, Fast and Extensible Build System"></a></p>
+width="100%" alt="Nx - Smart Monorepos · Fast CI"></a></p>
 

package/migrations.json

@@ -1527,6 +1527,15 @@
           "alwaysAddToPackageJson": false
         }
       }
+    },
+    "17.3.0": {
+      "version": "17.3.0-beta.3",
+      "packages": {
+        "@types/node": {
+          "version": "18.16.9",
+          "alwaysAddToPackageJson": false
+        }
+      }
     }
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nx/angular",
-  "version": "17.2.8",
+  "version": "17.3.0-beta.2",
   "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": {
@@ -78,15 +78,15 @@
     "tslib": "^2.3.0",
     "webpack": "^5.80.0",
     "webpack-merge": "^5.8.0",
-    "@nx/devkit": "17.2.8",
-    "@nx/cypress": "17.2.8",
-    "@nx/jest": "17.2.8",
-    "@nx/js": "17.2.8",
-    "@nx/eslint": "17.2.8",
-    "@nx/webpack": "17.2.8",
-    "@nx/web": "17.2.8",
-    "@nx/workspace": "17.2.8",
-    "@nrwl/angular": "17.2.8"
+    "@nx/devkit": "17.3.0-beta.2",
+    "@nx/cypress": "17.3.0-beta.2",
+    "@nx/jest": "17.3.0-beta.2",
+    "@nx/js": "17.3.0-beta.2",
+    "@nx/eslint": "17.3.0-beta.2",
+    "@nx/webpack": "17.3.0-beta.2",
+    "@nx/web": "17.3.0-beta.2",
+    "@nx/workspace": "17.3.0-beta.2",
+    "@nrwl/angular": "17.3.0-beta.2"
   },
   "peerDependencies": {
     "@angular-devkit/build-angular": ">= 15.0.0 < 18.0.0",

package/src/executors/module-federation-dev-server/module-federation-dev-server.impl.d.ts

@@ -1,3 +1,4 @@
 import { type ExecutorContext } from '@nx/devkit';
 import { type Schema } from './schema';
-export default function moduleFederationDevServerExecutor(schema: Schema, context: ExecutorContext): AsyncGenerator<any, any, undefined>;
+export declare function moduleFederationDevServerExecutor(schema: Schema, context: ExecutorContext): AsyncGenerator<any, any, undefined>;
+export default moduleFederationDevServerExecutor;

package/src/executors/module-federation-dev-server/module-federation-dev-server.impl.js

@@ -1,5 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.moduleFederationDevServerExecutor = void 0;
 const devkit_1 = require("@nx/devkit");
 const lib_1 = require("./lib");
 const rxjs_for_await_1 = require("@nx/devkit/src/utils/rxjs-for-await");
@@ -107,4 +108,5 @@ async function* moduleFederationDevServerExecutor(schema, context) {
         }
     }));
 }
+exports.moduleFederationDevServerExecutor = moduleFederationDevServerExecutor;
 exports.default = moduleFederationDevServerExecutor;

package/src/generators/application/files/ng-module/src/app/app.component.spec.ts__tpl__

@@ -15,7 +15,9 @@ describe('AppComponent', () => {
     const fixture = TestBed.createComponent(AppComponent);
     fixture.detectChanges();
     const compiled = fixture.nativeElement as HTMLElement;
-    expect(compiled.querySelector('h1')?.textContent).toContain('Welcome <%= appName %>');
+    expect(compiled.querySelector('h1')?.textContent).toContain(
+      'Welcome <%= appName %>'
+    );
   });<% if(!minimal) { %>
 
   it(`should have as title '<%= appName %>'`, () => {

package/src/generators/application/files/ng-module/src/app/nx-welcome.component.ts__tpl__

@@ -689,7 +689,7 @@ import { Component, ViewEncapsulation } from '@angular/core';
                   <path stroke-width="2" d="M23 6v14.1667C23 21.7307 21.7307 23 20.1667 23H6c0-3.128 2.53867-5.6667 5.6667-5.6667 3.128 0 5.6666-2.5386 5.6666-5.6666C17.3333 8.53867 19.872 6 23 6Z" />
                 </svg>
                 <h2>
-                  NxCloud
+                  Nx Cloud
                   <span>
                     Enable faster CI & better DX
                   </span>

package/src/generators/application/files/standalone-components/src/app/app.component.spec.ts__tpl__

@@ -11,10 +11,12 @@ describe('AppComponent', () => {
   });
 
   it('should render title', () => {
-      const fixture = TestBed.createComponent(AppComponent);
-      fixture.detectChanges();
-      const compiled = fixture.nativeElement as HTMLElement;
-      expect(compiled.querySelector('h1')?.textContent).toContain('Welcome <%= appName %>');
+    const fixture = TestBed.createComponent(AppComponent);
+    fixture.detectChanges();
+    const compiled = fixture.nativeElement as HTMLElement;
+    expect(compiled.querySelector('h1')?.textContent).toContain(
+      'Welcome <%= appName %>'
+    );
   });<% if(!minimal) { %>
 
   it(`should have as title '<%= appName %>'`, () => {

package/src/generators/application/files/standalone-components/src/app/nx-welcome.component.ts__tpl__

@@ -692,7 +692,7 @@ import { CommonModule } from '@angular/common';
                   <path stroke-width="2" d="M23 6v14.1667C23 21.7307 21.7307 23 20.1667 23H6c0-3.128 2.53867-5.6667 5.6667-5.6667 3.128 0 5.6666-2.5386 5.6666-5.6666C17.3333 8.53867 19.872 6 23 6Z" />
                 </svg>
                 <h2>
-                  NxCloud
+                  Nx Cloud
                   <span>
                     Enable faster CI & better DX
                   </span>

package/src/generators/application/files/standalone-components/src/main.ts__tpl__

@@ -2,4 +2,6 @@ import { bootstrapApplication } from '@angular/platform-browser';
 import { appConfig } from './app/app.config';
 import { AppComponent } from './app/app.component';
 
-bootstrapApplication(AppComponent, appConfig).catch((err) => console.error(err));
+bootstrapApplication(AppComponent, appConfig).catch((err) =>
+  console.error(err)
+);

package/src/generators/component/files/__fileName__.spec.ts__tpl__

@@ -7,9 +7,8 @@ describe('<%= symbolName %>', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      <%= standalone ? 'imports' : 'declarations' %>: [ <%= symbolName %> ]
-    })
-    .compileComponents();
+      <%= standalone ? 'imports' : 'declarations' %>: [<%= symbolName %>]
+    }).compileComponents();
 
     fixture = TestBed.createComponent(<%= symbolName %>);
     component = fixture.componentInstance;

package/src/generators/component/lib/component.js

@@ -28,7 +28,7 @@ function exportComponentInEntryPoint(tree, schema) {
     }
     const relativePathFromEntryPoint = (0, path_1.getRelativeImportToFile)(entryPointPath, schema.filePath);
     const updateEntryPointContent = (0, devkit_1.stripIndents) `${tree.read(entryPointPath, 'utf-8')}
-    export * from "${relativePathFromEntryPoint}";`;
+    export * from '${relativePathFromEntryPoint}';`;
     tree.write(entryPointPath, updateEntryPointContent);
 }
 exports.exportComponentInEntryPoint = exportComponentInEntryPoint;

package/src/generators/component-cypress-spec/files/__componentFileName__.__fileExt__

@@ -1,12 +1,17 @@
 describe('<%=projectName%>', () => {
-  beforeEach(() => cy.visit('/iframe.html?id=<%= componentName.toLowerCase() %>--primary<% if ( props && props.length > 0 ) { %>&args=<% } %><%
-    for(let prop of props) {
-      %><%=prop.name%><%
-      if(prop.defaultValue !== undefined && (prop.defaultValue || prop.defaultValue === false)) {
-        %>:<%=prop.defaultValue%><%
-      } %>;<%
-    }%>'));
+  beforeEach(() =>
+    cy.visit(
+      '/iframe.html?id=<%= componentName.toLowerCase() %>--primary<% if ( props && props.length > 0 ) { %>&args=<% } %><%
+      for(let prop of props) {
+        %><%=prop.name%><%
+        if(prop.defaultValue !== undefined && (prop.defaultValue || prop.defaultValue === false)) {
+          %>:<%=prop.defaultValue%><%
+        } %>;<%
+      }%>'
+    )
+  );
+
   it('should render the component', () => {
     cy.get('<%=componentSelector%>').should('exist');
   });
-});
+});

package/src/generators/component-story/files/__componentFileName__.stories.ts__tmpl__

@@ -14,14 +14,14 @@ type Story = StoryObj<<%=componentName%>>;
 
 export const Primary: Story = {
   args: {<% for (let prop of props) { %>
-    <%= prop.name %>:  <%- prop.defaultValue %>,<% } %>
+    <%= prop.name %>: <%- prop.defaultValue %>,<% } %>
   },
 };
 
 <% if ( interactionTests ) { %>
 export const Heading: Story = {
   args: {<% for (let prop of props) { %>
-    <%= prop.name %>:  <%- prop.defaultValue %>,<% } %>
+    <%= prop.name %>: <%- prop.defaultValue %>,<% } %>
   },
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);

package/src/generators/component-test/component-test.d.ts

@@ -1,4 +1,4 @@
 import { Tree } from '@nx/devkit';
 import { ComponentTestSchema } from './schema';
-export declare function componentTestGenerator(tree: Tree, options: ComponentTestSchema): void;
+export declare function componentTestGenerator(tree: Tree, options: ComponentTestSchema): Promise<void>;
 export default componentTestGenerator;

package/src/generators/component-test/component-test.js

@@ -4,7 +4,7 @@ exports.componentTestGenerator = void 0;
 const cypress_version_1 = require("@nx/cypress/src/utils/cypress-version");
 const devkit_1 = require("@nx/devkit");
 const storybook_inputs_1 = require("../utils/storybook-ast/storybook-inputs");
-function componentTestGenerator(tree, options) {
+async function componentTestGenerator(tree, options) {
     (0, cypress_version_1.assertMinimumCypressVersion)(10);
     const { root } = (0, devkit_1.readProjectConfiguration)(tree, options.project);
     const componentDirPath = (0, devkit_1.joinPathFragments)(root, options.componentDir);
@@ -21,6 +21,9 @@ function componentTestGenerator(tree, options) {
             tpl: '',
         });
     }
+    if (!options.skipFormat) {
+        await (0, devkit_1.formatFiles)(tree);
+    }
 }
 exports.componentTestGenerator = componentTestGenerator;
 exports.default = componentTestGenerator;

package/src/generators/component-test/files/__componentFileName__.cy.ts__tpl__

@@ -2,22 +2,20 @@ import { TestBed } from '@angular/core/testing';
 import { <%= componentName %> } from './<%= componentFileName %>';
 
 describe(<%= componentName %>.name, () => {
-
   beforeEach(() => {
     TestBed.overrideComponent(<%= componentName %>, {
       add: {
         imports: [],
         providers: []
       }
-    })
-  })
+    });
+  });
 
   it('renders', () => {
-     cy.mount(<%= componentName %>,<% if(props.length > 0) { %> {
-           componentProperties: {<% for (let prop of props) { %>
-               <%= prop.name %>:  <%- prop.defaultValue %>,<% } %>
-          }
-       }<% } %>);
-  })
-
-})
+    cy.mount(<%= componentName %><% if(props.length > 0) { %>, {
+      componentProperties: {<% for (let prop of props) { %>
+        <%= prop.name %>: <%- prop.defaultValue %>,<% } %>
+      }
+    }<% } %>);
+  });
+});

package/src/generators/convert-to-with-mf/convert-to-with-mf.js

@@ -24,7 +24,9 @@ async function convertToWithMF(tree, schema) {
     const [updatedWebpackConfig, mfConfig] = (0, lib_1.writeNewWebpackConfig)(webpackAst, (0, lib_1.isHostRemoteConfig)(webpackAst), schema.project);
     tree.write(pathToWebpackConfig, updatedWebpackConfig);
     tree.write((0, devkit_1.joinPathFragments)(project.root, 'module-federation.config.js'), mfConfig);
-    await (0, devkit_1.formatFiles)(tree);
+    if (!schema.skipFormat) {
+        await (0, devkit_1.formatFiles)(tree);
+    }
 }
 exports.convertToWithMF = convertToWithMF;
 exports.default = convertToWithMF;

package/src/generators/convert-to-with-mf/lib/write-new-webpack-config.js

@@ -4,8 +4,9 @@ exports.writeNewWebpackConfig = void 0;
 const is_host_remote_config_1 = require("./is-host-remote-config");
 function writeNewWebpackConfig(ast, mfType, projectName) {
     const webpackConfig = `const { withModuleFederation } = require('@nx/angular/module-federation');
-  const config = require('./module-federation.config');
-  module.exports = withModuleFederation(config);`;
+const config = require('./module-federation.config');
+module.exports = withModuleFederation(config);
+`;
     let mfeConfig = '';
     if (!mfType) {
         mfeConfig = `

package/src/generators/convert-to-with-mf/schema.d.ts

@@ -1,3 +1,4 @@
 export interface Schema {
   project: string;
+  skipFormat?: boolean;
 }

package/src/generators/convert-to-with-mf/schema.json

@@ -22,6 +22,12 @@
       },
       "x-prompt": "What micro frontend project would you like to migrate?",
       "x-priority": "important"
+    },
+    "skipFormat": {
+      "description": "Skip formatting files.",
+      "type": "boolean",
+      "default": false,
+      "x-priority": "internal"
     }
   }
 }

package/src/generators/cypress-component-configuration/cypress-component-configuration.d.ts

@@ -4,5 +4,5 @@ import { CypressComponentConfigSchema } from './schema';
  * This is for cypress built in component testing, if you want to test with
  * storybook + cypress then use the componentCypressGenerator instead.
  */
-export declare function cypressComponentConfiguration(tree: Tree, options: CypressComponentConfigSchema): Promise<() => void>;
+export declare function cypressComponentConfiguration(tree: Tree, options: CypressComponentConfigSchema): Promise<import("@nx/devkit").GeneratorCallback>;
 export default cypressComponentConfiguration;

package/src/generators/cypress-component-configuration/cypress-component-configuration.js

@@ -25,9 +25,7 @@ async function cypressComponentConfiguration(tree, options) {
     if (!options.skipFormat) {
         await (0, devkit_1.formatFiles)(tree);
     }
-    return () => {
-        installTask();
-    };
+    return installTask;
 }
 exports.cypressComponentConfiguration = cypressComponentConfiguration;
 async function addFiles(tree, projectConfig, options) {
@@ -49,7 +47,7 @@ async function addFiles(tree, projectConfig, options) {
                 continue;
             }
             const componentDirFromProjectRoot = (0, path_1.relative)(projectConfig.root, (0, devkit_1.joinPathFragments)(info.moduleFolderPath, info.path));
-            (0, component_test_1.componentTestGenerator)(tree, {
+            await (0, component_test_1.componentTestGenerator)(tree, {
                 project: options.project,
                 componentName: info.name,
                 componentDir: componentDirFromProjectRoot,

package/src/generators/directive/files/__fileName__.ts__tpl__

@@ -5,7 +5,5 @@ import { Directive } from '@angular/core';
   standalone: true<%}%>
 })
 export class <%= symbolName %> {
-
-  constructor() { }
-
+  constructor() {}
 }

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

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

package/src/generators/library/files/ng-module/src/lib/lib.routes.ts__tpl__

@@ -1,5 +1,5 @@
 import { Route } from '@angular/router';
 
 export const <%= libPropertyName %>Routes: Route[] = [
-  /* {path: '', pathMatch: 'full', component: InsertYourComponentHere} */
+  /* { path: '', pathMatch: 'full', component: InsertYourComponentHere } */
 ];

package/src/generators/library/files/standalone-components/src/lib/lib.routes.ts__tpl__

@@ -2,5 +2,5 @@ import { Route } from '@angular/router';
 import { <%= libClassName %>Component } from './<%= pathToComponent %>.component';
 
 export const <%= libPropertyName %>Routes: Route[] = [
-  {path: '', component: <%= libClassName %>Component}
+  { path: '', component: <%= libClassName %>Component }
 ];

package/src/generators/library/lib/add-load-children.js

@@ -14,9 +14,9 @@ function addLoadChildren(tree, options) {
     }
     const moduleSource = tree.read(options.parent, 'utf-8');
     const sourceFile = tsModule.createSourceFile(options.parent, moduleSource, tsModule.ScriptTarget.Latest, true);
-    const route = `{path: '${(0, devkit_1.names)(options.fileName).fileName}', loadChildren: () => import('${options.importPath}').then(m => m.${options.standalone
+    const route = `{ path: '${(0, devkit_1.names)(options.fileName).fileName}', loadChildren: () => import('${options.importPath}').then(m => m.${options.standalone
         ? `${(0, devkit_1.names)(options.name).propertyName}Routes`
-        : options.moduleName})}`;
+        : options.moduleName}) }`;
     (0, route_utils_1.addRoute)(tree, options.parent, route);
 }
 exports.addLoadChildren = addLoadChildren;

package/src/generators/library-secondary-entry-point/files/src/index.ts__tmpl__

@@ -1,5 +1 @@
-<% if (!skipModule) { %>
-export * from './lib/<%= fileName %>.module';
-<% } else { %>
-export const greeting = 'Hello World!';
-<% } %>
+<% if (!skipModule) { %>export * from './lib/<%= fileName %>.module';<% } else { %>export const greeting = 'Hello World!';<% } %>

package/src/generators/library-secondary-entry-point/library-secondary-entry-point.js

@@ -8,7 +8,9 @@ async function librarySecondaryEntryPointGenerator(tree, rawOptions) {
     (0, lib_1.addFiles)(tree, options);
     (0, lib_1.addPathMapping)(tree, options);
     (0, lib_1.updateTsConfigIncludedFiles)(tree, options);
-    await (0, devkit_1.formatFiles)(tree);
+    if (!options.skipFormat) {
+        await (0, devkit_1.formatFiles)(tree);
+    }
 }
 exports.librarySecondaryEntryPointGenerator = librarySecondaryEntryPointGenerator;
 exports.default = librarySecondaryEntryPointGenerator;

package/src/generators/library-secondary-entry-point/schema.d.ts

@@ -4,6 +4,7 @@ export interface GeneratorOptions {
   library: string;
   name: string;
   skipModule?: boolean;
+  skipFormat?: boolean;
 }
 
 export interface NormalizedGeneratorOptions extends GeneratorOptions {

package/src/generators/library-secondary-entry-point/schema.json

@@ -29,6 +29,12 @@
       "type": "boolean",
       "description": "Skip generating a module for the secondary entry point.",
       "default": false
+    },
+    "skipFormat": {
+      "description": "Skip formatting files.",
+      "type": "boolean",
+      "default": false,
+      "x-priority": "internal"
     }
   },
   "additionalProperties": false,

package/src/generators/ngrx/files/__directory__/__fileName__.models.ts__tmpl__

@@ -4,4 +4,4 @@
 export interface <%= className %>Entity {
   id: string | number; // Primary ID
   name: string;
-};
+}

package/src/generators/ngrx/files/__directory__/__fileName__.selectors.spec.ts__tmpl__

@@ -20,7 +20,7 @@ describe('<%= className %> Selectors', () => {
         create<%= className %>Entity('PRODUCT-CCC')
       ], {
         ...initial<%= className %>State,
-        selectedId : 'PRODUCT-BBB',
+        selectedId: 'PRODUCT-BBB',
         error: ERROR_MSG,
         loaded: true
       })

package/src/generators/ngrx-feature-store/files/__directory__/__fileName__.models.ts__tmpl__

@@ -4,4 +4,4 @@
 export interface <%= className %>Entity {
   id: string | number; // Primary ID
   name: string;
-};
+}

package/src/generators/ngrx-feature-store/files/__directory__/__fileName__.selectors.spec.ts__tmpl__

@@ -20,7 +20,7 @@ describe('<%= className %> Selectors', () => {
         create<%= className %>Entity('PRODUCT-CCC')
       ], {
         ...initial<%= className %>State,
-        selectedId : 'PRODUCT-BBB',
+        selectedId: 'PRODUCT-BBB',
         error: ERROR_MSG,
         loaded: true
       })

package/src/generators/pipe/files/__fileName__.ts__tpl__

@@ -5,9 +5,7 @@ import { Pipe, PipeTransform } from '@angular/core';
   standalone: true<%}%>
 })
 export class <%= symbolName %> implements PipeTransform {
-
   transform(value: unknown, ...args: unknown[]): unknown {
     return null;
   }
-
 }

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

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

package/src/generators/remote/files/common/pre-v17/src/main.server.ts__tmpl__

@@ -31,7 +31,6 @@ export function app(): express.Express {
   server.set('view engine', 'html');
   server.set('views', browserBundles);
 
-
   // Example Express Rest API endpoints
   // server.get('/api/**', (req, res) => { });
   // Serve static files from /browser
@@ -41,7 +40,6 @@ export function app(): express.Express {
 
   // All regular routes use the Universal engine
   server.get('*', (req, res) => {
-
     res.render(indexHtml, {
       req,
       providers: [{ provide: APP_BASE_HREF, useValue: req.baseUrl }],

package/src/generators/remote/files/common/v17+/src/main.server.ts__tmpl__

@@ -24,7 +24,6 @@ export function app(): express.Express {
   server.set('view engine', 'html');
   server.set('views', browserBundles);
 
-
   // Example Express Rest API endpoints
   // server.get('/api/**', (req, res) => { });
   // Serve static files from /browser

package/src/generators/scam/lib/convert-component-to-scam.js

@@ -39,5 +39,6 @@ function getNgModuleDeclaration(componentClassName) {
   declarations: [${componentClassName}],
   exports: [${componentClassName}],
 })
-export class ${componentClassName}Module {}`;
+export class ${componentClassName}Module {}
+`;
 }

package/src/generators/scam-directive/lib/convert-directive-to-scam.js

@@ -39,5 +39,6 @@ function getNgModuleDeclaration(directiveClassName) {
   declarations: [${directiveClassName}],
   exports: [${directiveClassName}],
 })
-export class ${directiveClassName}Module {}`;
+export class ${directiveClassName}Module {}
+`;
 }

package/src/generators/scam-directive/scam-directive.js

@@ -18,7 +18,9 @@ async function scamDirectiveGenerator(tree, rawOptions) {
     });
     (0, lib_1.convertDirectiveToScam)(tree, options);
     (0, export_scam_1.exportScam)(tree, options);
-    await (0, devkit_1.formatFiles)(tree);
+    if (!options.skipFormat) {
+        await (0, devkit_1.formatFiles)(tree);
+    }
 }
 exports.scamDirectiveGenerator = scamDirectiveGenerator;
 exports.default = scamDirectiveGenerator;

package/src/generators/scam-directive/schema.d.ts

@@ -9,6 +9,7 @@ export interface Schema {
   prefix?: string;
   selector?: string;
   export?: boolean;
+  skipFormat?: boolean;
   /**
    * @deprecated Provide the `directory` option instead and use the `as-provided` format. It will be removed in Nx v18.
    */

package/src/generators/scam-directive/schema.json

@@ -84,6 +84,12 @@
       "description": "Specifies if the SCAM should be exported from the project's entry point (normally `index.ts`). It only applies to libraries.",
       "default": true,
       "x-priority": "important"
+    },
+    "skipFormat": {
+      "description": "Skip formatting files.",
+      "type": "boolean",
+      "default": false,
+      "x-priority": "internal"
     }
   },
   "required": ["name"]

package/src/generators/scam-pipe/lib/convert-pipe-to-scam.js

@@ -39,5 +39,6 @@ function getNgModuleDeclaration(pipeClassName) {
   declarations: [${pipeClassName}],
   exports: [${pipeClassName}],
 })
-export class ${pipeClassName}Module {}`;
+export class ${pipeClassName}Module {}
+`;
 }

package/src/generators/scam-pipe/scam-pipe.js

@@ -18,7 +18,9 @@ async function scamPipeGenerator(tree, rawOptions) {
     });
     (0, lib_1.convertPipeToScam)(tree, options);
     (0, export_scam_1.exportScam)(tree, options);
-    await (0, devkit_1.formatFiles)(tree);
+    if (!options.skipFormat) {
+        await (0, devkit_1.formatFiles)(tree);
+    }
 }
 exports.scamPipeGenerator = scamPipeGenerator;
 exports.default = scamPipeGenerator;

package/src/generators/scam-pipe/schema.d.ts

@@ -7,6 +7,7 @@ export interface Schema {
   skipTests?: boolean;
   inlineScam?: boolean;
   export?: boolean;
+  skipFormat?: boolean;
   /**
    * @deprecated Provide the `directory` option instead and use the `as-provided` format. It will be removed in Nx v18.
    */

package/src/generators/scam-pipe/schema.json

@@ -65,6 +65,12 @@
       "description": "Specifies if the SCAM should be exported from the project's entry point (normally `index.ts`). It only applies to libraries.",
       "default": true,
       "x-priority": "important"
+    },
+    "skipFormat": {
+      "description": "Skip formatting files.",
+      "type": "boolean",
+      "default": false,
+      "x-priority": "internal"
     }
   },
   "required": ["name"]

package/src/generators/setup-mf/files/host-files/app.component.spec.ts__tmpl__

@@ -37,6 +37,8 @@ describe('AppComponent', () => {
     tick();
     fixture.detectChanges();
     const compiled = fixture.nativeElement as HTMLElement;
-    expect(compiled.querySelector('h1')?.textContent).toContain('Welcome <%= appName %>');
+    expect(compiled.querySelector('h1')?.textContent).toContain(
+      'Welcome <%= appName %>'
+    );
   }));
 });

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

@@ -1,4 +1,4 @@
-import {withModuleFederation} from '@nx/angular/module-federation';
+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__

@@ -1,16 +1,16 @@
-import {withModuleFederation} from '@nx/angular/module-federation';
+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'],
-     * ]
-     */
+  ...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/files/webpack/module-federation.config.js__tmpl__

@@ -17,4 +17,4 @@ module.exports = {
     './Routes': '<%= projectRoot %>/src/app/remote-entry/entry.routes.ts',<% } else { %>
     './Module': '<%= projectRoot %>/src/app/remote-entry/entry.module.ts',<% } %>
   },<% } %>
-}
+};

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

@@ -16,7 +16,7 @@ function addRemoteEntry(tree, { appName, routing, prefix, standalone }, appRoot)
         (0, route_utils_1.addRoute)(tree, (0, devkit_1.joinPathFragments)(appRoot, 'src/app/app.routes.ts'), `{path: '', loadChildren: () => import('./remote-entry/entry.routes').then(m => m.remoteRoutes)}`);
     }
     else if (routing) {
-        (0, route_utils_1.addRoute)(tree, (0, devkit_1.joinPathFragments)(appRoot, 'src/app/app.routes.ts'), `{path: '', loadChildren: () => import('./remote-entry/entry.module').then(m => m.RemoteEntryModule)}`);
+        (0, route_utils_1.addRoute)(tree, (0, devkit_1.joinPathFragments)(appRoot, 'src/app/app.routes.ts'), `{ path: '', loadChildren: () => import('./remote-entry/entry.module').then(m => m.RemoteEntryModule) }`);
     }
 }
 exports.addRemoteEntry = addRemoteEntry;

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

@@ -102,7 +102,7 @@ function addLazyLoadedRouteToHostAppModule(tree, options, hostFederationType) {
     if (appComponent.includes(`<ul class="remote-menu">`) &&
         appComponent.includes('</ul>')) {
         const indexOfClosingMenuTag = appComponent.indexOf('</ul>');
-        const newAppComponent = `${appComponent.slice(0, indexOfClosingMenuTag)}<li><a routerLink='${options.appName}'>${(0, devkit_1.names)(options.appName).className}</a></li>\n${appComponent.slice(indexOfClosingMenuTag)}`;
+        const newAppComponent = `${appComponent.slice(0, indexOfClosingMenuTag)}<li><a routerLink="${options.appName}">${(0, devkit_1.names)(options.appName).className}</a></li>\n${appComponent.slice(indexOfClosingMenuTag)}`;
         tree.write(pathToAppComponentTemplate, newAppComponent);
     }
 }

package/src/generators/setup-mf/lib/fix-bootstrap.js

@@ -11,10 +11,10 @@ function fixBootstrap(tree, appRoot, options) {
     else {
         tree.write((0, devkit_1.joinPathFragments)(appRoot, 'src/bootstrap.ts'), bootstrapCode);
     }
-    const bootstrapImportCode = `import('./bootstrap').catch(err => console.error(err))`;
+    const bootstrapImportCode = `import('./bootstrap').catch(err => console.error(err));`;
     const fetchMFManifestCode = `import { setRemoteDefinitions } from '@nx/angular/mf';
 
-  fetch('/assets/module-federation.manifest.json')
+fetch('/assets/module-federation.manifest.json')
   .then((res) => res.json())
   .then(definitions => setRemoteDefinitions(definitions))
   .then(() => ${bootstrapImportCode})`;
@@ -23,10 +23,11 @@ function fixBootstrap(tree, appRoot, options) {
         : bootstrapImportCode);
 }
 exports.fixBootstrap = fixBootstrap;
-const standaloneBootstrapCode = () => `import {bootstrapApplication} from "@angular/platform-browser";
-import {appConfig} from './app/app.config';
-import {RemoteEntryComponent} from './app/remote-entry/entry.component';
+const standaloneBootstrapCode = () => `import { bootstrapApplication } from '@angular/platform-browser';
+import { appConfig } from './app/app.config';
+import { RemoteEntryComponent } from './app/remote-entry/entry.component';
 
 bootstrapApplication(RemoteEntryComponent, appConfig).catch((err) =>
   console.error(err)
-);`;
+);
+`;

package/src/generators/setup-mf/lib/remove-dead-code-from-remote.js

@@ -30,16 +30,16 @@ import { RouterModule } from '@angular/router';
 import { AppComponent } from './app.component';
 
 @NgModule({
- declarations: [AppComponent],
- imports: [
-   BrowserModule,
-   RouterModule.forRoot([{
-     path: '',
-     loadChildren: () => import('./remote-entry/entry.module').then(m => m.RemoteEntryModule)
-   }], { initialNavigation: 'enabledBlocking' }),
- ],
- providers: [],
- bootstrap: [AppComponent],
+  declarations: [AppComponent],
+  imports: [
+    BrowserModule,
+    RouterModule.forRoot([{
+      path: '',
+      loadChildren: () => import('./remote-entry/entry.module').then(m => m.RemoteEntryModule)
+    }], { initialNavigation: 'enabledBlocking' }),
+  ],
+  providers: [],
+  bootstrap: [AppComponent],
 })
 export class AppModule {}`);
     }

package/src/generators/setup-mf/lib/update-host-app-routes.js

@@ -15,7 +15,7 @@ function updateHostAppRoutes(tree, options) {
         ? options.remotes.reduce((routes, remote) => `${routes}\n<li><a routerLink='${remote}'>${(0, devkit_1.names)(remote).className}</a></li>`, '')
         : '';
     tree.write((0, devkit_1.joinPathFragments)(sourceRoot, 'app/app.component.html'), `<ul class="remote-menu">
-<li><a routerLink='/'>Home</a></li>${remoteRoutes}
+<li><a routerLink="/">Home</a></li>${remoteRoutes}
 </ul>
 <router-outlet></router-outlet>
 `);
@@ -31,7 +31,7 @@ function updateHostAppRoutes(tree, options) {
       component: NxWelcomeComponent
     }`);
     tree.write(pathToHostRootRoutingFile, `import { NxWelcomeComponent } from './nx-welcome.component';
-    ${tree.read(pathToHostRootRoutingFile, 'utf-8')}`);
+${tree.read(pathToHostRootRoutingFile, 'utf-8')}`);
     (0, devkit_1.generateFiles)(tree, (0, devkit_1.joinPathFragments)(__dirname, '../files/host-files'), (0, devkit_1.joinPathFragments)(sourceRoot, 'app'), {
         appName: options.appName,
         standalone: options.standalone,

package/src/generators/setup-ssr/files/server/server-builder/pre-v17/__serverFileName__

@@ -1,10 +1,10 @@
 import 'zone.js/dist/zone-node';
 
-import {APP_BASE_HREF} from '@angular/common';
-import {ngExpressEngine} from '@nguniversal/express-engine';
+import { APP_BASE_HREF } from '@angular/common';
+import { ngExpressEngine } from '@nguniversal/express-engine';
 import * as express from 'express';
-import {existsSync} from 'fs';
-import {join} from 'path';
+import { existsSync } from 'fs';
+import { join } from 'path';
 import <% if (standalone) { %>bootstrap<% } else { %>{ <%= rootModuleClassName %> }<% } %> from './src/<%= main.slice(0, -3) %>';
 
 // The Express app is exported so that it can be used by serverless Functions.

package/src/generators/setup-ssr/lib/set-router-initial-navigation.js

@@ -72,7 +72,7 @@ function updateRouterModuleForRootCallExpression(node) {
             (0, typescript_1.isIdentifier)(exp.name) &&
             exp.name.text === 'initialNavigation')))
         : typescript_1.factory.createNodeArray();
-    const enabledLiteral = typescript_1.factory.createStringLiteral('enabledBlocking');
+    const enabledLiteral = typescript_1.factory.createStringLiteral('enabledBlocking', true);
     const initialNavigationProperty = typescript_1.factory.createPropertyAssignment('initialNavigation', enabledLiteral);
     const routerOptions = existingOptions
         ? typescript_1.factory.updateObjectLiteralExpression(existingOptions, typescript_1.factory.createNodeArray([

package/src/generators/utils/export-scam.js

@@ -25,12 +25,12 @@ function exportScam(tree, options) {
     const relativePathFromEntryPoint = (0, path_1.getRelativeImportToFile)(entryPointPath, options.filePath);
     const entryPointContent = tree.read(entryPointPath, 'utf-8');
     let updatedEntryPointContent = (0, devkit_1.stripIndents) `${entryPointContent}
-    export * from "${relativePathFromEntryPoint}";`;
+    export * from '${relativePathFromEntryPoint}';`;
     if (!options.inlineScam) {
         const moduleFilePath = (0, devkit_1.joinPathFragments)(options.directory, `${(0, devkit_1.names)(options.name).fileName}.module.ts`);
         const relativePathFromModule = (0, path_1.getRelativeImportToFile)(entryPointPath, moduleFilePath);
         updatedEntryPointContent = (0, devkit_1.stripIndents) `${updatedEntryPointContent}
-        export * from "${relativePathFromModule}";`;
+        export * from '${relativePathFromModule}';`;
     }
     tree.write(entryPointPath, updatedEntryPointContent);
 }

package/src/generators/utils/testing.js

@@ -51,7 +51,7 @@ async function createStorybookTestWorkspaceForLib(libName) {
         linter: eslint_1.Linter.EsLint,
         publishable: false,
         simpleName: false,
-        skipFormat: false,
+        skipFormat: true,
         unitTestRunner: test_runners_1.UnitTestRunner.Jest,
         projectNameAndRootFormat: 'as-provided',
         standalone: false,
@@ -60,6 +60,7 @@ async function createStorybookTestWorkspaceForLib(libName) {
         name: 'test-button',
         project: libName,
         standalone: false,
+        skipFormat: true,
     });
     tree.write(`${libName}/src/lib/test-button/test-button.component.ts`, `import { Component, Input } from '@angular/core';
 
@@ -91,6 +92,7 @@ export class TestButtonComponent {
         path: `${libName}/src/lib/barrel`,
         module: 'barrel',
         standalone: false,
+        skipFormat: true,
     });
     tree.write(`${libName}/src/lib/barrel/barrel-button/index.ts`, `export * from './barrel-button.component';`);
     tree.write(`${libName}/src/lib/barrel/barrel.module.ts`, `import { NgModule } from '@angular/core';
@@ -113,6 +115,7 @@ export class BarrelModule {}`);
         path: `${libName}/src/lib/variable-declare`,
         module: 'variable-declare',
         standalone: false,
+        skipFormat: true,
     });
     await (0, component_1.componentGenerator)(tree, {
         name: 'variable-declare-view',
@@ -120,6 +123,7 @@ export class BarrelModule {}`);
         path: `${libName}/src/lib/variable-declare`,
         module: 'variable-declare',
         standalone: false,
+        skipFormat: true,
     });
     tree.write(`${libName}/src/lib/variable-declare/variable-declare.module.ts`, `import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
@@ -148,6 +152,7 @@ export class VariableDeclareModule {}`);
         path: `${libName}/src/lib/variable-spread-declare`,
         module: 'variable-spread-declare',
         standalone: false,
+        skipFormat: true,
     });
     await (0, component_1.componentGenerator)(tree, {
         name: 'variable-spread-declare-view',
@@ -155,6 +160,7 @@ export class VariableDeclareModule {}`);
         path: `${libName}/src/lib/variable-spread-declare`,
         module: 'variable-spread-declare',
         standalone: false,
+        skipFormat: true,
     });
     await (0, component_1.componentGenerator)(tree, {
         name: 'variable-spread-declare-anotherview',
@@ -162,6 +168,7 @@ export class VariableDeclareModule {}`);
         path: `${libName}/src/lib/variable-spread-declare`,
         module: 'variable-spread-declare',
         standalone: false,
+        skipFormat: true,
     });
     tree.write(`${libName}/src/lib/variable-spread-declare/variable-spread-declare.module.ts`, `import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
@@ -190,6 +197,7 @@ export class VariableSpreadDeclareModule {}`);
         path: `${libName}/src/lib/static-member-declarations`,
         module: 'static-member-declarations',
         standalone: false,
+        skipFormat: true,
     });
     await (0, component_1.componentGenerator)(tree, {
         name: 'cmp2',
@@ -197,6 +205,7 @@ export class VariableSpreadDeclareModule {}`);
         path: `${libName}/src/lib/static-member-declarations`,
         module: 'static-member-declarations',
         standalone: false,
+        skipFormat: true,
     });
     tree.write(`${libName}/src/lib/static-member-declarations/static-member-declarations.module.ts`, `import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
@@ -223,11 +232,13 @@ export class StaticMemberDeclarationsModule {
         module: 'nested',
         path: `${libName}/src/lib/nested`,
         standalone: false,
+        skipFormat: true,
     });
     await (0, component_1.componentGenerator)(tree, {
         name: 'test-other',
         project: libName,
         standalone: false,
+        skipFormat: true,
     });
     return tree;
 }

package/src/utils/nx-devkit/testing.js

@@ -19,26 +19,24 @@ function createApp(tree, appName, routing = true) {
         appName,
         appModule: `${appName}/src/app/app.module.ts`,
     };
-    tree.write(appConfig.appModule, `
-     import { NgModule } from '@angular/core';
-     import { BrowserModule } from '@angular/platform-browser';
-     ${routing ? "import { RouterModule } from '@angular/router'" : ''};
-     import { AppComponent } from './app.component';
-     @NgModule({
-       imports: [BrowserModule, ${routing ? 'RouterModule.forRoot([])' : ''}],
-       declarations: [AppComponent],
-       bootstrap: [AppComponent]
-     })
-     export class AppModule {}
-  `);
-    tree.write(`${appName}/src/main.ts`, `
-    import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+    tree.write(appConfig.appModule, `import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+${routing ? "import { RouterModule } from '@angular/router'" : ''};
+import { AppComponent } from './app.component';
+@NgModule({
+  imports: [BrowserModule, ${routing ? 'RouterModule.forRoot([])' : ''}],
+  declarations: [AppComponent],
+  bootstrap: [AppComponent]
+})
+export class AppModule {}
+`);
+    tree.write(`${appName}/src/main.ts`, `import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 
-    import { AppModule } from './app/app.module';
+import { AppModule } from './app/app.module';
 
-    platformBrowserDynamic()
-      .bootstrapModule(AppModule)
-      .catch(err => console.log(err));
+platformBrowserDynamic()
+  .bootstrapModule(AppModule)
+  .catch(err => console.log(err));
   `);
     tree.write(`${appName}/tsconfig.app.json`, JSON.stringify({
         include: ['**/*.ts'],
@@ -70,19 +68,17 @@ function createLib(tree, libName) {
         module: `${propertyName}/src/lib/${fileName}.module.ts`,
         barrel: `${propertyName}/src/index.ts`,
     };
-    tree.write(libConfig.module, `
-      import { NgModule } from '@angular/core';
-      import { CommonModule } from '@angular/common';
-      @NgModule({
-        imports: [
-          CommonModule
-        ],
-        providers: []
-      })
-      export class ${className}Module { }
-  `);
-    tree.write(libConfig.barrel, `
-    export * from './lib/${fileName}.module';
+    tree.write(libConfig.module, `import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+@NgModule({
+  imports: [
+    CommonModule
+  ],
+  providers: []
+})
+export class ${className}Module { }
   `);
+    tree.write(libConfig.barrel, `export * from './lib/${fileName}.module';
+`);
 }
 exports.createLib = createLib;

package/src/utils/versions.d.ts

@@ -21,6 +21,6 @@ export declare const postcssUrlVersion = "~10.1.3";
 export declare const autoprefixerVersion = "^10.4.0";
 export declare const tsNodeVersion = "10.9.1";
 export declare const jestPresetAngularVersion = "~13.1.4";
-export declare const typesNodeVersion = "16.11.7";
+export declare const typesNodeVersion = "18.16.9";
 export declare const jasmineMarblesVersion = "^0.9.2";
 export declare const jsoncEslintParserVersion = "^2.1.0";

package/src/utils/versions.js

@@ -24,6 +24,6 @@ exports.postcssUrlVersion = '~10.1.3';
 exports.autoprefixerVersion = '^10.4.0';
 exports.tsNodeVersion = '10.9.1';
 exports.jestPresetAngularVersion = '~13.1.4';
-exports.typesNodeVersion = '16.11.7';
+exports.typesNodeVersion = '18.16.9';
 exports.jasmineMarblesVersion = '^0.9.2';
 exports.jsoncEslintParserVersion = '^2.1.0';