Nx: [HowTo] Generate publishable angular schematics?

[snebjorn]

I'm trying to generate a publishable angular schematic. But I can't figure it out.

I see generators like @schematics/angular and workspace-schematics but they don't seem to what I want.

There's a tools/schematics folder which suggests that there is some support.

Please advice, thanks.

[snebjorn]

So made a bit of progress.
According to Angulars guide schematics are just simple TS "libs" that should get bundled with the main library. This poses some problems.

First problem:

You must build your schematics after you build your library, so they are placed in the correct directory.

Nx support building something before via the implicitDependencies option in nx.json, but not after.

@nrwl/node:build, @nrwl/node:package and @nrwl/web:build all require main which a schematic simple doesn't have. It doesn't even have a package.json file.

The build instructions are

  "scripts": {
    "build": "../../node_modules/.bin/tsc -p tsconfig.schematics.json",
    "copy:schemas": "cp --parents schematics/*/schema.json ../../dist/my-lib/",
    "copy:files": "cp --parents -p schematics/*/files/** ../../dist/my-lib/",
    "copy:collection": "cp schematics/collection.json ../../dist/my-lib/schematics/collection.json",
    "postbuild": "npm run copy:schemas && npm run copy:files && npm run copy:collection"
  }

So how do I do a "simple"/custom build in Nx and forcefully trigger it after a my-lib build?

[vsavkin]

I'm really sorry. I'm not sure what you are trying to accomplish. Could you provide more info?

[snebjorn]

Sorry for the confusion. I wasn't really sure what I was doing in the beginning.

But it's really two things.

@nrwl/angular:schematics

First it would be nice to be able to generate Angular CLI extensions meant to be used with a publishable @nrwl/angular:library. I'm thinking this can be under the @nrwl/angular:schematics namespace (package?)

Building angular:schematics

Secondly a way to build these Angular CLI schematics. Angular schematics doesn't use ng-packagr, instead they just use the TS compiler (tsc). But it's a bit tricky because the don't have a "main/index" file. Instead they have a collection.json file. This file is then added to the target (the cli schematic is meant for) publishable library's package.json file.

// my-lib/package.json
{
  "name": "my-lib",
  "version": "0.0.1",
  "schematics": "./schematics/collection.json" // <-- this is added
}

This means that @nrwl/node:build can't be used to build it as it requires a "main" and also expects to find a package.json file - it'll fail if not present.

 "options": {
    "main": "path/to/main.ts",
},

The way angular describes how to build it, is like this

  "scripts": {
    "build": "../../node_modules/.bin/tsc -p tsconfig.schematics.json",
    "copy:schemas": "cp --parents schematics/*/schema.json ../../dist/my-lib/",
    "copy:files": "cp --parents -p schematics/*/files/** ../../dist/my-lib/",
    "copy:collection": "cp schematics/collection.json ../../dist/my-lib/schematics/collection.json",
    "postbuild": "npm run copy:schemas && npm run copy:files && npm run copy:collection"
  }

But wait there's more :(

Depending on the setup the build step differs.

Schematic bundled with a library

Should be built and copied AFTER the target (my-lib) has been built.

So lets say I do a nx build my-lib then it should first build my-lib then my-lib-schematics and copy it into dist/libs/my-lib/schematics then add "schematics": "./schematics/collection.json" to dist/libs/my-lib/package.json

Schematic published as a separate package

This one funnily do have a package.json file, BUT still no main.
Example https://www.npmjs.com/package/akita-schematics

Hope this helps.

[beeman]

@snebjorn I tried to take a shot at adding a schematics library that I can publish, I based it off of the @nrwl/node:lib which I created with the publishable flag.

I've added 2 schematics, a simple hello-world and one called ng-add which can be installed using ng add @your-org/schematic.

You can find the repo here, both schematics have a separate commit.

In order to copy over the collection.json and lib/**/schema.json files, make sure to add something like this.

With this in place the build is an npm package with schematics enabled.

$ ng build schematics
Compiling TypeScript files for library schematics...
Done compiling TypeScript files for library schematics
Copying asset files...
Done copying asset files.
$ find dist/libs/schematics
dist/libs/schematics
dist/libs/schematics/index.js
dist/libs/schematics/README.md
dist/libs/schematics/package.json
dist/libs/schematics/lib
dist/libs/schematics/lib/hello-world
dist/libs/schematics/lib/hello-world/index.js
dist/libs/schematics/lib/hello-world/index.js.map
dist/libs/schematics/lib/hello-world/index.d.ts
dist/libs/schematics/lib/collection.json
dist/libs/schematics/lib/ng-add
dist/libs/schematics/lib/ng-add/index.js
dist/libs/schematics/lib/ng-add/schema.js.map
dist/libs/schematics/lib/ng-add/schema.js
dist/libs/schematics/lib/ng-add/index.js.map
dist/libs/schematics/lib/ng-add/schema.json
dist/libs/schematics/lib/ng-add/schema.d.ts
dist/libs/schematics/lib/ng-add/index.d.ts
dist/libs/schematics/index.js.map
dist/libs/schematics/index.d.ts

[snebjorn]

@beeman thank you.

meanwhile I've got a working version of "bundled schematic" here https://github.com/datorama/akita/tree/master/libs/akita-schematics

In the target package I just assume the schematic is there
https://github.com/datorama/akita/blob/master/libs/akita/package.json#L37

And then I just build the schematic when i build the target library. NX support for this would be great. Hence my "trigger it after a my-lib build" comment in OP.
https://github.com/datorama/akita/blob/master/package.json#L35

[github-actions[bot]]

This issue has been automatically marked as stale because it hasn't had any recent activity. It will be closed in 14 days if no further activity occurs.
If we missed this issue please reply to keep it active.
Thanks for being a part of the Nx community! 🙏