@nx/angular 17.0.3 → 17.0.4

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

@@ -283,6 +283,15 @@ import { Component, ViewEncapsulation } from '@angular/core';
       .nx-console svg {
         color: rgba(0, 122, 204, 1);
       }
+      .nx-console-jetbrains {
+        margin-top: 2rem;
+      }
+      .nx-console-jetbrains:hover {
+        background-color: rgba(255, 49, 140, 1);
+      }
+      .nx-console-jetbrains svg {
+        color: rgba(255, 49, 140, 1);
+      }
       #nx-repo:hover {
         background-color: rgba(24, 23, 23, 1);
       }
@@ -639,24 +648,35 @@ import { Component, ViewEncapsulation } from '@angular/core';
               </svg>
               <span>
                 Install Nx Console for VSCode
-                <span>The official VSCode plugin for Nx.</span>
+                <span>The official VSCode extension for Nx.</span>
               </span>
             </a>
             <a
-              class="button-pill rounded shadow nx-console"
+              class="button-pill rounded shadow nx-console-jetbrains"
               href="https://plugins.jetbrains.com/plugin/21060-nx-console"
               target="_blank"
               rel="noreferrer"
             >
               <svg
-                fill="currentColor"
-                role="img"
-                viewBox="0 0 24 24"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <title>IntelliJ</title>
-                <path d="M0 0v24h24V0zm3.723 3.111h5v1.834h-1.39v6.277h1.39v1.834h-5v-1.834h1.444V4.945H3.723zm11.055 0H17v6.5c0 .612-.055 1.111-.222 1.556-.167.444-.39.777-.723 1.11-.277.279-.666.557-1.11.668a3.933 3.933 0 0 1-1.445.278c-.778 0-1.444-.167-1.944-.445a4.81 4.81 0 0 1-1.279-1.056l1.39-1.555c.277.334.555.555.833.722.277.167.611.278.945.278.389 0 .721-.111 1-.389.221-.278.333-.667.333-1.278zM2.222 19.5h9V21h-9z"></path>
-              </svg>
+                  height="48"
+                  width="48"
+                  viewBox="20 20 60 60"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path d="m22.5 22.5h60v60h-60z" />
+                  <g fill="#fff">
+                    <path d="m29.03 71.25h22.5v3.75h-22.5z" />
+                    <path d="m28.09 38 1.67-1.58a1.88 1.88 0 0 0 1.47.87c.64 0 1.06-.44 1.06-1.31v-5.98h2.58v6a3.48 3.48 0 0 1 -.87 2.6 3.56 3.56 0 0 1 -2.57.95 3.84 3.84 0 0 1 -3.34-1.55z" />
+                    <path d="m36 30h7.53v2.19h-5v1.44h4.49v2h-4.42v1.49h5v2.21h-7.6z" />
+                    <path d="m47.23 32.29h-2.8v-2.29h8.21v2.27h-2.81v7.1h-2.6z" />
+                    <path d="m29.13 43.08h4.42a3.53 3.53 0 0 1 2.55.83 2.09 2.09 0 0 1 .6 1.53 2.16 2.16 0 0 1 -1.44 2.09 2.27 2.27 0 0 1 1.86 2.29c0 1.61-1.31 2.59-3.55 2.59h-4.44zm5 2.89c0-.52-.42-.8-1.18-.8h-1.29v1.64h1.24c.79 0 1.25-.26 1.25-.81zm-.9 2.66h-1.57v1.73h1.62c.8 0 1.24-.31 1.24-.86 0-.5-.4-.87-1.27-.87z" />
+                    <path d="m38 43.08h4.1a4.19 4.19 0 0 1 3 1 2.93 2.93 0 0 1 .9 2.19 3 3 0 0 1 -1.93 2.89l2.24 3.27h-3l-1.88-2.84h-.87v2.84h-2.56zm4 4.5c.87 0 1.39-.43 1.39-1.11 0-.75-.54-1.12-1.4-1.12h-1.44v2.26z" />
+                    <path d="m49.59 43h2.5l4 9.44h-2.79l-.67-1.69h-3.63l-.67 1.69h-2.71zm2.27 5.73-1-2.65-1.06 2.65z" />
+                    <path d="m56.46 43.05h2.6v9.37h-2.6z" />
+                    <path d="m60.06 43.05h2.42l3.37 5v-5h2.57v9.37h-2.26l-3.53-5.14v5.14h-2.57z" />
+                    <path d="m68.86 51 1.45-1.73a4.84 4.84 0 0 0 3 1.13c.71 0 1.08-.24 1.08-.65 0-.4-.31-.6-1.59-.91-2-.46-3.53-1-3.53-2.93 0-1.74 1.37-3 3.62-3a5.89 5.89 0 0 1 3.86 1.25l-1.26 1.84a4.63 4.63 0 0 0 -2.62-.92c-.63 0-.94.25-.94.6 0 .42.32.61 1.63.91 2.14.46 3.44 1.16 3.44 2.91 0 1.91-1.51 3-3.79 3a6.58 6.58 0 0 1 -4.35-1.5z" />
+                  </g>
+                </svg>
               <span>
                 Install Nx Console for JetBrains
                 <span>Available for WebStorm, Intellij IDEA Ultimate and more!</span>
