feat(angular): add backwards compat support for library (#14249)

packages/angular/src/generators/add-linting/add-linting.ts

@@ -10,7 +10,7 @@ import { runTasksInSerial } from '@nrwl/workspace/src/utilities/run-tasks-in-ser
 import { addAngularEsLintDependencies } from './lib/add-angular-eslint-dependencies';
 import { extendAngularEslintJson } from './lib/create-eslint-configuration';
 import type { AddLintingGeneratorSchema } from './schema';
-import { getGeneratorDirectoryForInstalledAngularVersion } from '../../utils/get-generator-directory-for-ng-version';
+import { getGeneratorDirectoryForInstalledAngularVersion } from '../../utils/user-installed-angular-versions';
 import { join } from 'path';
 
 export async function addLintingGenerator(

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

@@ -29,7 +29,7 @@ import {
   updateNxComponentTemplate,
 } from './lib';
 import type { Schema } from './schema';
-import { getGeneratorDirectoryForInstalledAngularVersion } from '../../utils/get-generator-directory-for-ng-version';
+import { getGeneratorDirectoryForInstalledAngularVersion } from '../../utils/user-installed-angular-versions';
 import { join } from 'path';
 
 export async function applicationGenerator(

packages/angular/src/generators/init/init.ts

@@ -28,7 +28,7 @@ import {
 } from '../../utils/versions';
 import { karmaGenerator } from '../karma/karma';
 import { Schema } from './schema';
-import { getGeneratorDirectoryForInstalledAngularVersion } from '../../utils/get-generator-directory-for-ng-version';
+import { getGeneratorDirectoryForInstalledAngularVersion } from '../../utils/user-installed-angular-versions';
 import { join } from 'path';
 
 export async function angularInitGenerator(

packages/angular/src/generators/karma/karma.ts

@@ -19,7 +19,7 @@ import {
   typesNodeVersion,
 } from '../../utils/versions';
 import { GeneratorOptions } from './schema';
-import { getGeneratorDirectoryForInstalledAngularVersion } from '../../utils/get-generator-directory-for-ng-version';
+import { getGeneratorDirectoryForInstalledAngularVersion } from '../../utils/user-installed-angular-versions';
 import { join } from 'path';
 
 function addTestInputs(tree: Tree) {

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

@@ -1,5 +1,51 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`lib --angular-14 should generate a library with a standalone component as entry point with angular 14.1.0 1`] = `"export * from \\"./lib/my-lib/my-lib.component\\";"`;
+
+exports[`lib --angular-14 should generate a library with a standalone component as entry point with angular 14.1.0 2`] = `
+"import { Component } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+@Component({
+  selector: 'proj-my-lib',
+  standalone: true,
+  imports: [CommonModule],
+  templateUrl: './my-lib.component.html',
+  styleUrls: ['./my-lib.component.css']
+})
+export class MyLibComponent {
+
+}
+"
+`;
+
+exports[`lib --angular-14 should generate a library with a standalone component as entry point with angular 14.1.0 3`] = `
+"import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { MyLibComponent } from './my-lib.component';
+
+describe('MyLibComponent', () => {
+  let component: MyLibComponent;
+  let fixture: ComponentFixture<MyLibComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ MyLibComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(MyLibComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
+"
+`;
+
 exports[`lib --standalone should generate a library with a standalone component and have it flat 1`] = `"export * from \\"./lib/my-lib.component\\";"`;
 
 exports[`lib --standalone should generate a library with a standalone component and have it flat 2`] = `

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

@@ -20,6 +20,7 @@ import {
   autoprefixerVersion,
   postcssVersion,
   tailwindVersion,
+  versions,
 } from '../../utils/versions';
 import libraryGenerator from './library';
 import { Schema } from './schema';
@@ -1736,4 +1737,100 @@ describe('lib', () => {
       ).toMatchSnapshot();
     });
   });
+
+  describe('--angular-14', () => {
+    beforeEach(() => {
+      tree = createTreeWithEmptyWorkspace({ layout: 'apps-libs' });
+      updateJson(tree, 'package.json', (json) => ({
+        ...json,
+        dependencies: {
+          ...json.dependencies,
+          '@angular/core': '14.1.0',
+        },
+      }));
+    });
+
+    it('should create a local tsconfig.json', async () => {
+      // ACT
+      await runLibraryGeneratorWithOpts();
+
+      // ASSERT
+      const tsconfigJson = readJson(tree, 'libs/my-lib/tsconfig.json');
+      expect(tsconfigJson).toEqual({
+        extends: '../../tsconfig.base.json',
+        angularCompilerOptions: {
+          enableI18nLegacyMessageIdFormat: false,
+          strictInjectionParameters: true,
+          strictInputAccessModifiers: true,
+          strictTemplates: true,
+        },
+        compilerOptions: {
+          forceConsistentCasingInFileNames: true,
+          noFallthroughCasesInSwitch: true,
+          noPropertyAccessFromIndexSignature: true,
+          noImplicitOverride: true,
+          noImplicitReturns: true,
+          strict: true,
+          target: 'es2020',
+          useDefineForClassFields: false,
+        },
+        files: [],
+        include: [],
+        references: [
+          {
+            path: './tsconfig.lib.json',
+          },
+          {
+            path: './tsconfig.spec.json',
+          },
+        ],
+      });
+    });
+
+    it('should generate a library with a standalone component as entry point with angular 14.1.0', async () => {
+      await runLibraryGeneratorWithOpts({ standalone: true });
+
+      expect(tree.read('libs/my-lib/src/index.ts', 'utf-8')).toMatchSnapshot();
+      expect(
+        tree.read('libs/my-lib/src/lib/my-lib/my-lib.component.ts', 'utf-8')
+      ).toMatchSnapshot();
+      expect(
+        tree.read(
+          'libs/my-lib/src/lib/my-lib/my-lib.component.spec.ts',
+          'utf-8'
+        )
+      ).toMatchSnapshot();
+    });
+
+    it('should throw an error when trying to generate a library with a standalone component as entry point when angular version is < 14.1.0', async () => {
+      updateJson(tree, 'package.json', (json) => ({
+        ...json,
+        dependencies: {
+          ...json.dependencies,
+          '@angular/core': '14.0.0',
+        },
+      }));
+
+      await expect(
+        runLibraryGeneratorWithOpts({ standalone: true })
+      ).rejects.toThrow(
+        `The \"--standalone\" option is not supported in Angular versions < 14.1.0.`
+      );
+    });
+
+    it('should update package.json with correct versions when buildable', async () => {
+      // ACT
+      await runLibraryGeneratorWithOpts({ buildable: true });
+
+      // ASSERT
+      const packageJson = readJson(tree, '/package.json');
+      expect(packageJson.devDependencies['ng-packagr']).toEqual(
+        versions.angularV14.ngPackagrVersion
+      );
+      expect(packageJson.devDependencies['postcss']).toBeDefined();
+      expect(packageJson.devDependencies['postcss-import']).toBeDefined();
+      expect(packageJson.devDependencies['postcss-preset-env']).toBeDefined();
+      expect(packageJson.devDependencies['postcss-url']).toBeDefined();
+    });
+  });
 });

