angular-cli custom schematics / collection

Question

I'm trying to create custom schematics for angular cli. So far I have figured out that "collection" has to be compiled, cli cannot read typescript. Which means you can not just clone https://github.com/angular/devkit/tree/master/packages/schematics/angular change whatever you need and publish it on npm, which means you need to clone the whole https://github.com/angular/devkit and use its npm run build to create compiled schematics you need to run it thru tsc, you can then publish those compiled files to npm and globally install with npm, for example

npm i -g @thescrollbar/schematics

then I should have been able to do ng new --collection=@thescrollbar/schematics my-app but surprisingly enough, it did not work and was throwing tree.branch is not a function.

But if you copy this globally installed package to cli's module

/usr/local/bin/node_modules/@thescrollbar/schematics -> /usr/local/bin/node_modules/@angular/cli/node_modules/@thescrollbar/schematics

it starts working and you can create a new app that is based on your schematics..

Now for the new problem I have no workaround for, when I try to generate a new components with

ng g c --collection=@thescrollbar/schematics logo

it creates it using @schematics/angular template, instead of my collection, despite the fact that when I on purpose do

ng g shat --collection=@thescrollbar/schematics logo

it says

Schematic "shat" not found in collection "@thescrollbar/schematics".

which I think clearly indicates that it indeed is using my collection?

Anyone managed to get custom collections working? Globally and for generating components / modules?

Answer 1

/usr/local/bin/node_modules/@thescrollbar/schematics -> /usr/local/bin/node_modules/@angular/cli/node_modules/@thescrollbar/schematics

Yes, this is a problem with the current implementation. That's because we (blindly) call require.resolve on the collection name, which only resolves from the current module which is the CLI. There is a fix incoming (PR 163) that should be released this week that will resolve using the following list:

• is it a node package relative to process.cwd()?
• is it a node package relative to the tool (CLI in your case)?
• is it a node package installed globally?

You might notice there is two missing fallbacks that's missing; is it a package relative to your schematics and is it a package relative to your project? That's coming, it's just a bit more complicated to implement. In any case, you could install your schematic globally and that will work fine.

ng g c --collection=@thescrollbar/schematics logo

it creates it using @schematics/angular template, instead of my collection

That's a known problem and we have a PR that fixes it in the CLI. This is a fix that's also coming.

Thanks for trying out Schematics. It's been a long time project now and we're still fixing a lot of the little edge cases. We're also going to have better documentation and tutorials (including a schematics schematic) very soon. It's pretty much a work in progress, so thank you for being so patient with it.

You can file issues and bugs in the Angular DevKit repo (https://github.com/angular/devkit).