Angular CLI support with Devkit

[edbzn]

Hi,

I'm using the devkit to create my generators and I would like to know how I can support the Angular CLI.

I'm using the function updateProjectConfiguration to update the workspace.json or angular.json and add a target to a project, my problem is that the projectConfiguration argument only matches the Nx workspace definition format:

updateProjectConfiguration(tree, projectName, {
  ...project,
  targets: {
    ...project.targets,
    version: {
      executor: '@jscutlery/semver:version'
    },
  },
});

This results in the following definition:

{
  "projects": {
    "cdk": {
      "root": "...",
      "targets": {
        "version": {
          "executor": "@jscutlery/semver:version"
        }
      }
    }
  }
}

It incorrectly updates the angular.json and uses the Nx definition instead of the regular Angular CLI definition:

{
  "projects": {
    "cdk": {
      "root": "...",
      "architect": {
        "version": {
          "builder": "@jscutlery/semver:version"
        }
      }
    }
  }
}

Due to this issue, Devkit generators cannot support Angular CLI. Furthermore, if I run this generator in an Nx workspace using the old angular.json notation, then it will also corrupt the file. The perfect solution would be that Devkit functions support both workspace definition formats transparently.

What do you think?

[juristr]

I see what you mean. The best way to avoid this is by running the formatFiles(tree) at the end of your changes. That's highly recommended anyway, but would at the same time make sure the angular.json or workspace.json matches the specified version.

For instance, here's a hypothetical generator that adds a jest target.

import {
  formatFiles, getProjects, Tree, updateProjectConfiguration
} from '@nrwl/devkit';

export default async function (tree: Tree, schema: any) {
  // add a "jest" target to each project
  const projects = getProjects(tree);

  projects.forEach((projectConfig, name) => {
    projectConfig.targets['jest'] = {
      executor: '@nrwl/jest:jest',
      outputs: ['coverage/apps/demo'],
      options: {
        jestConfig: 'apps/demo/jest.config.js',
        passWithNoTests: true
      }
    };

    updateProjectConfiguration(tree, name, projectConfig);
  });

  await formatFiles(tree); // <<<--- this one here
}

If I would not have the formatFiles(tree) it would generate a Nx workspace.json format.

I can totally see how this might not be really intuitive. I'll have a look whether we can detect the final out put before generating it, which should be possible.

[edbzn]

Oh! I inspected Nx code and hadn't figured out how it supports both definitions, now I understand. I agree it's not intuitive, but it fixes my issue, thank you @juristr.

[juristr]

yeah we're looking into fixing this. This was not intentional 😅

[symphoniezhao]

We've found a similar issue. After running generateFiles with await formatFiles(tree); angular.json got updated and defaultProject, cli, schematics got removed.
If await formatFiles(tree); is not called, angular.json's not touched.
Is there a fix for that?