Angular Schematic Context is Being Ignored

[bMil21]

Current Behavior

We are trying to run a local Angular Schematic in an Nx monorepo, but Angular's schematic context is being ignored when we attempt to use it.

Generator file

/***********************************************
  packages/automation/src/generators/ng-schematics/generator.ts
***********************************************/
import { Rule } from '@angular-devkit/schematics'
import { Tree as NxTree } from '@nx/devkit'
import { wrapAngularDevkitSchematic } from '@nx/devkit/ngcli-adapter'
import { Schema } from 'nx/src/utils/params'

export async function ngSchematicsGenerator(nxTree: NxTree, options: Schema): Promise<Rule> {
    return await myTestNgSchematic(nxTree, options);
}

export const myTestNgSchematic = wrapAngularDevkitSchematic(
    'packages/libs/mylib/collections.json',
    'my-test',
);

Angular Schematic Example

/***********************************************
  packages/libs/mylib/schematics/my-test/index.ts
***********************************************/
import { SchematicContext, Tree, chain } from '@angular-devkit/schematics'
import { installDependencies } from './install-dependencies'
import { updateTsconfigJson } from './update-tsconfig-json'

export function myTest(): Rule {
    return (tree: Tree, context: SchematicContext): Rule => {
        return chain([
            // Install dependencies by triggering NPM install task.
            installDependencies(),
        ])(tree, context) as Rule;
    };
}

An Angular Schematic Rule Example

/***********************************************
  packages/libs/mylib/schematics/my-test/install-dependencies.ts
***********************************************/
import { NodePackageInstallTask } from '@angular-devkit/schematics/tasks'

export function installDependencies(): Rule {
    return (tree: Tree, context: SchematicContext): Tree => {
        console.log('plain js log');
        console.log(context.logger.info);
        context.addTask(new NodePackageInstallTask()); // ignored
        context.logger.info('✅️ Installing dependencies'); // ignored
        return tree;
    };
}

Terminal Output

my-project git: ✗ npx nx g automation:ng-schematics

>  NX  Generating automation:ng-schematics

plain js log
[Function: info]

Both the context.addTask() and context.logger.info are ignored.

Expected Behavior

We expect the context.logger to log a message, and the context.addTask() to install dependencies.

GitHub Repo

No response

Steps to Reproduce

1. In a generator.ts file, add wrapAngularDevkitSchematic with a local Angular schematic

   export async function ngSchematicsGenerator(nxTree: NxTree, options: Schema): Promise<Rule> {
   return await myTestNgSchematic(nxTree, options);
   }
   export const myTestNgSchematic = wrapAngularDevkitSchematic(
   'packages/libs/mylib/collections.json',
   'my-test',
   );

2. Create collection for Angular Schematic

   {
   "$schema": "../../../../node_modules/@angular-devkit/schematics/collection-schema.json",
   "schematics": {
       "my-test": {
           "description": "My Test schematic for running in Nx",
           "factory": "./my-test/index#myTest",
           "schema": "./my-test/schema.json"
       }
   }
   }

3. Create an Angular Schematic with a rule

   export function myTest(): Rule {
   return (tree: Tree, context: SchematicContext): Rule => {
       return chain([
           installDependencies(),
       ])(tree, context) as Rule;
   };
   }

4. The rule utilizes Angular's schematic context

   export function installDependencies(): Rule {
   return (tree: Tree, context: SchematicContext): Tree => {
       console.log('plain js log');
       console.log(context.logger.info);
       context.addTask(new NodePackageInstallTask()); // ignored
       context.logger.info('✅️ Installing dependencies'); // ignored
       return tree;
   };
   }

5. Run the generator

   npx nx g automation:ng-schematics

6. The context methods are never called

   
   >  NX  Generating automation:ng-schematics

plain js log [Function: info]

### Nx Report

```shell
NX   Report complete - copy this into the issue template

   Node   : 20.4.0
   OS     : darwin-arm64
   npm    : 9.7.2

   nx                 : 16.9.1
   @nx/js             : 16.9.1
   @nx/jest           : 16.9.1
   @nx/linter         : 16.9.1
   @nx/workspace      : 16.9.1
   @nx/angular        : 16.9.1
   @nx/cypress        : 16.9.1
   @nx/devkit         : 16.9.1
   @nx/esbuild        : 16.9.1
   @nx/eslint-plugin  : 16.9.1
   @nx/plugin         : 16.9.1
   @nrwl/tao          : 16.9.1
   @nx/web            : 16.9.1
   @nx/webpack        : 16.9.1
   typescript         : 5.1.6
   ---------------------------------------
   Community plugins:
   @jscutlery/semver    : 3.4.1
   @ngrx/effects        : 16.3.0
   @ngrx/store          : 16.3.0
   @ngrx/store-devtools : 16.3.0
   ngx-bootstrap        : 11.0.2
   ---------------------------------------
   Local workspace plugins:
         mylib
         automation

Failure Logs

No response

Package Manager Version

No response

Operating System

• [X] macOS
• [ ] Linux
• [ ] Windows
• [ ] Other (Please specify)

Additional Information

No response

[bMil21]

@FrozenPandaz Has there been any discoveries with this issue?

[bMil21]

@leosvelperez If we are on Nx 16.9.1, how can we get this fix? Has it been released yet?

[github-actions[bot]]

This issue has been closed for more than 30 days. If this issue is still occuring, please open a new issue with more recent context.