packages/angular/src/generators/library/library.ts

@@ -12,7 +12,11 @@ import { Linter } from '@nrwl/linter';
 import { convertToNxProjectGenerator } from '@nrwl/workspace/generators';
 import init from '../../generators/init/init';
 import { E2eTestRunner } from '../../utils/test-runners';
-import { ngPackagrVersion } from '../../utils/versions';
+import {
+  angularVersion,
+  ngPackagrVersion,
+  versions,
+} from '../../utils/versions';
 import addLintingGenerator from '../add-linting/add-linting';
 import karmaProjectGenerator from '../karma-project/karma-project';
 import setupTailwindGenerator from '../setup-tailwind/setup-tailwind';
@@ -29,6 +33,8 @@ import { updateProject } from './lib/update-project';
 import { updateTsConfig } from './lib/update-tsconfig';
 import { addStandaloneComponent } from './lib/add-standalone-component';
 import { Schema } from './schema';
+import { getUserInstalledAngularVersionInfo } from '../../utils/user-installed-angular-versions';
+import { coerce, lt, major } from 'semver';
 
 export async function libraryGenerator(tree: Tree, schema: Schema) {
   // Do some validation checks
@@ -48,6 +54,16 @@ export async function libraryGenerator(tree: Tree, schema: Schema) {
     );
   }
 
+  const userInstalledAngularVersion = getUserInstalledAngularVersionInfo(tree);
+  if (
+    lt(userInstalledAngularVersion.cleanedVersion, '14.1.0') &&
+    schema.standalone
+  ) {
+    throw new Error(
+      `The "--standalone" option is not supported in Angular versions < 14.1.0.`
+    );
+  }
+
   const options = normalizeOptions(tree, schema);
   const { libraryOptions, componentOptions } = options;
 
@@ -105,7 +121,11 @@ export async function libraryGenerator(tree: Tree, schema: Schema) {
       tree,
       {},
       {
-        'ng-packagr': ngPackagrVersion,
+        'ng-packagr':
+          userInstalledAngularVersion.major < major(coerce(angularVersion))
+            ? versions[`angularV${userInstalledAngularVersion.major}`]
+                ?.ngPackagrVersion ?? ngPackagrVersion
+            : ngPackagrVersion,
       }
     );
     addBuildableLibrariesPostCssDependencies(tree);

packages/angular/src/generators/utils/create-ts-config.ts

@@ -1,6 +1,8 @@
 import { Tree } from 'nx/src/generators/tree';
 import { tsConfigBaseOptions } from '@nrwl/workspace/src/utils/create-ts-config';
 import { writeJson } from 'nx/src/generators/utils/json';
+import { getUserInstalledAngularMajorVersion } from '../../utils/user-installed-angular-versions';
+
 export { extractTsConfigBase } from '@nrwl/workspace/src/utils/create-ts-config';
 
 export function createTsConfig(
@@ -15,9 +17,11 @@ export function createTsConfig(
   },
   relativePathToRootTsConfig: string
 ) {
+  let majorAngularVersion = getUserInstalledAngularMajorVersion(host);
+
   const json = {
     compilerOptions: {
-      target: 'es2022',
+      target: majorAngularVersion === 14 ? 'es2020' : 'es2022',
       useDefineForClassFields: false,
     },
     files: [],