Generate and manage schematic configuration files

[dgp1130]

🚀 Feature request

Edit: The feature described in this comment already exists as schematics blank, the real feature request is here.

Command (mark with an x)

• generate

Description

It came up in an Angular Nation discussion today that making a new schematic is really difficult and requires a lot of steps with complex documentation. I think this came up before but I wasn't able to find an existing issue quickly.

Describe the solution you'd like

Ideally we would have something like ng generate schematic (or schematics new) which could create a new schematic. We'll probably have to workshop how to support both creating a new collection and adding to an existing collection. This would also help improve some of the documentation, since users can get started with schematics much easily.

Describe alternatives you've considered

Alternative is to just document everything and make users type everything out by hand, which is how it works today.

/cc @kroeder.

[alan-agius4]

We actually already offer a way to generate a blank schematic, using the schematic cli and it does add to an existing collection.

schematics blank —-name test-schematic

[alan-agius4]

It’s actually also mentioned in https://angular.io/guide/schematics-authoring#creating-a-schematics-collection

[dgp1130]

Oh awesome! That's what I get for not double checking the docs. Is that mostly what you had in mind @kroeder, or was there more to it that I'm forgetting now?

[kroeder]

It's actually not what I have thought of. Yes, it creates a schematic project but isn't it that you often want to add schematics to an existing library? Like update schematics for angular/core

As far as I know this is not possible with the schematics cli

Here's an article I wrote about the schematics lib I wrote
https://dev.to/kroeder/set-up-your-own-angular-schematics-in-no-time-with-ngx-cli-toolkit-27ec

Maybe this helps making clear what I actually, trying to achieve 🙂

Here's the link to the repo https://github.com/kroeder/ngx-cli-toolkit

[dgp1130]

Ah thanks, I think I see what you're getting at. It's not so much about making a new schematic, but more about configuring it to work with ng add / ng generate / ng update out of the box. I can definitely see value in that since this is usually what most users probably wanted to actually do. It also encourages more libraries to take advantage of these features and provide a better developer experience. Seems like most of the work here is around managing all the JSON files for users to simplify some of the up front configuration effort.

I could imagine something like ng generate schematic which would make a schematic inside an existing library and configure all the JSON files for you. Some kind of --type flag could pick between ng add / ng generate / ng update. That seems roughly equivalent to what you have in ngx-cli-toolkit if I'm understanding this correctly. Is that more in line with what you were thinking @kroeder?

[kroeder]

Yes, exactly!

Now that I think about it there's probably not even the need for an init schematic for projects.

Here's a list of features that ngx-cli-toolkit already supports (or wants to support)
I already tried to use your suggested ng generate schematic --type API instead of writing down the ngx-cli-toolkit commands

ng add support

• installs a couple of useful dependencies when working with schematics

init --project <name>

Bootstraps everything in a project

• package.json entries
• creates a schematics folder
• adds "migration.json" as well as "collection.json"

However, init could be part of every other schematic with a check if a certain project already has bootstrapped schematics. If not, then run the bootstrap process before generate the actual schematics

--type generate

• Asks for a schematic name and description
• Updates collection.json automatically
• Creates a schematic script, a test file and a schema.json file with name and path already part of it as this is what you need most of the time

--type update

• Asks for a name, description and version
• Updates migration.json automatically
• Creates schematic script and a test file

--type add

• Asks if you want your package to be a dependency or a devDependency when running ng add <my-package>
• Updates collection.json automatically
• Creates schematic script and a test file

Future plans

Ideally this is not the end. Schematics also currently have a manual build step (see https://angular.io/guide/schematics-for-libraries#building-your-schematics)

I thought about creating a builder that automatically compiles and copies my schematic into the final dist/my-lib of my library. But since there's currently (afaik) no way to hook into e.g. ng build <my-lib> it would still be a separate step to run ng run <my-lib>:build-schematics or something like that

What I wanted to get rid of is things 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"
  },

Wrap up

I hope my thoughts can add value to this issue as I would love to have this natively supported by the angular cli! If there is anything else I can do just let me know 🙂

[dgp1130]

Makes sense, I can definitely see value here. I would probably prefer to leave out the "init" function and just let that transparently happen the first time any of the other ng generate schematic commands run, if possible. That way users don't have to think about it, understand what it's doing, or forget to run it.

I agree the build story is also a bit too complicated on its own. Part of that is from the inherent complexity of needing a separate TS compilation unit, but we could probably do a better job of abstracting that. I'm wondering if we could add a new builder (or an option to the existing library builder) to also build schematics as part of ng build, so library authors wouldn't need to worry about all these scripts.

I don't want to get too carried away here just yet as I'm not a schematics expert. I'll bring it up to some others and see what they think.