fix(angular): correctly error component when standalone is used in Angular < 14.1.0 (#14337)

docs/generated/packages/angular/generators/component.json

@@ -46,7 +46,7 @@
         "alias": "t"
       },
       "standalone": {
-        "description": "Whether the generated component is standalone.",
+        "description": "Whether the generated component is standalone. _Note: This is only supported in Angular versions >= 14.1.0_",
         "type": "boolean",
         "default": false
       },

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

@@ -1,5 +1,10 @@
 import type { ProjectGraph } from '@nrwl/devkit';
-import { addProjectConfiguration, writeJson } from '@nrwl/devkit';
+import {
+  addProjectConfiguration,
+  stripIndents,
+  updateJson,
+  writeJson,
+} from '@nrwl/devkit';
 import { createTreeWithEmptyWorkspace } from '@nrwl/devkit/testing';
 import componentGenerator from './component';
 
@@ -737,4 +742,32 @@ describe('component Generator', () => {
       expect(indexSource).toBe('');
     });
   });
+
+  it('should error correctly when Angular version does not support standalone', async () => {
+    // ARRANGE
+    const tree = createTreeWithEmptyWorkspace({ layout: 'apps-libs' });
+    updateJson(tree, 'package.json', (json) => ({
+      ...json,
+      dependencies: {
+        '@angular/core': '14.0.0',
+      },
+    }));
+
+    addProjectConfiguration(tree, 'lib1', {
+      projectType: 'library',
+      sourceRoot: 'libs/lib1/src',
+      root: 'libs/lib1',
+    });
+
+    // ACT & ASSERT
+    await expect(
+      componentGenerator(tree, {
+        name: 'example',
+        project: 'lib1',
+        standalone: true,
+      })
+    ).rejects
+      .toThrow(stripIndents`The "standalone" option is only supported in Angular >= 14.1.0. You are currently using 14.0.0.
+    You can resolve this error by removing the "standalone" option or by migrating to Angular 14.1.0.`);
+  });
 });

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

@@ -4,14 +4,27 @@ import {
   normalizePath,
   readNxJson,
   readProjectConfiguration,
+  stripIndents,
 } from '@nrwl/devkit';
 import { wrapAngularDevkitSchematic } from '@nrwl/devkit/ngcli-adapter';
 import { pathStartsWith } from '../utils/path';
 import { exportComponentInEntryPoint } from './lib/component';
 import { normalizeOptions } from './lib/normalize-options';
 import type { NormalizedSchema, Schema } from './schema';
+import { getInstalledAngularVersionInfo } from '../utils/angular-version-utils';
+import { lt } from 'semver';
 
 export async function componentGenerator(tree: Tree, rawOptions: Schema) {
+  const installedAngularVersionInfo = getInstalledAngularVersionInfo(tree);
+
+  if (
+    lt(installedAngularVersionInfo.version, '14.1.0') &&
+    rawOptions.standalone
+  ) {
+    throw new Error(stripIndents`The "standalone" option is only supported in Angular >= 14.1.0. You are currently using ${installedAngularVersionInfo.version}.
+    You can resolve this error by removing the "standalone" option or by migrating to Angular 14.1.0.`);
+  }
+
   const options = await normalizeOptions(tree, rawOptions);
   const { projectSourceRoot, ...schematicOptions } = options;
 

packages/angular/src/generators/component/schema.json

@@ -46,7 +46,7 @@
       "alias": "t"
     },
     "standalone": {
-      "description": "Whether the generated component is standalone.",
+      "description": "Whether the generated component is standalone. _Note: This is only supported in Angular versions >= 14.1.0_",
       "type": "boolean",
       "default": false
     },