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 gc --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 gc --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 ).

Answer 2

A quick fix for cli 1.4.1 is to edit node_modules/@angular/cli/commands/new.js, in the run:function(commandOptions, rawArgs) change the line

commandOptions.collectionName = this.getCollectionName(rawArgs);

to

commandOptions.collectionName = commandOptions.collection || this.getCollectionName(rawArgs);