@@ -669,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>
@@ -679,7 +699,7 @@ import { Component, ViewEncapsulation } from '@angular/core';
                 You can activate distributed tasks executions and caching by
                 running:
               </p>
-              <pre>nx connect-to-nx-cloud</pre>
+              <pre>nx connect</pre>
               <a href="https://nx.app/?utm_source=nx-project" target="_blank" rel="noreferrer"> What is Nx Cloud? </a>
             </div>
             <a id="nx-repo" class="button-pill rounded shadow" href="https://github.com/nrwl/nx?utm_source=nx-project" target="_blank" rel="noreferrer">
@@ -722,9 +742,28 @@ import { Component, ViewEncapsulation } from '@angular/core';
               Add UI library
             </summary>
             <pre><span># Generate UI lib</span>
-nx g @nx/angular:lib ui
+nx g &#64;nx/angular:lib ui
 <span># Add a component</span>
-nx g @nx/angular:component button --project ui</pre>
+nx g &#64;nx/angular:component ui/src/lib/button</pre>
+          </details>
+          <details>
+            <summary>
+              <svg
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth="2"
+                  d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
+                />
+              </svg>
+              View project details
+            </summary>
+            <pre>nx show project <%= appName %> --web</pre>
           </details>
           <details>
             <summary>

package/src/generators/application/files/ng-module/src/main.ts__tpl__

@@ -1,11 +1,5 @@
-import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';<% if(installedAngularInfo.major === 14) { %>
-import { enableProdMode } from '@angular/core';<% } %>
-import { AppModule } from './app/app.module';<% if(installedAngularInfo.major === 14) { %>
-import { environment } from './environments/environment';
-
-if(environment.production) {
-  enableProdMode();
-}<% } %>
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { AppModule } from './app/app.module';
 
 platformBrowserDynamic()
   .bootstrapModule(AppModule)

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/app.component.ts__tpl__

