feat(angular): remove redundant standalone: true from templates for…

… angular v19 or higher (#28879)

Upstream change:
angular/angular-cli@8567267

<!-- Please make sure you have read the submission guidelines before
posting an PR -->
<!--
https://github.com/nrwl/nx/blob/master/CONTRIBUTING.md#-submitting-a-pr
-->

<!-- Please make sure that your commit message follows our format -->
<!-- Example: `fix(nx): must begin with lowercase` -->

<!-- If this is a particularly complex change or feature addition, you
can request a dedicated Nx release for this pull request branch. Mention
someone from the Nx team or the `@nrwl/nx-pipelines-reviewers` and they
will confirm if the PR warrants its own release for testing purposes,
and generate it for you if appropriate. -->

## Current Behavior
<!-- This is the behavior we have today -->

## Expected Behavior
<!-- This is the behavior we should expect with the changes in this PR
-->

## Related Issue(s)
<!-- Please link the issue being fixed so it gets closed when this is
merged. -->

Fixes #

packages/angular/src/generators/application/__snapshots__/application.spec.ts.snap

@@ -128,7 +128,6 @@ exports[`app --minimal should skip "nx-welcome.component.ts" file and references
 import { RouterModule } from '@angular/router';
 
 @Component({
-  standalone: true,
   imports: [RouterModule],
   selector: 'app-root',
   templateUrl: './app.component.html',
@@ -172,7 +171,6 @@ exports[`app --minimal should skip "nx-welcome.component.ts" file and references
 "import { Component } from '@angular/core';
 
 @Component({
-  standalone: true,
   imports: [],
   selector: 'app-root',
   templateUrl: './app.component.html',
@@ -245,7 +243,6 @@ import { RouterModule } from '@angular/router';
 import { NxWelcomeComponent } from './nx-welcome.component';
 
 @Component({
-  standalone: true,
   imports: [NxWelcomeComponent, RouterModule],
   selector: 'app-root',
   templateUrl: './app.component.html',
@@ -313,7 +310,6 @@ exports[`app --standalone should generate a standalone app correctly without rou
 import { NxWelcomeComponent } from './nx-welcome.component';
 
 @Component({
-  standalone: true,
   imports: [NxWelcomeComponent, ],
   selector: 'app-root',
   templateUrl: './app.component.html',

packages/angular/src/generators/application/application.spec.ts

@@ -500,9 +500,14 @@ describe('app', () => {
 
     it('should create Nx specific `nx-welcome.component.ts` file', async () => {
       await generateApp(appTree, 'my-dir/my-app');
-      expect(
-        appTree.read('my-dir/my-app/src/app/nx-welcome.component.ts', 'utf-8')
-      ).toContain('Hello there');
+
+      const nxWelcomeComponentText = appTree.read(
+        'my-dir/my-app/src/app/nx-welcome.component.ts',
+        'utf-8'
+      );
+      expect(nxWelcomeComponentText).not.toContain('standalone: true');
+      expect(nxWelcomeComponentText).toContain('standalone: false');
+      expect(nxWelcomeComponentText).toContain('Hello there');
     });
 
     it('should update the AppComponent spec to target Nx content', async () => {
@@ -956,9 +961,12 @@ describe('app', () => {
         appTree.read('standalone/src/app/app.component.spec.ts', 'utf-8')
       ).toMatchSnapshot();
       expect(appTree.exists('standalone/src/app/app.module.ts')).toBeFalsy();
-      expect(
-        appTree.read('standalone/src/app/nx-welcome.component.ts', 'utf-8')
-      ).toContain('standalone: true');
+      const nxWelcomeComponentText = appTree.read(
+        'standalone/src/app/nx-welcome.component.ts',
+        'utf-8'
+      );
+      expect(nxWelcomeComponentText).not.toContain('standalone: true');
+      expect(nxWelcomeComponentText).not.toContain('standalone: false');
     });
 
     it('should generate a standalone app correctly without routing', async () => {
@@ -980,9 +988,12 @@ describe('app', () => {
         appTree.read('standalone/src/app/app.component.spec.ts', 'utf-8')
       ).toMatchSnapshot();
       expect(appTree.exists('standalone/src/app/app.module.ts')).toBeFalsy();
-      expect(
-        appTree.read('standalone/src/app/nx-welcome.component.ts', 'utf-8')
-      ).toContain('standalone: true');
+      const nxWelcomeComponentText = appTree.read(
+        'standalone/src/app/nx-welcome.component.ts',
+        'utf-8'
+      );
+      expect(nxWelcomeComponentText).not.toContain('standalone: true');
+      expect(nxWelcomeComponentText).not.toContain('standalone: false');
     });
 
     it('should should not use event coalescing in versions lower than v18', async () => {

packages/angular/src/generators/application/files/nx-welcome/claimed/standalone/src/app/nx-welcome.component.ts__tpl__

@@ -2,8 +2,8 @@ import { Component, ViewEncapsulation } from '@angular/core';
 import { CommonModule } from '@angular/common';
 
 @Component({
-  selector: '<%= nxWelcomeSelector %>',
-  standalone: true,
+  selector: '<%= nxWelcomeSelector %>',<% if (setStandaloneTrue) { %>
+  standalone: true,<% } %>
   imports: [CommonModule],
   template: `
     <!--

packages/angular/src/generators/application/files/nx-welcome/not-configured/standalone/src/app/nx-welcome.component.ts__tpl__

@@ -2,8 +2,8 @@ import { Component, ViewEncapsulation } from '@angular/core';
 import { CommonModule } from '@angular/common';
 
 @Component({
-  selector: '<%= nxWelcomeSelector %>',
-  standalone: true,
+  selector: '<%= nxWelcomeSelector %>',<% if (setStandaloneTrue) { %>
+  standalone: true,<% } %>
   imports: [CommonModule],
   template: `
     <!--

packages/angular/src/generators/application/files/nx-welcome/unclaimed/standalone/src/app/nx-welcome.component.ts__tpl__

@@ -2,8 +2,8 @@ import { Component, ViewEncapsulation } from '@angular/core';
 import { CommonModule } from '@angular/common';
 
 @Component({
-  selector: '<%= nxWelcomeSelector %>',
-  standalone: true,
+  selector: '<%= nxWelcomeSelector %>',<% if (setStandaloneTrue) { %>
+  standalone: true,<% } %>
   imports: [CommonModule],
   template: `
     <!--

packages/angular/src/generators/application/files/standalone-components/src/app/app.component.ts__tpl__

@@ -2,8 +2,8 @@ import { Component<% if(viewEncapsulation) { %>, ViewEncapsulation<% } %> } from
 import { RouterModule } from '@angular/router';<% } %><% if(!minimal) { %>
 import { NxWelcomeComponent } from './nx-welcome.component';<% } %>
 
-@Component({
-  standalone: true,
+@Component({<% if (setStandaloneTrue) { %>
+  standalone: true,<% } %>
   imports: [<% if(!minimal) { %>NxWelcomeComponent, <% } %><% if(routing) { %>RouterModule<% } %>],
   selector: '<%= rootSelector %>',<% if(!inlineTemplate) { %>
   templateUrl: './app.component.html',<% } else { %>

packages/angular/src/generators/application/lib/create-files.ts

@@ -54,7 +54,9 @@ export async function createFiles(
     disableModernClassFieldsBehavior,
     useEventCoalescing: angularMajorVersion >= 18,
     useRouterTestingModule: angularMajorVersion < 18,
-    setStandaloneFalse: angularMajorVersion >= 18,
+    // Angular v19 or higher defaults to true, while v18 or lower defaults to false
+    setStandaloneFalse: angularMajorVersion >= 19,
+    setStandaloneTrue: angularMajorVersion < 19,
     connectCloudUrl,
     tutorialUrl: options.standalone
       ? 'https://nx.dev/getting-started/tutorials/angular-standalone-tutorial?utm_source=nx-project'

packages/angular/src/generators/component/__snapshots__/component.spec.ts.snap

@@ -118,7 +118,6 @@ import { CommonModule } from '@angular/common';
 
 @Component({
   selector: 'example',
-  standalone: true,
   imports: [CommonModule],
   templateUrl: './example.component.html',
   styleUrl: './example.component.css'
@@ -146,7 +145,6 @@ import { CommonModule } from '@angular/common';
 
 @Component({
   selector: 'example',
-  standalone: true,
   imports: [CommonModule],
   templateUrl: './example.component.html',
   styleUrl: './example.component.css'

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

@@ -31,7 +31,10 @@ export async function componentGenerator(tree: Tree, rawOptions: Schema) {
       viewEncapsulation: options.viewEncapsulation,
       displayBlock: options.displayBlock,
       selector: options.selector,
-      setStandaloneFalse: angularMajorVersion >= 18,
+      // Angular v19 or higher defaults to true, while v18 or lower defaults to false
+      setStandalone:
+        (angularMajorVersion >= 19 && !options.standalone) ||
+        (angularMajorVersion < 19 && options.standalone),
       angularMajorVersion,
       tpl: '',
     }

packages/angular/src/generators/component/files/__fileName__.ts__tpl__

@@ -2,7 +2,7 @@ import { <% if(changeDetection !== 'Default') { %>ChangeDetectionStrategy, <% }%
 import { CommonModule } from '@angular/common';<% } %>
 
 @Component({<% if(!skipSelector) {%>
-  selector: '<%= selector %>',<%}%><% if(standalone || setStandaloneFalse) { %>
+  selector: '<%= selector %>',<%}%><% if (setStandalone) { %>
   standalone: <%= standalone %>,<% } %><% if(standalone) { %>
   imports: [CommonModule],<%}%><% if(inlineTemplate) { %>
   template: `<p><%= name %> works!</p>`<% } else { %>

packages/angular/src/generators/directive/__snapshots__/directive.spec.ts.snap

@@ -107,7 +107,6 @@ exports[`directive generator should generate correctly 1`] = `
 
 @Directive({
   selector: '[test]',
-  standalone: true,
 })
 export class TestDirective {
   constructor() {}

packages/angular/src/generators/directive/directive.ts

@@ -19,7 +19,10 @@ export async function directiveGenerator(tree: Tree, schema: Schema) {
       symbolName: options.symbolName,
       fileName: options.fileName,
       standalone: options.standalone,
-      setStandaloneFalse: angularMajorVersion >= 18,
+      // Angular v19 or higher defaults to true, while v18 or lower defaults to false
+      setStandalone:
+        (angularMajorVersion >= 19 && !options.standalone) ||
+        (angularMajorVersion < 19 && options.standalone),
       tpl: '',
     }
   );

packages/angular/src/generators/directive/files/__fileName__.ts__tpl__

@@ -1,7 +1,7 @@
 import { Directive } from '@angular/core';
 
 @Directive({
-  selector: '[<%= selector %>]'<% if(standalone || setStandaloneFalse) { %>,
+  selector: '[<%= selector %>]'<% if (setStandalone) { %>,
   standalone: <%= standalone %><% } %>
 })
 export class <%= symbolName %> {

packages/angular/src/generators/host/__snapshots__/host.spec.ts.snap

@@ -1002,7 +1002,6 @@ import { RouterModule } from '@angular/router';
 import { NxWelcomeComponent } from './nx-welcome.component';
 
 @Component({
-  standalone: true,
   imports: [NxWelcomeComponent, RouterModule],
   selector: 'app-root',
   templateUrl: './app.component.html',

packages/angular/src/generators/library/__snapshots__/library.spec.ts.snap

@@ -8,7 +8,6 @@ import { CommonModule } from '@angular/common';
 
 @Component({
   selector: 'lib-my-lib',
-  standalone: true,
   imports: [CommonModule],
   templateUrl: './my-lib.component.html',
   styleUrl: './my-lib.component.css'
@@ -54,7 +53,6 @@ import { CommonModule } from '@angular/common';
 
 @Component({
   selector: 'lib-my-lib',
-  standalone: true,
   imports: [CommonModule],
   templateUrl: './my-lib.component.html',
   styleUrl: './my-lib.component.css'
@@ -106,7 +104,6 @@ import { CommonModule } from '@angular/common';
 
 @Component({
   selector: 'lib-my-lib',
-  standalone: true,
   imports: [CommonModule],
   templateUrl: './my-lib.component.html',
   styleUrl: './my-lib.component.css'
@@ -148,7 +145,6 @@ import { CommonModule } from '@angular/common';
 
 @Component({
   selector: 'lib-my-lib',
-  standalone: true,
   imports: [CommonModule],
   template: \`<p>my-lib works!</p>\`,
   styles: \`\`,
@@ -167,7 +163,6 @@ import { CommonModule } from '@angular/common';
 
 @Component({
   selector: 'lib-my-lib',
-  standalone: true,
   imports: [CommonModule],
   template: \`<p>my-lib works!</p>\`,
   styles: \`\`
@@ -184,7 +179,6 @@ import { CommonModule } from '@angular/common';
 
 @Component({
   selector: 'lib-my-lib',
-  standalone: true,
   imports: [CommonModule],
   template: \`<p>my-lib works!</p>\`,
   styles: \`\`
@@ -240,7 +234,6 @@ import { CommonModule } from '@angular/common';
 
 @Component({
   selector: 'lib-my-lib',
-  standalone: true,
   imports: [CommonModule],
   templateUrl: './my-lib.component.html',
   styleUrl: './my-lib.component.css'
@@ -354,7 +347,6 @@ import { CommonModule } from '@angular/common';
 
 @Component({
   selector: 'lib-my-lib',
-  standalone: true,
   imports: [CommonModule],
   templateUrl: './my-lib.component.html',
   styleUrl: './my-lib.component.css'
@@ -396,7 +388,6 @@ import { CommonModule } from '@angular/common';
 
 @Component({
   selector: 'lib-my-lib',
-  standalone: true,
   imports: [CommonModule],
   templateUrl: './my-lib.component.html',
   styleUrl: './my-lib.component.css'

packages/angular/src/generators/pipe/__snapshots__/pipe.spec.ts.snap

@@ -134,7 +134,6 @@ exports[`pipe generator should generate correctly 1`] = `
 
 @Pipe({
   name: 'test',
-  standalone: true,
 })
 export class TestPipe implements PipeTransform {
   transform(value: unknown, ...args: unknown[]): unknown {

packages/angular/src/generators/pipe/files/__fileName__.ts__tpl__

@@ -1,7 +1,7 @@
 import { Pipe, PipeTransform } from '@angular/core';
 
 @Pipe({
-  name: '<%= selector %>'<% if(standalone || setStandaloneFalse) { %>,
+  name: '<%= selector %>'<% if (setStandalone) { %>,
   standalone: <%= standalone %><% } %>
 })
 export class <%= symbolName %> implements PipeTransform {

packages/angular/src/generators/pipe/pipe.ts

@@ -25,7 +25,10 @@ export async function pipeGenerator(tree: Tree, rawOptions: Schema) {
       fileName: options.fileName,
       selector: pipeNames.propertyName,
       standalone: options.standalone,
-      setStandaloneFalse: angularMajorVersion >= 18,
+      // Angular v19 or higher defaults to true, while v18 or lower defaults to false
+      setStandalone:
+        (angularMajorVersion >= 19 && !options.standalone) ||
+        (angularMajorVersion < 19 && options.standalone),
       tpl: '',
     }
   );

packages/angular/src/generators/remote/__snapshots__/remote.spec.ts.snap

@@ -573,7 +573,6 @@ import { CommonModule } from '@angular/common';
 import { NxWelcomeComponent } from './nx-welcome.component';
 
 @Component({
-  standalone: true,
   imports: [CommonModule, NxWelcomeComponent],
   selector: 'app-test-entry',
   template: \`<app-nx-welcome></app-nx-welcome>\`,
@@ -639,7 +638,6 @@ import { CommonModule } from '@angular/common';
 import { NxWelcomeComponent } from './nx-welcome.component';
 
 @Component({
-  standalone: true,
   imports: [CommonModule, NxWelcomeComponent],
   selector: 'app-test-entry',
   template: \`<app-nx-welcome></app-nx-welcome>\`

packages/angular/src/generators/scam-to-standalone/lib/convert-scam-to-standalone.ts

@@ -1,7 +1,7 @@
-import type { Node, SourceFile } from 'typescript';
-import { Tree } from 'nx/src/generators/tree';
+import { joinPathFragments, type Tree } from '@nx/devkit';
 import { parse } from 'path';
-import { joinPathFragments } from 'nx/src/utils/path';
+import type { Node, SourceFile } from 'typescript';
+import { getInstalledAngularVersionInfo } from '../../utils/version-utils';
 
 export function convertScamToStandalone(
   componentAST: SourceFile,
@@ -23,11 +23,12 @@ export function convertScamToStandalone(
     { visitAllChildren: true }
   )[0];
 
+  const { major: angularMajorVersion } = getInstalledAngularVersionInfo(tree);
+
   newComponentContents = `${componentFileContents.slice(
     0,
     componentDecoratorMetadataNode.getStart() - 1
-  )}({
-    standalone: true,
+  )}({${angularMajorVersion < 19 ? `\nstandalone: true,` : ''}
     imports: [${importsArray.join(',')}],${
     providersArray.length > 0 ? `providers: [${providersArray.join(',')}],` : ''
   }${componentFileContents.slice(

packages/angular/src/generators/scam-to-standalone/scam-to-standalone.spec.ts

@@ -36,7 +36,6 @@ describe('scam-to-standalone', () => {
       import { CommonModule } from '@angular/common';
 
       @Component({
-        standalone: true,
         imports: [CommonModule],
         selector: 'app-bar',
         standalone: false,

packages/angular/src/generators/setup-mf/files/standalone-entry-component-files/entry.component.ts__tmpl__

@@ -2,8 +2,8 @@ import { Component } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { NxWelcomeComponent } from './nx-welcome.component';
 
-@Component({
-  standalone: true,
+@Component({<% if (setStandaloneTrue) { %>
+  standalone: true,<% } %>
   imports: [CommonModule, NxWelcomeComponent],<% if (prefix) { %>
   selector: '<%= prefix %>-<%= appName %>-entry',
   template: `<<%= prefix %>-nx-welcome></<%= prefix %>-nx-welcome>`<% } else { %>

packages/angular/src/generators/setup-mf/lib/add-remote-entry.ts

@@ -25,7 +25,9 @@ export function addRemoteEntry(
       appName,
       routing,
       prefix,
-      setStandaloneFalse: angularMajorVersion >= 18,
+      // Angular v19 or higher defaults to true, while v18 or lower defaults to false
+      setStandaloneFalse: angularMajorVersion >= 19,
+      setStandaloneTrue: angularMajorVersion < 19,
     }
   );