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

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

• 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]

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.