@@ -7,9 +7,11 @@ import { NxWelcomeComponent } from './nx-welcome.component';<% } %>
   imports: [<% if(!minimal) { %>NxWelcomeComponent, <% } %><% if(routing) { %>RouterModule<% } %>],
   selector: '<%= rootSelector %>',<% if(!inlineTemplate) { %>
   templateUrl: './app.component.html',<% } else { %>
-  template: `<% if(minimal) { %><h1>Welcome <%= appName %></h1><% } else { %><<%= nxWelcomeSelector %>></<%= nxWelcomeSelector %>><% } %> <% if(routing) { %><router-outlet></router-outlet><% } %>`,<% } %><% if(!inlineStyle) { %>
+  template: `<% if(minimal) { %><h1>Welcome <%= appName %></h1><% } else { %><<%= nxWelcomeSelector %>></<%= nxWelcomeSelector %>><% } %> <% if(routing) { %><router-outlet></router-outlet><% } %>`,<% } %><% if (angularMajorVersion < 17) { if(!inlineStyle) { %>
   styleUrls: ['./app.component.<%= style %>'],<% } else { %>
-  styles: [''],<% } %><% if(viewEncapsulation) { %>
+  styles: [``],<% } %><% } else { if(!inlineStyle) { %>
+  styleUrl: './app.component.<%= style %>',<% } else { %>
+  styles: ``,<% } %><% } %><% if(viewEncapsulation) { %>
   encapsulation: ViewEncapsulation.<%= viewEncapsulation %>,<% } %>
 })
 export class AppComponent {<% if(!minimal) { %>

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

@@ -1,7 +1,7 @@
-import { ApplicationConfig } from <% if (installedAngularInfo.major >= 16) { %>'@angular/core';<% } else { %>'@angular/platform-browser';<% } %><% if (routing) { %>
-import { provideRouter, withEnabledBlockingInitialNavigation } from '@angular/router';
+import { ApplicationConfig } from <% if (angularMajorVersion >= 16) { %>'@angular/core';<% } else { %>'@angular/platform-browser';<% } %><% if (routing) { %>
+import { provideRouter } from '@angular/router';
 import { appRoutes } from './app.routes';<% } %>
 
 export const appConfig: ApplicationConfig = {
-  providers: [<% if (routing) { %>provideRouter(appRoutes, withEnabledBlockingInitialNavigation()) <% } %>]
+  providers: [<% if (routing) { %>provideRouter(appRoutes) <% } %>]
 };

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

@@ -286,6 +286,15 @@ import { CommonModule } from '@angular/common';
       .nx-console svg {
         color: rgba(0, 122, 204, 1);
       }
+      .nx-console-jetbrains {
+        margin-top: 2rem;
+      }
+      .nx-console-jetbrains:hover {
+        background-color: rgba(255, 49, 140, 1);
+      }
+      .nx-console-jetbrains svg {
+        color: rgba(255, 49, 140, 1);
+      }
       #nx-repo:hover {
         background-color: rgba(24, 23, 23, 1);
       }
@@ -642,24 +651,35 @@ import { CommonModule } from '@angular/common';
               </svg>
               <span>
                 Install Nx Console for VSCode
-                <span>The official VSCode plugin for Nx.</span>
+                <span>The official VSCode extension for Nx.</span>
               </span>
             </a>
             <a
-              class="button-pill rounded shadow nx-console"
+              class="button-pill rounded shadow nx-console-jetbrains"
               href="https://plugins.jetbrains.com/plugin/21060-nx-console"
               target="_blank"
               rel="noreferrer"
             >
               <svg
-                fill="currentColor"
-                role="img"
-                viewBox="0 0 24 24"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <title>IntelliJ</title>
-                <path d="M0 0v24h24V0zm3.723 3.111h5v1.834h-1.39v6.277h1.39v1.834h-5v-1.834h1.444V4.945H3.723zm11.055 0H17v6.5c0 .612-.055 1.111-.222 1.556-.167.444-.39.777-.723 1.11-.277.279-.666.557-1.11.668a3.933 3.933 0 0 1-1.445.278c-.778 0-1.444-.167-1.944-.445a4.81 4.81 0 0 1-1.279-1.056l1.39-1.555c.277.334.555.555.833.722.277.167.611.278.945.278.389 0 .721-.111 1-.389.221-.278.333-.667.333-1.278zM2.222 19.5h9V21h-9z"></path>
-              </svg>
+                  height="48"
+                  width="48"
+                  viewBox="20 20 60 60"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path d="m22.5 22.5h60v60h-60z" />
+                  <g fill="#fff">
+                    <path d="m29.03 71.25h22.5v3.75h-22.5z" />
+                    <path d="m28.09 38 1.67-1.58a1.88 1.88 0 0 0 1.47.87c.64 0 1.06-.44 1.06-1.31v-5.98h2.58v6a3.48 3.48 0 0 1 -.87 2.6 3.56 3.56 0 0 1 -2.57.95 3.84 3.84 0 0 1 -3.34-1.55z" />
+                    <path d="m36 30h7.53v2.19h-5v1.44h4.49v2h-4.42v1.49h5v2.21h-7.6z" />
+                    <path d="m47.23 32.29h-2.8v-2.29h8.21v2.27h-2.81v7.1h-2.6z" />
+                    <path d="m29.13 43.08h4.42a3.53 3.53 0 0 1 2.55.83 2.09 2.09 0 0 1 .6 1.53 2.16 2.16 0 0 1 -1.44 2.09 2.27 2.27 0 0 1 1.86 2.29c0 1.61-1.31 2.59-3.55 2.59h-4.44zm5 2.89c0-.52-.42-.8-1.18-.8h-1.29v1.64h1.24c.79 0 1.25-.26 1.25-.81zm-.9 2.66h-1.57v1.73h1.62c.8 0 1.24-.31 1.24-.86 0-.5-.4-.87-1.27-.87z" />
+                    <path d="m38 43.08h4.1a4.19 4.19 0 0 1 3 1 2.93 2.93 0 0 1 .9 2.19 3 3 0 0 1 -1.93 2.89l2.24 3.27h-3l-1.88-2.84h-.87v2.84h-2.56zm4 4.5c.87 0 1.39-.43 1.39-1.11 0-.75-.54-1.12-1.4-1.12h-1.44v2.26z" />
+                    <path d="m49.59 43h2.5l4 9.44h-2.79l-.67-1.69h-3.63l-.67 1.69h-2.71zm2.27 5.73-1-2.65-1.06 2.65z" />
+                    <path d="m56.46 43.05h2.6v9.37h-2.6z" />
+                    <path d="m60.06 43.05h2.42l3.37 5v-5h2.57v9.37h-2.26l-3.53-5.14v5.14h-2.57z" />
+                    <path d="m68.86 51 1.45-1.73a4.84 4.84 0 0 0 3 1.13c.71 0 1.08-.24 1.08-.65 0-.4-.31-.6-1.59-.91-2-.46-3.53-1-3.53-2.93 0-1.74 1.37-3 3.62-3a5.89 5.89 0 0 1 3.86 1.25l-1.26 1.84a4.63 4.63 0 0 0 -2.62-.92c-.63 0-.94.25-.94.6 0 .42.32.61 1.63.91 2.14.46 3.44 1.16 3.44 2.91 0 1.91-1.51 3-3.79 3a6.58 6.58 0 0 1 -4.35-1.5z" />
+                  </g>
+                </svg>
               <span>
                 Install Nx Console for JetBrains
                 <span>Available for WebStorm, Intellij IDEA Ultimate and more!</span>
@@ -672,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>
@@ -682,7 +702,7 @@ import { CommonModule } from '@angular/common';
                 You can activate distributed tasks executions and caching by
                 running:
               </p>
-              <pre>nx connect-to-nx-cloud</pre>
+              <pre>nx connect</pre>
               <a href="https://nx.app/?utm_source=nx-project" target="_blank" rel="noreferrer"> What is Nx Cloud? </a>
             </div>
             <a id="nx-repo" class="button-pill rounded shadow" href="https://github.com/nrwl/nx?utm_source=nx-project" target="_blank" rel="noreferrer">
@@ -725,9 +745,28 @@ import { CommonModule } from '@angular/common';
               Add UI library
             </summary>
             <pre><span># Generate UI lib</span>
-nx g @nx/angular:lib ui
+nx g &#64;nx/angular:lib ui
 <span># Add a component</span>
-nx g @nx/angular:component button --project ui</pre>
+nx g &#64;nx/angular:component ui/src/lib/button</pre>
+          </details>
+          <details>
+            <summary>
+              <svg
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth="2"
+                  d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
+                />
+              </svg>
+              View project details
+            </summary>
+            <pre>nx show project <%= appName %> --web</pre>
           </details>
           <details>
             <summary>

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

@@ -1,11 +1,7 @@
 import { bootstrapApplication } from '@angular/platform-browser';
 import { appConfig } from './app/app.config';
-import { AppComponent } from './app/app.component';<% if(installedAngularInfo.major === 14) { %>
-import { enableProdMode } from '@angular/core';
-import { environment } from './environments/environment';
+import { AppComponent } from './app/app.component';
 
-if(environment.production) {
-  enableProdMode();
-}<% } %>
-
-bootstrapApplication(AppComponent, appConfig).catch((err) => console.error(err));
+bootstrapApplication(AppComponent, appConfig).catch((err) =>
+  console.error(err)
+);

package/src/generators/application/lib/add-e2e.js

@@ -3,9 +3,14 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.addE2e = void 0;
 const devkit_1 = require("@nx/devkit");
 const versions_1 = require("../../../utils/versions");
-const cypress_1 = require("@nx/cypress");
+const version_utils_1 = require("../../utils/version-utils");
 async function addE2e(tree, options) {
+    // since e2e are separate projects, default to adding plugins
+    const nxJson = (0, devkit_1.readNxJson)(tree);
+    const addPlugin = process.env.NX_ADD_PLUGINS !== 'false' &&
+        nxJson.useInferencePlugins !== false;
     if (options.e2eTestRunner === 'cypress') {
+        const { configurationGenerator } = (0, devkit_1.ensurePackage)('@nx/cypress', versions_1.nxVersion);
         // TODO: This can call `@nx/web:static-config` generator when ready
         addFileServerTarget(tree, options, 'serve-static');
         (0, devkit_1.addProjectConfiguration)(tree, options.e2eProjectName, {
@@ -16,18 +21,20 @@ async function addE2e(tree, options) {
             tags: [],
             implicitDependencies: [options.name],
         });
-        await (0, cypress_1.configurationGenerator)(tree, {
+        await configurationGenerator(tree, {
             project: options.e2eProjectName,
             directory: 'src',
             linter: options.linter,
             skipPackageJson: options.skipPackageJson,
             skipFormat: true,
-            devServerTarget: `${options.name}:serve:development`,
+            devServerTarget: `${options.name}:${options.e2eWebServerTarget}:development`,
+            baseUrl: options.e2eWebServerAddress,
             rootProject: options.rootProject,
+            addPlugin,
         });
     }
     else if (options.e2eTestRunner === 'playwright') {
-        const { configurationGenerator: playwrightConfigurationGenerator } = (0, devkit_1.ensurePackage)('@nx/playwright', versions_1.nxVersion);
+        const { configurationGenerator } = (0, devkit_1.ensurePackage)('@nx/playwright', versions_1.nxVersion);
         (0, devkit_1.addProjectConfiguration)(tree, options.e2eProjectName, {
             projectType: 'application',
             root: options.e2eProjectRoot,
@@ -35,7 +42,7 @@ async function addE2e(tree, options) {
             targets: {},
             implicitDependencies: [options.name],
         });
-        await playwrightConfigurationGenerator(tree, {
+        await configurationGenerator(tree, {
             project: options.e2eProjectName,
             skipFormat: true,
             skipPackageJson: options.skipPackageJson,
@@ -43,21 +50,28 @@ async function addE2e(tree, options) {
             js: false,
             linter: options.linter,
             setParserOptionsProject: options.setParserOptionsProject,
-            webServerCommand: `${(0, devkit_1.getPackageManagerCommand)().exec} nx serve ${options.name}`,
-            webServerAddress: `http://localhost:${options.port ?? 4200}`,
+            webServerCommand: `${(0, devkit_1.getPackageManagerCommand)().exec} nx ${options.e2eWebServerTarget} ${options.name}`,
+            webServerAddress: options.e2eWebServerAddress,
             rootProject: options.rootProject,
+            addPlugin,
         });
     }
 }
 exports.addE2e = addE2e;
 function addFileServerTarget(tree, options, targetName) {
     (0, devkit_1.addDependenciesToPackageJson)(tree, {}, { '@nx/web': versions_1.nxVersion });
+    const { major: angularMajorVersion } = (0, version_utils_1.getInstalledAngularVersionInfo)(tree);
+    const isUsingApplicationBuilder = angularMajorVersion >= 17 && options.bundler === 'esbuild';
     const projectConfig = (0, devkit_1.readProjectConfiguration)(tree, options.name);
     projectConfig.targets[targetName] = {
         executor: '@nx/web:file-server',
         options: {
             buildTarget: `${options.name}:build`,
-            port: options.port,
+            port: options.e2ePort,
+            staticFilePath: isUsingApplicationBuilder
+                ? (0, devkit_1.joinPathFragments)(options.outputPath, 'browser')
+                : undefined,
+            spa: true,
         },
     };
     (0, devkit_1.updateProjectConfiguration)(tree, options.name, projectConfig);

package/src/generators/application/lib/add-unit-test-runner.js

@@ -1,31 +1,16 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.addUnitTestRunner = void 0;
-const devkit_1 = require("@nx/devkit");
-const jest_1 = require("@nx/jest");
 const test_runners_1 = require("../../../utils/test-runners");
+const add_jest_1 = require("../../utils/add-jest");
 async function addUnitTestRunner(host, options) {
     if (options.unitTestRunner === test_runners_1.UnitTestRunner.Jest) {
-        await (0, jest_1.configurationGenerator)(host, {
-            project: options.name,
-            setupFile: 'angular',
-            supportTsx: false,
-            skipSerializers: false,
+        await (0, add_jest_1.addJest)(host, {
+            name: options.name,
+            projectRoot: options.appProjectRoot,
             skipPackageJson: options.skipPackageJson,
-            skipFormat: true,
+            strict: options.strict,
         });
-        const setupFile = (0, devkit_1.joinPathFragments)(options.appProjectRoot, 'src', 'test-setup.ts');
-        if (options.strict && host.exists(setupFile)) {
-            const contents = host.read(setupFile, 'utf-8');
-            host.write(setupFile, `// @ts-expect-error https://thymikee.github.io/jest-preset-angular/docs/getting-started/test-environment
-globalThis.ngJest = {
-  testEnvironmentOptions: {
-    errorOnUnknownElements: true,
-    errorOnUnknownProperties: true,
-  },
-};
-${contents}`);
-        }
     }
 }
 exports.addUnitTestRunner = addUnitTestRunner;

package/src/generators/application/lib/create-files.js

@@ -3,13 +3,19 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.createFiles = void 0;
 const devkit_1 = require("@nx/devkit");
 const js_1 = require("@nx/js");
-const create_ts_config_1 = require("../../utils/create-ts-config");
+const update_project_root_tsconfig_1 = require("../../utils/update-project-root-tsconfig");
 const test_runners_1 = require("../../../utils/test-runners");
 const version_utils_1 = require("../../utils/version-utils");
+const selector_1 = require("../../utils/selector");
 async function createFiles(tree, options, rootOffset) {
-    const installedAngularInfo = (0, version_utils_1.getInstalledAngularVersionInfo)(tree);
+    const { major: angularMajorVersion } = (0, version_utils_1.getInstalledAngularVersionInfo)(tree);
+    const isUsingApplicationBuilder = angularMajorVersion >= 17 && options.bundler === 'esbuild';
+    const rootSelector = `${options.prefix}-root`;
+    (0, selector_1.validateHtmlSelector)(rootSelector);
+    const nxWelcomeSelector = `${options.prefix}-nx-welcome`;
+    (0, selector_1.validateHtmlSelector)(nxWelcomeSelector);
     const substitutions = {
-        rootSelector: `${options.prefix}-root`,
+        rootSelector,
         appName: options.name,
         inlineStyle: options.inlineStyle,
         inlineTemplate: options.inlineTemplate,
@@ -18,23 +24,21 @@ async function createFiles(tree, options, rootOffset) {
         unitTesting: options.unitTestRunner !== test_runners_1.UnitTestRunner.None,
         routing: options.routing,
         minimal: options.minimal,
-        nxWelcomeSelector: `${options.prefix}-nx-welcome`,
+        nxWelcomeSelector,
         rootTsConfig: (0, devkit_1.joinPathFragments)(rootOffset, (0, js_1.getRootTsConfigFileName)(tree)),
-        installedAngularInfo,
+        angularMajorVersion,
         rootOffset,
+        isUsingApplicationBuilder,
         tpl: '',
     };
     (0, devkit_1.generateFiles)(tree, (0, devkit_1.joinPathFragments)(__dirname, '../files/base'), options.appProjectRoot, substitutions);
-    if (installedAngularInfo.major === 14) {
-        (0, devkit_1.generateFiles)(tree, (0, devkit_1.joinPathFragments)(__dirname, '../files/v14'), options.appProjectRoot, substitutions);
-    }
     if (options.standalone) {
         (0, devkit_1.generateFiles)(tree, (0, devkit_1.joinPathFragments)(__dirname, '../files/standalone-components'), options.appProjectRoot, substitutions);
     }
     else {
-        await (0, devkit_1.generateFiles)(tree, (0, devkit_1.joinPathFragments)(__dirname, '../files/ng-module'), options.appProjectRoot, substitutions);
+        (0, devkit_1.generateFiles)(tree, (0, devkit_1.joinPathFragments)(__dirname, '../files/ng-module'), options.appProjectRoot, substitutions);
     }
-    (0, create_ts_config_1.createTsConfig)(tree, options.appProjectRoot, 'app', options, (0, js_1.getRelativePathToRootTsConfig)(tree, options.appProjectRoot));
+    (0, update_project_root_tsconfig_1.updateProjectRootTsConfig)(tree, options.appProjectRoot, (0, js_1.getRelativePathToRootTsConfig)(tree, options.appProjectRoot), options.rootProject);
     if (!options.routing) {
         tree.delete((0, devkit_1.joinPathFragments)(options.appProjectRoot, '/src/app/app.routes.ts'));
     }

package/src/generators/application/lib/create-project.d.ts

@@ -1,3 +1,3 @@
-import type { Tree } from '@nx/devkit';
+import { Tree } from '@nx/devkit';
 import type { NormalizedSchema } from './normalized-schema';
 export declare function createProject(tree: Tree, options: NormalizedSchema): void;

package/src/generators/application/lib/create-project.js

@@ -3,65 +3,75 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.createProject = void 0;
 const devkit_1 = require("@nx/devkit");
 const version_utils_1 = require("../../utils/version-utils");
+const add_build_target_defaults_1 = require("@nx/devkit/src/generators/add-build-target-defaults");
 function createProject(tree, options) {
-    const installedAngularInfo = (0, version_utils_1.getInstalledAngularVersionInfo)(tree);
+    const { major: angularMajorVersion } = (0, version_utils_1.getInstalledAngularVersionInfo)(tree);
     const buildExecutor = options.bundler === 'webpack'
         ? '@angular-devkit/build-angular:browser'
-        : '@angular-devkit/build-angular:browser-esbuild';
+        : angularMajorVersion >= 17
+            ? '@angular-devkit/build-angular:application'
+            : '@angular-devkit/build-angular:browser-esbuild';
+    const buildTargetOptionName = angularMajorVersion >= 17 ? 'buildTarget' : 'browserTarget';
+    const buildMainOptionName = angularMajorVersion >= 17 && options.bundler === 'esbuild'
+        ? 'browser'
+        : 'main';
+    (0, add_build_target_defaults_1.addBuildTargetDefaults)(tree, buildExecutor);
+    let budgets = undefined;
+    if (options.bundler === 'webpack' || angularMajorVersion >= 17) {
+        if (options.strict) {
+            budgets = [
+                { type: 'initial', maximumWarning: '500kb', maximumError: '1mb' },
+                {
+                    type: 'anyComponentStyle',
+                    maximumWarning: '2kb',
+                    maximumError: '4kb',
+                },
+            ];
+        }
+        else {
+            budgets = [
+                { type: 'initial', maximumWarning: '2mb', maximumError: '5mb' },
+                {
+                    type: 'anyComponentStyle',
+                    maximumWarning: '6kb',
+                    maximumError: '10kb',
+                },
+            ];
+        }
+    }
+    const inlineStyleLanguage = options?.style !== 'css' ? options.style : undefined;
     const project = {
         name: options.name,
         projectType: 'application',
         prefix: options.prefix,
         root: options.appProjectRoot,
-        sourceRoot: `${options.appProjectRoot}/src`,
+        sourceRoot: options.appProjectSourceRoot,
         tags: options.parsedTags,
         targets: {
             build: {
                 executor: buildExecutor,
                 outputs: ['{options.outputPath}'],
                 options: {
-                    outputPath: `dist/${!options.rootProject ? options.appProjectRoot : options.name}`,
-                    index: `${options.appProjectRoot}/src/index.html`,
-                    main: `${options.appProjectRoot}/src/main.ts`,
-                    polyfills: installedAngularInfo.major === 14
-                        ? `${options.appProjectRoot}/src/polyfills.ts`
-                        : ['zone.js'],
+                    outputPath: options.outputPath,
+                    index: `${options.appProjectSourceRoot}/index.html`,
+                    [buildMainOptionName]: `${options.appProjectSourceRoot}/main.ts`,
+                    polyfills: ['zone.js'],
                     tsConfig: `${options.appProjectRoot}/tsconfig.app.json`,
+                    inlineStyleLanguage,
                     assets: [
-                        `${options.appProjectRoot}/src/favicon.ico`,
-                        `${options.appProjectRoot}/src/assets`,
+                        `${options.appProjectSourceRoot}/favicon.ico`,
+                        `${options.appProjectSourceRoot}/assets`,
                     ],
-                    styles: [`${options.appProjectRoot}/src/styles.${options.style}`],
+                    styles: [`${options.appProjectSourceRoot}/styles.${options.style}`],
                     scripts: [],
                 },
                 configurations: {
                     production: {
-                        budgets: options.bundler === 'webpack'
-                            ? [
-                                {
-                                    type: 'initial',
-                                    maximumWarning: '500kb',
-                                    maximumError: '1mb',
-                                },
-                                {
-                                    type: 'anyComponentStyle',
-                                    maximumWarning: '2kb',
-                                    maximumError: '4kb',
-                                },
-                            ]
-                            : undefined,
-                        fileReplacements: installedAngularInfo.major === 14
-                            ? [
-                                {
-                                    replace: `${options.appProjectRoot}/src/environments/environment.ts`,
-                                    with: `${options.appProjectRoot}/src/environments/environment.prod.ts`,
-                                },
-                            ]
-                            : undefined,
+                        budgets,
                         outputHashing: 'all',
                     },
                     development: {
-                        buildOptimizer: false,
+                        buildOptimizer: options.bundler === 'webpack' ? false : undefined,
                         optimization: false,
                         vendorChunk: options.bundler === 'webpack' ? true : undefined,
                         extractLicenses: false,
@@ -80,10 +90,10 @@ function createProject(tree, options) {
                     : undefined,
                 configurations: {
                     production: {
-                        browserTarget: `${options.name}:build:production`,
+                        [buildTargetOptionName]: `${options.name}:build:production`,
                     },
                     development: {
-                        browserTarget: `${options.name}:build:development`,
+                        [buildTargetOptionName]: `${options.name}:build:development`,
                     },
                 },
                 defaultConfiguration: 'development',
@@ -91,7 +101,7 @@ function createProject(tree, options) {
             'extract-i18n': {
                 executor: '@angular-devkit/build-angular:extract-i18n',
                 options: {
-                    browserTarget: `${options.name}:build`,
+                    [buildTargetOptionName]: `${options.name}:build`,
                 },
             },
         },

package/src/generators/application/lib/index.d.ts

@@ -8,4 +8,5 @@ export * from './enable-strict-type-checking';
 export * from './normalize-options';
 export * from './normalized-schema';
 export * from './set-app-strict-default';
+export * from './set-generator-defaults';
 export * from './update-editor-tsconfig';

package/src/generators/application/lib/index.js

@@ -11,4 +11,5 @@ tslib_1.__exportStar(require("./enable-strict-type-checking"), exports);
 tslib_1.__exportStar(require("./normalize-options"), exports);
 tslib_1.__exportStar(require("./normalized-schema"), exports);
 tslib_1.__exportStar(require("./set-app-strict-default"), exports);
+tslib_1.__exportStar(require("./set-generator-defaults"), exports);
 tslib_1.__exportStar(require("./update-editor-tsconfig"), exports);

package/src/generators/application/lib/normalize-options.d.ts

@@ -1,4 +1,4 @@
-import { Tree } from '@nx/devkit';
+import { type Tree } from '@nx/devkit';
 import type { Schema } from '../schema';
 import type { NormalizedSchema } from './normalized-schema';
 export declare function normalizeOptions(host: Tree, options: Partial<Schema>): Promise<NormalizedSchema>;