@nx/angular 17.0.4 → 17.0.6

package/src/executors/utilities/{ng-packagr/tailwindcss.js → tailwindcss.js}

@@ -1,10 +1,19 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getTailwindPostCssPlugin = exports.getTailwindConfigPath = exports.getTailwindSetup = void 0;
+exports.getTailwindPostCssPlugins = exports.getTailwindSetup = exports.tailwindDirectives = void 0;
 const devkit_1 = require("@nx/devkit");
 const devkit_2 = require("@nx/devkit");
 const fs_1 = require("fs");
 const path_1 = require("path");
+const postcssImport = require("postcss-import");
+exports.tailwindDirectives = [
+    '@tailwind',
+    '@apply',
+    '@layer',
+    '@variants',
+    '@responsive',
+    '@screen',
+];
 function getTailwindSetup(basePath, tailwindConfig) {
     let tailwindConfigPath = tailwindConfig;
     if (!tailwindConfigPath) {
@@ -49,8 +58,16 @@ function getTailwindConfigPath(projectRoot, workspaceRoot) {
     }
     return undefined;
 }
-exports.getTailwindConfigPath = getTailwindConfigPath;
-function getTailwindPostCssPlugin({ tailwindConfigPath, tailwindPackagePath, }) {
-    return require(tailwindPackagePath)({ config: tailwindConfigPath });
+function getTailwindPostCssPlugins({ tailwindConfigPath, tailwindPackagePath }, includePaths, watch) {
+    if (process.env['TAILWIND_MODE'] === undefined) {
+        process.env['TAILWIND_MODE'] = watch ? 'watch' : 'build';
+    }
+    return [
+        postcssImport({
+            addModulesDirectories: includePaths ?? [],
+            resolve: (url) => (url.startsWith('~') ? url.substring(1) : url),
+        }),
+        require(tailwindPackagePath)({ config: tailwindConfigPath }),
+    ];
 }
-exports.getTailwindPostCssPlugin = getTailwindPostCssPlugin;
+exports.getTailwindPostCssPlugins = getTailwindPostCssPlugins;

package/src/executors/utilities/typescript.js

@@ -9,9 +9,9 @@
  */
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.parseRemappedTsConfigAndMergeDefaults = void 0;
+const ng_compiler_cli_1 = require("ng-packagr/lib/utils/ng-compiler-cli");
 const path_1 = require("path");
 const ts = require("typescript");
-const ng_compiler_cli_1 = require("./ng-compiler-cli");
 async function readDefaultTsConfig(fileName) {
     // these options are mandatory
     const extraOptions = {

package/src/generators/add-linting/add-linting.d.ts

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

package/src/generators/add-linting/add-linting.js

@@ -2,12 +2,11 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.addLintingGenerator = void 0;
 const devkit_1 = require("@nx/devkit");
-const string_utils_1 = require("@nx/devkit/src/utils/string-utils");
 const eslint_1 = require("@nx/eslint");
-const global_eslint_config_1 = require("@nx/eslint/src/generators/init/global-eslint-config");
-const eslint_file_1 = require("@nx/eslint/src/generators/utils/eslint-file");
+const lint_project_1 = require("@nx/eslint/src/generators/lint-project/lint-project");
 const add_angular_eslint_dependencies_1 = require("./lib/add-angular-eslint-dependencies");
-const buildable_project_1 = require("./lib/buildable-project");
+const eslint_file_1 = require("@nx/eslint/src/generators/utils/eslint-file");
+const string_utils_1 = require("@nx/devkit/src/utils/string-utils");
 async function addLintingGenerator(tree, options) {
     const tasks = [];
     const rootProject = options.projectRoot === '.' || options.projectRoot === '';
@@ -18,11 +17,13 @@ async function addLintingGenerator(tree, options) {
             (0, devkit_1.joinPathFragments)(options.projectRoot, 'tsconfig.app.json'),
         ],
         unitTestRunner: options.unitTestRunner,
+        eslintFilePatterns: [
+            (0, lint_project_1.mapLintPattern)(options.projectRoot, 'ts', rootProject),
+            (0, lint_project_1.mapLintPattern)(options.projectRoot, 'html', rootProject),
+        ],
         setParserOptionsProject: options.setParserOptionsProject,
         skipFormat: true,
         rootProject: rootProject,
-        addPlugin: false,
-        addExplicitTargets: true,
     });
     tasks.push(lintTask);
     if ((0, eslint_file_1.isEslintConfigSupported)(tree)) {
@@ -32,7 +33,6 @@ async function addLintingGenerator(tree, options) {
             .read((0, devkit_1.joinPathFragments)(options.projectRoot, eslintFile), 'utf8')
             .includes(`${options.projectRoot}/tsconfig.*?.json`);
         (0, eslint_file_1.replaceOverridesInLintConfig)(tree, options.projectRoot, [
-            ...(rootProject ? [global_eslint_config_1.typeScriptOverride, global_eslint_config_1.javaScriptOverride] : []),
             {
                 files: ['*.ts'],
                 ...(hasParserOptions
@@ -74,7 +74,7 @@ async function addLintingGenerator(tree, options) {
                  */
                 rules: {},
             },
-            ...((0, buildable_project_1.isBuildableLibraryProject)(tree, options.projectName)
+            ...(isBuildableLibraryProject(tree, options.projectName)
                 ? [
                     {
                         files: ['*.json'],
@@ -88,7 +88,7 @@ async function addLintingGenerator(tree, options) {
         ]);
     }
     if (!options.skipPackageJson) {
-        const installTask = (0, add_angular_eslint_dependencies_1.addAngularEsLintDependencies)(tree, options.projectName);
+        const installTask = (0, add_angular_eslint_dependencies_1.addAngularEsLintDependencies)(tree);
         tasks.push(installTask);
     }
     if (!options.skipFormat) {
@@ -97,4 +97,10 @@ async function addLintingGenerator(tree, options) {
     return (0, devkit_1.runTasksInSerial)(...tasks);
 }
 exports.addLintingGenerator = addLintingGenerator;
+function isBuildableLibraryProject(tree, projectName) {
+    const projectConfig = (0, devkit_1.readProjectConfiguration)(tree, projectName);
+    return (projectConfig.projectType === 'library' &&
+        projectConfig.targets?.build &&
+        !!projectConfig.targets.build);
+}
 exports.default = addLintingGenerator;

package/src/generators/add-linting/lib/add-angular-eslint-dependencies.d.ts

@@ -1,2 +1,2 @@
-import { type GeneratorCallback, type Tree } from '@nx/devkit';
-export declare function addAngularEsLintDependencies(tree: Tree, projectName: string): GeneratorCallback;
+import type { GeneratorCallback, Tree } from '@nx/devkit';
+export declare function addAngularEsLintDependencies(tree: Tree): GeneratorCallback;

package/src/generators/add-linting/lib/add-angular-eslint-dependencies.js

@@ -3,18 +3,14 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.addAngularEsLintDependencies = void 0;
 const devkit_1 = require("@nx/devkit");
 const version_utils_1 = require("../../utils/version-utils");
-const buildable_project_1 = require("./buildable-project");
-function addAngularEsLintDependencies(tree, projectName) {
+function addAngularEsLintDependencies(tree) {
     const angularEslintVersionToInstall = (0, version_utils_1.versions)(tree).angularEslintVersion;
-    const devDependencies = {
+    const jsoncEslintParserVersionToInstall = (0, version_utils_1.versions)(tree).jsoncEslintParserVersion;
+    return (0, devkit_1.addDependenciesToPackageJson)(tree, {}, {
         '@angular-eslint/eslint-plugin': angularEslintVersionToInstall,
         '@angular-eslint/eslint-plugin-template': angularEslintVersionToInstall,
         '@angular-eslint/template-parser': angularEslintVersionToInstall,
-    };
-    if ((0, buildable_project_1.isBuildableLibraryProject)(tree, projectName)) {
-        const jsoncEslintParserVersionToInstall = (0, version_utils_1.versions)(tree).jsoncEslintParserVersion;
-        devDependencies['jsonc-eslint-parser'] = jsoncEslintParserVersionToInstall;
-    }
-    return (0, devkit_1.addDependenciesToPackageJson)(tree, {}, devDependencies);
+        'jsonc-eslint-parser': jsoncEslintParserVersionToInstall,
+    });
 }
 exports.addAngularEsLintDependencies = addAngularEsLintDependencies;

package/src/generators/add-linting/lib/create-eslint-configuration.d.ts

@@ -29,7 +29,7 @@ export declare const extendAngularEslintJson: (json: Linter.Config, options: Esl
             [name: string]: boolean;
         };
         globals?: {
-            [name: string]: boolean | "readable" | "off" | "readonly" | "writable" | "writeable";
+            [name: string]: boolean | "off" | "readonly" | "readable" | "writable" | "writeable";
         };
         noInlineConfig?: boolean;
         overrides?: Linter.ConfigOverride<Linter.RulesRecord>[];
@@ -61,7 +61,7 @@ export declare const extendAngularEslintJson: (json: Linter.Config, options: Esl
     };
     extends?: string | string[];
     globals?: {
-        [name: string]: boolean | "readable" | "off" | "readonly" | "writable" | "writeable";
+        [name: string]: boolean | "off" | "readonly" | "readable" | "writable" | "writeable";
     };
     noInlineConfig?: boolean;
     parser?: string;

package/src/generators/add-linting/schema.json

@@ -1,5 +1,5 @@
 {
-  "$schema": "https://json-schema.org/schema",
+  "$schema": "http://json-schema.org/schema",
   "$id": "NxAngularAddLintingGenerator",
   "title": "Add linting to an Angular project.",
   "description": "Adds linting configuration to an Angular project.",

package/src/generators/application/application.js

@@ -2,13 +2,12 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.applicationGeneratorInternal = exports.applicationGenerator = void 0;
 const devkit_1 = require("@nx/devkit");
-const js_1 = require("@nx/js");
 const init_1 = require("../init/init");
-const setup_ssr_1 = require("../setup-ssr/setup-ssr");
 const setup_tailwind_1 = require("../setup-tailwind/setup-tailwind");
-const ensure_angular_dependencies_1 = require("../utils/ensure-angular-dependencies");
+const version_utils_1 = require("../utils/version-utils");
 const lib_1 = require("./lib");
-const log_show_project_command_1 = require("@nx/devkit/src/utils/log-show-project-command");
+const semver_1 = require("semver");
+const enquirer_1 = require("enquirer");
 async function applicationGenerator(tree, schema) {
     return await applicationGeneratorInternal(tree, {
         projectNameAndRootFormat: 'derived',
@@ -17,19 +16,26 @@ async function applicationGenerator(tree, schema) {
 }
 exports.applicationGenerator = applicationGenerator;
 async function applicationGeneratorInternal(tree, schema) {
+    const installedAngularVersionInfo = (0, version_utils_1.getInstalledAngularVersionInfo)(tree);
+    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.`);
+    }
+    if ((0, semver_1.gte)(installedAngularVersionInfo.version, '14.1.0') &&
+        schema.standalone === undefined &&
+        process.env.NX_INTERACTIVE === 'true') {
+        schema.standalone = await (0, enquirer_1.prompt)({
+            name: 'standalone-components',
+            message: 'Would you like to use Standalone Components?',
+            type: 'confirm',
+        }).then((a) => a['standalone-components']);
+    }
     const options = await (0, lib_1.normalizeOptions)(tree, schema);
     const rootOffset = (0, devkit_1.offsetFromRoot)(options.appProjectRoot);
-    await (0, js_1.initGenerator)(tree, {
-        ...options,
-        tsConfigName: options.rootProject ? 'tsconfig.json' : 'tsconfig.base.json',
-        js: false,
-        skipFormat: true,
-    });
     await (0, init_1.angularInitGenerator)(tree, {
         ...options,
         skipFormat: true,
     });
-    (0, ensure_angular_dependencies_1.ensureAngularDependencies)(tree);
     (0, lib_1.createProject)(tree, options);
     await (0, lib_1.createFiles)(tree, options, rootOffset);
     if (options.addTailwind) {
@@ -43,7 +49,6 @@ async function applicationGeneratorInternal(tree, schema) {
     await (0, lib_1.addUnitTestRunner)(tree, options);
     await (0, lib_1.addE2e)(tree, options);
     (0, lib_1.updateEditorTsConfig)(tree, options);
-    (0, lib_1.setGeneratorDefaults)(tree, options);
     if (options.rootProject) {
         const nxJson = (0, devkit_1.readNxJson)(tree);
         nxJson.defaultProject = options.name;
@@ -58,18 +63,11 @@ async function applicationGeneratorInternal(tree, schema) {
     else {
         (0, lib_1.setApplicationStrictDefault)(tree, false);
     }
-    if (options.ssr) {
-        await (0, setup_ssr_1.setupSsr)(tree, {
-            project: options.name,
-            standalone: options.standalone,
-        });
-    }
     if (!options.skipFormat) {
         await (0, devkit_1.formatFiles)(tree);
     }
     return () => {
         (0, devkit_1.installPackagesTask)(tree);
-        (0, log_show_project_command_1.logShowProjectCommand)(options.name);
     };
 }
 exports.applicationGeneratorInternal = applicationGeneratorInternal;

package/src/generators/application/files/base/tsconfig.app.json__tpl__

@@ -4,7 +4,7 @@
     "outDir": "<%= rootOffset %>dist/out-tsc",
     "types": []
   },
-  "files": ["src/main.ts"],
+  "files": ["src/main.ts"<% if(installedAngularInfo.major === 14) { %>, "src/polyfills.ts"<% } %>],
   "include": ["src/**/*.d.ts"],
   "exclude": ["jest.config.ts", "src/**/*.test.ts", "src/**/*.spec.ts"]
 }

package/src/generators/application/files/base/tsconfig.json__tpl__

@@ -1,15 +1,11 @@
 {
   "compilerOptions": {
-    "target": "es2022",
-    "useDefineForClassFields": false<% if (isUsingApplicationBuilder) { %>,
-    "esModuleInterop": true<% } %>
+    "target": <% if(installedAngularInfo.major === 14) { %>"es2020"<% } else { %>"es2022"<% } %><% if(installedAngularInfo.major === 15) { %>,
+    "useDefineForClassFields": false<% } %>
   },
   "files": [],
   "include": [],
   "references": [
-    {
-      "path": "./tsconfig.editor.json"
-    },
     {
       "path": "./tsconfig.app.json"
     }

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

@@ -15,9 +15,7 @@ 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/app.component.ts__tpl__

@@ -3,11 +3,9 @@ import { Component<% if(viewEncapsulation) { %>, ViewEncapsulation<% } %> } from
 @Component({
   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 (angularMajorVersion < 17) { if(!inlineStyle) { %>
+  template: `<% if(minimal) { %><h1>Welcome <%= appName %></h1><% } else { %><<%= nxWelcomeSelector %>></<%= nxWelcomeSelector %>><% } %> <% if(routing) { %><router-outlet></router-outlet><% } %>`,<% } %><% if(!inlineStyle) { %>
   styleUrls: ['./app.component.<%= style %>'],<% } else { %>
-  styles: [``],<% } %><% } else { if(!inlineStyle) { %>
-  styleUrl: './app.component.<%= style %>',<% } else { %>
-  styles: ``,<% } %><% } %><% if(viewEncapsulation) { %>
+  styles: [''],<% } %><% if(viewEncapsulation) { %>
   encapsulation: ViewEncapsulation.<%= viewEncapsulation %>,<% } %>
 })
 export class AppComponent {<% if(!minimal) { %>

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

@@ -9,7 +9,7 @@ import { NxWelcomeComponent } from './nx-welcome.component';<% } %>
   declarations: [AppComponent<% if(!minimal) { %>, NxWelcomeComponent<% } %>],
   imports: [
     BrowserModule,<% if(routing) { %>
-    RouterModule.forRoot(appRoutes),<% } %>
+    RouterModule.forRoot(appRoutes, { initialNavigation: 'enabledBlocking' }),<% } %>
   ],
   providers: [],
   bootstrap: [AppComponent],

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

@@ -283,15 +283,6 @@ 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);
       }
@@ -648,35 +639,24 @@ import { Component, ViewEncapsulation } from '@angular/core';
               </svg>
               <span>
                 Install Nx Console for VSCode
-                <span>The official VSCode extension for Nx.</span>
+                <span>The official VSCode plugin for Nx.</span>
               </span>
             </a>
             <a
-              class="button-pill rounded shadow nx-console-jetbrains"
+              class="button-pill rounded shadow nx-console"
               href="https://plugins.jetbrains.com/plugin/21060-nx-console"
               target="_blank"
               rel="noreferrer"
             >
               <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>
+                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>
               <span>
                 Install Nx Console for JetBrains
                 <span>Available for WebStorm, Intellij IDEA Ultimate and more!</span>
@@ -689,7 +669,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>
-                  Nx Cloud
+                  NxCloud
                   <span>
                     Enable faster CI & better DX
                   </span>
@@ -699,7 +679,7 @@ import { Component, ViewEncapsulation } from '@angular/core';
                 You can activate distributed tasks executions and caching by
                 running:
               </p>
-              <pre>nx connect</pre>
+              <pre>nx connect-to-nx-cloud</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">
@@ -742,28 +722,9 @@ import { Component, ViewEncapsulation } from '@angular/core';
               Add UI library
             </summary>
             <pre><span># Generate UI lib</span>
-nx g &#64;nx/angular:lib ui
+nx g @nx/angular:lib ui
 <span># Add a component</span>
-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>
+nx g @nx/angular:component button --project ui</pre>
           </details>
           <details>
             <summary>

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

@@ -1,5 +1,11 @@
-import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-import { AppModule } from './app/app.module';
+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();
+}<% } %>
 
 platformBrowserDynamic()
   .bootstrapModule(AppModule)

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

@@ -11,12 +11,10 @@ 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,11 +7,9 @@ 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 (angularMajorVersion < 17) { if(!inlineStyle) { %>
+  template: `<% if(minimal) { %><h1>Welcome <%= appName %></h1><% } else { %><<%= nxWelcomeSelector %>></<%= nxWelcomeSelector %>><% } %> <% if(routing) { %><router-outlet></router-outlet><% } %>`,<% } %><% if(!inlineStyle) { %>
   styleUrls: ['./app.component.<%= style %>'],<% } else { %>
-  styles: [``],<% } %><% } else { if(!inlineStyle) { %>
-  styleUrl: './app.component.<%= style %>',<% } else { %>
-  styles: ``,<% } %><% } %><% if(viewEncapsulation) { %>
+  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 (angularMajorVersion >= 16) { %>'@angular/core';<% } else { %>'@angular/platform-browser';<% } %><% if (routing) { %>
-import { provideRouter } from '@angular/router';
+import { ApplicationConfig } from <% if (installedAngularInfo.major >= 16) { %>'@angular/core';<% } else { %>'@angular/platform-browser';<% } %><% if (routing) { %>
+import { provideRouter, withEnabledBlockingInitialNavigation } from '@angular/router';
 import { appRoutes } from './app.routes';<% } %>
 
 export const appConfig: ApplicationConfig = {
-  providers: [<% if (routing) { %>provideRouter(appRoutes) <% } %>]
+  providers: [<% if (routing) { %>provideRouter(appRoutes, withEnabledBlockingInitialNavigation()) <% } %>]
 };

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

@@ -286,15 +286,6 @@ 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);
       }
@@ -651,35 +642,24 @@ import { CommonModule } from '@angular/common';
               </svg>
               <span>
                 Install Nx Console for VSCode
-                <span>The official VSCode extension for Nx.</span>
+                <span>The official VSCode plugin for Nx.</span>
               </span>
             </a>
             <a
-              class="button-pill rounded shadow nx-console-jetbrains"
+              class="button-pill rounded shadow nx-console"
               href="https://plugins.jetbrains.com/plugin/21060-nx-console"
               target="_blank"
               rel="noreferrer"
             >
               <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>
+                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>
               <span>
                 Install Nx Console for JetBrains
                 <span>Available for WebStorm, Intellij IDEA Ultimate and more!</span>
@@ -692,7 +672,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>
-                  Nx Cloud
+                  NxCloud
                   <span>
                     Enable faster CI & better DX
                   </span>
@@ -702,7 +682,7 @@ import { CommonModule } from '@angular/common';
                 You can activate distributed tasks executions and caching by
                 running:
               </p>
-              <pre>nx connect</pre>
+              <pre>nx connect-to-nx-cloud</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">
@@ -745,28 +725,9 @@ import { CommonModule } from '@angular/common';
               Add UI library
             </summary>
             <pre><span># Generate UI lib</span>
-nx g &#64;nx/angular:lib ui
+nx g @nx/angular:lib ui
 <span># Add a component</span>
-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>
+nx g @nx/angular:component button --project ui</pre>
           </details>
           <details>
             <summary>

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

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