feat(angular): add backwards compat support for package and ng-packagr-lite executors

packages/angular/src/executors/ng-packagr-lite/ng-packagr-adjustments/styles/stylesheet-processor.ts

@@ -20,13 +20,14 @@ import * as log from 'ng-packagr/lib/utils/log';
 import { dirname, extname, join } from 'path';
 import * as postcssPresetEnv from 'postcss-preset-env';
 import * as postcssUrl from 'postcss-url';
+import { pathToFileURL } from 'url';
+import { getInstalledAngularVersionInfo } from '../../../utilities/angular-version-utils';
 import {
   getTailwindPostCssPlugins,
   getTailwindSetup,
   tailwindDirectives,
   TailwindSetup,
 } from '../../../utilities/tailwindcss';
-import { pathToFileURL } from 'url';
 
 const postcss = require('postcss');
 
@@ -250,6 +251,19 @@ export class StylesheetProcessor {
     switch (ext) {
       case '.sass':
       case '.scss': {
+        const angularVersion = getInstalledAngularVersionInfo();
+        if (angularVersion && angularVersion.major < 15) {
+          return (await import('sass'))
+            .renderSync({
+              file: filePath,
+              data: css,
+              indentedSyntax: '.sass' === ext,
+              importer: customSassImporter,
+              includePaths: this.styleIncludePaths,
+            })
+            .css.toString();
+        }
+
         return (await import('sass'))
           .compileString(css, {
             url: pathToFileURL(filePath),
@@ -318,3 +332,19 @@ function transformSupportedBrowsersToTargets(
 
   return transformed.length ? transformed : undefined;
 }
+
+function customSassImporter(
+  url: string,
+  prev: string
+): { file: string; prev: string } | undefined {
+  // NB: Sass importer should always be sync as otherwise it will cause
+  // sass to go in the async path which is slower.
+  if (url[0] !== '~') {
+    return undefined;
+  }
+
+  return {
+    file: url.slice(1),
+    prev,
+  };
+}

packages/angular/src/executors/package/ng-packagr-adjustments/styles/stylesheet-processor.ts

@@ -20,13 +20,14 @@ import * as log from 'ng-packagr/lib/utils/log';
 import { dirname, extname, join } from 'path';
 import * as postcssPresetEnv from 'postcss-preset-env';
 import * as postcssUrl from 'postcss-url';
+import { pathToFileURL } from 'url';
+import { getInstalledAngularVersionInfo } from '../../../utilities/angular-version-utils';
 import {
   getTailwindPostCssPlugins,
   getTailwindSetup,
   tailwindDirectives,
   TailwindSetup,
 } from '../../../utilities/tailwindcss';
-import { pathToFileURL } from 'url';
 
 const postcss = require('postcss');
 
@@ -243,6 +244,19 @@ export class StylesheetProcessor {
     switch (ext) {
       case '.sass':
       case '.scss': {
+        const angularVersion = getInstalledAngularVersionInfo();
+        if (angularVersion && angularVersion.major < 15) {
+          return (await import('sass'))
+            .renderSync({
+              file: filePath,
+              data: css,
+              indentedSyntax: '.sass' === ext,
+              importer: customSassImporter,
+              includePaths: this.styleIncludePaths,
+            })
+            .css.toString();
+        }
+
         return (await import('sass'))
           .compileString(css, {
             url: pathToFileURL(filePath),
@@ -311,3 +325,19 @@ function transformSupportedBrowsersToTargets(
 
   return transformed.length ? transformed : undefined;
 }
+
+function customSassImporter(
+  url: string,
+  prev: string
+): { file: string; prev: string } | undefined {
+  // NB: Sass importer should always be sync as otherwise it will cause
+  // sass to go in the async path which is slower.
+  if (url[0] !== '~') {
+    return undefined;
+  }
+
+  return {
+    file: url.slice(1),
+    prev,
+  };
+}

packages/angular/src/executors/utilities/angular-version-utils.ts

@@ -0,0 +1,16 @@
+import { readModulePackageJson } from 'nx/src/utils/package-json';
+import { major } from 'semver';
+
+type AngularVersionInfo = { major: number; version: string };
+
+export function getInstalledAngularVersionInfo(): AngularVersionInfo | null {
+  try {
+    const {
+      packageJson: { version },
+    } = readModulePackageJson('@angular/core');
+
+    return { major: major(version), version };
+  } catch {
+    return null;
+  }
+}

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

@@ -7,11 +7,11 @@ import {
 import { Linter, lintProjectGenerator } from '@nrwl/linter';
 import { mapLintPattern } from '@nrwl/linter/src/generators/lint-project/lint-project';
 import { runTasksInSerial } from '@nrwl/workspace/src/utilities/run-tasks-in-serial';
+import { join } from 'path';
+import { getGeneratorDirectoryForInstalledAngularVersion } from '../utils/angular-version-utils';
 import { addAngularEsLintDependencies } from './lib/add-angular-eslint-dependencies';
 import { extendAngularEslintJson } from './lib/create-eslint-configuration';
 import type { AddLintingGeneratorSchema } from './schema';
-import { getGeneratorDirectoryForInstalledAngularVersion } from '../../utils/user-installed-angular-versions';
-import { join } from 'path';
 
 export async function addLintingGenerator(
   tree: Tree,

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

@@ -8,9 +8,11 @@ import {
 } from '@nrwl/devkit';
 import { wrapAngularDevkitSchematic } from '@nrwl/devkit/ngcli-adapter';
 import { convertToNxProjectGenerator } from '@nrwl/workspace/generators';
+import { join } from 'path';
 import { UnitTestRunner } from '../../utils/test-runners';
 import { angularInitGenerator } from '../init/init';
 import { setupTailwindGenerator } from '../setup-tailwind/setup-tailwind';
+import { getGeneratorDirectoryForInstalledAngularVersion } from '../utils/angular-version-utils';
 import {
   addE2e,
   addLinting,
@@ -29,8 +31,6 @@ import {
   updateNxComponentTemplate,
 } from './lib';
 import type { Schema } from './schema';
-import { getGeneratorDirectoryForInstalledAngularVersion } from '../../utils/user-installed-angular-versions';
-import { join } from 'path';
 
 export async function applicationGenerator(
   tree: Tree,

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

@@ -11,6 +11,7 @@ import {
 import { jestInitGenerator } from '@nrwl/jest';
 import { Linter } from '@nrwl/linter';
 import { runTasksInSerial } from '@nrwl/workspace/src/utilities/run-tasks-in-serial';
+import { join } from 'path';
 import { E2eTestRunner, UnitTestRunner } from '../../utils/test-runners';
 import {
   angularDevkitVersion,
@@ -27,9 +28,8 @@ import {
   zoneJsVersion,
 } from '../../utils/versions';
 import { karmaGenerator } from '../karma/karma';
+import { getGeneratorDirectoryForInstalledAngularVersion } from '../utils/angular-version-utils';
 import { Schema } from './schema';
-import { getGeneratorDirectoryForInstalledAngularVersion } from '../../utils/user-installed-angular-versions';
-import { join } from 'path';
 
 export async function angularInitGenerator(
   tree: Tree,

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

@@ -7,6 +7,7 @@ import {
   readNxJson,
   updateNxJson,
 } from '@nrwl/devkit';
+import { join } from 'path';
 import {
   jasmineCoreVersion,
   jasmineSpecReporterVersion,
@@ -18,9 +19,8 @@ import {
   typesJasmineVersion,
   typesNodeVersion,
 } from '../../utils/versions';
+import { getGeneratorDirectoryForInstalledAngularVersion } from '../utils/angular-version-utils';
 import { GeneratorOptions } from './schema';
-import { getGeneratorDirectoryForInstalledAngularVersion } from '../../utils/user-installed-angular-versions';
-import { join } from 'path';
 
 function addTestInputs(tree: Tree) {
   const nxJson = readNxJson(tree);

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

@@ -33,7 +33,7 @@ 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 { getInstalledAngularVersionInfo } from '../utils/angular-version-utils';
 import { coerce, lt, major } from 'semver';
 
 export async function libraryGenerator(tree: Tree, schema: Schema) {
@@ -54,11 +54,8 @@ export async function libraryGenerator(tree: Tree, schema: Schema) {
     );
   }
 
-  const userInstalledAngularVersion = getUserInstalledAngularVersionInfo(tree);
-  if (
-    lt(userInstalledAngularVersion.cleanedVersion, '14.1.0') &&
-    schema.standalone
-  ) {
+  const userInstalledAngularVersion = getInstalledAngularVersionInfo(tree);
+  if (lt(userInstalledAngularVersion.version, '14.1.0') && schema.standalone) {
     throw new Error(
       `The "--standalone" option is not supported in Angular versions < 14.1.0.`
     );

packages/angular/src/utils/user-installed-angular-versions.spec.ts → packages/angular/src/generators/utils/angular-version-utils.spec.ts

@@ -2,11 +2,11 @@ import { createTreeWithEmptyWorkspace } from '@nrwl/devkit/testing';
 import { updateJson } from '@nrwl/devkit';
 import {
   getGeneratorDirectoryForInstalledAngularVersion,
-  getUserInstalledAngularMajorVersion,
-  getUserInstalledAngularVersion,
-} from './user-installed-angular-versions';
+  getInstalledAngularMajorVersion,
+  getInstalledAngularVersion,
+} from './angular-version-utils';
 
-describe('userInstalledAngularVersions', () => {
+describe('angularVersionUtils', () => {
   test.each(['14.0.0', '~14.1.0', '^14.2.0', '~14.3.0-beta.0'])(
     'should return correct directory name for v14',
     (ngVersion) => {
@@ -41,7 +41,7 @@ describe('userInstalledAngularVersions', () => {
       }));
 
       // ACT
-      const angularVersion = getUserInstalledAngularMajorVersion(tree);
+      const angularVersion = getInstalledAngularMajorVersion(tree);
 
       // ASSERT
       expect(angularVersion).toBe(14);
@@ -64,7 +64,7 @@ describe('userInstalledAngularVersions', () => {
     }));
 
     // ACT
-    const angularVersion = getUserInstalledAngularVersion(tree);
+    const angularVersion = getInstalledAngularVersion(tree);
 
     // ASSERT
     expect(angularVersion).toEqual(expectedVersion);

packages/angular/src/utils/user-installed-angular-versions.ts → packages/angular/src/generators/utils/angular-version-utils.ts

@@ -1,10 +1,12 @@
 import type { Tree } from '@nrwl/devkit';
 import { readJson } from '@nrwl/devkit';
 import { clean, coerce, major } from 'semver';
-import { angularVersion } from './versions';
+import { angularVersion } from '../../utils/versions';
 
-export function getGeneratorDirectoryForInstalledAngularVersion(tree: Tree) {
-  const majorAngularVersion = getUserInstalledAngularMajorVersion(tree);
+export function getGeneratorDirectoryForInstalledAngularVersion(
+  tree: Tree
+): string | null {
+  const majorAngularVersion = getInstalledAngularMajorVersion(tree);
 
   const directoryDictionary = {
     14: 'angular-v14',
@@ -13,7 +15,7 @@ export function getGeneratorDirectoryForInstalledAngularVersion(tree: Tree) {
   return directoryDictionary[majorAngularVersion] ?? null;
 }
 
-export function getUserInstalledAngularVersion(tree: Tree) {
+export function getInstalledAngularVersion(tree: Tree): string {
   const pkgJson = readJson(tree, 'package.json');
   const installedAngularVersion =
     pkgJson.dependencies && pkgJson.dependencies['@angular/core'];
@@ -31,14 +33,15 @@ export function getUserInstalledAngularVersion(tree: Tree) {
   );
 }
 
-export function getUserInstalledAngularMajorVersion(tree: Tree): number {
-  return major(getUserInstalledAngularVersion(tree));
+export function getInstalledAngularMajorVersion(tree: Tree): number {
+  return major(getInstalledAngularVersion(tree));
 }
 
-export function getUserInstalledAngularVersionInfo(tree: Tree) {
-  const installedVersion = getUserInstalledAngularVersion(tree);
+export function getInstalledAngularVersionInfo(tree: Tree) {
+  const installedVersion = getInstalledAngularVersion(tree);
+
   return {
-    cleanedVersion: installedVersion,
+    version: installedVersion,
     major: major(installedVersion),
   };
 }

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

@@ -1,7 +1,7 @@
-import { Tree } from 'nx/src/generators/tree';
+import type { Tree } from '@nrwl/devkit';
+import { writeJson } from '@nrwl/devkit';
 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';
+import { getInstalledAngularMajorVersion } from './angular-version-utils';
 
 export { extractTsConfigBase } from '@nrwl/workspace/src/utils/create-ts-config';
 
@@ -17,7 +17,7 @@ export function createTsConfig(
   },
   relativePathToRootTsConfig: string
 ) {
-  let majorAngularVersion = getUserInstalledAngularMajorVersion(host);
+  const majorAngularVersion = getInstalledAngularMajorVersion(host);
 
   const json = {
     compilerOptions: {