Angular-cli: Support for third-party generator blueprints

[mischkl]

I actually have no experience with this feature on Ember, but I see that ember-cli has it and I think would be a great boon to angular-cli: the ability for the user to generate code from their own blueprints, or to use third party ones installed via npm. I guess this could be part of the "add-ons" functionality I've heard rumors about. ;)

Example use cases would be generating routes for UI-Router, generating stores for ngrx or Redux, generating GraphQL endpoints for use with angular2-apollo, generating style guides or other kinds of documentation, and on and on - the imagination of the GitHub community would be the limit. :)

Note: I realize Yeoman can already accommodate some use cases, but it's not really designed to deal with existing projects, it can't use/extend the angular-cli API, and in all likelihood anyone using angular-cli won't give it a second look.

[filipesilva]

This is on our radar for the addon system actually.

[mischkl]

@filipesilva awesome, glad to hear it. :)

[christopherthielen]

I'd like to add support for routing with ui-router-ng2. What are the current ideas for how third party support might be implemented?

[filipesilva]

Heya @christopherthielen! There isn't a public plan available for third party blueprints yet. It's mostly a post 1.0 concern at the moment.

I think the best you can do currently is provide some instructions on how to modify a newly generated project to use ui-router-ng2. Let me know if you have any trouble doing it.

[CesarD]

Any news on this matter?
Is it being actively worked on or still in the drawer?

[filipesilva]

Support for custom blueprints was added in https://github.com/angular/angular-cli/pull/7090, available in 1.4.0-beta.1 and up. It's based on @angular-devkit/schematics: https://github.com/angular/devkit/tree/master/packages/schematics/angular.

We don't yet have documentation and examples of how you can make your own but @Brocco is working on it.

[CesarD]

Any schedule you might be working on for the release of a stable 1.4.0 version? Perhaps within the next 30 days? Just curious.
Thanks! 😃

[filipesilva]

@CesarD yeah most likely. It's in rc.2 right now so it shouldn't take long at all.

[kerihobo]

Hi is there any further news on this? I would love to be able to automate my new components being added to my router and also to set some defaults to my generated constructors, I would also like every component to be able to utilize my main stylesheet.

[bmayen]

Support for custom blueprints was added in #7090 , available in 1.4.0-beta.1 and up. It's based on @angular-devkit/schematics : https://github.com/angular/devkit/tree/master/packages/schematics/angular .

[CesarD]

Documentation on how to use it? Anywhere?????

[kerihobo]

Yeah plz.

[k-vekos]

Documentation on how to use it? Anywhere?????

This would be nice!

[CesarD]

In this time I have found a few articles about how to make schematics for Angular:

• https://blog.angular.io/schematics-an-introduction-dc1dfbc2a2b2
• https://medium.com/@tomastrajan/%EF%B8%8F-how-to-create-your-first-custom-angular-schematics-with-ease-%EF%B8%8F-bca859f3055d

Hope this helps.

[k-vekos]

I want to create a custom schematic for my Angular SPA application. Right now I only really want to modify the existing schematic for "component", and only to alter the HTML and TypeScript template and I only need it to be available inside the scope of this one SPA project, so I don't need a library necessarily.

@CesarD your articles go over making a custom schematic collection but both seem to imply creating this schematic collection as a separate library. I'd rather not have to build another library in addition to my SPA. If possible I'd rather have the custom schematic be part of my SPA project/code. As it stands I would need to create a schematic collection somewhere in my project repository, check in the source, then when a developer wants to develop with the app they need to build the schematic project, then npm link it. This doesn't sound like an ideal workflow.

[CesarD]

@k-vekos well, it actually is a library to add. Think about it as a library for the angular-cli. You need to have it installed to later use it on any angular project you want.
Also, any schematic needs to live inside a collection, so that's why you need to start with the collection.

AFAIK, schematics cannot be made to run within an app. And I don't think it would make sense otherwise, as they are not necessarily part of an app, but as something aside of it to just generate some of its components.

[k-vekos]

@CesarD it makes perfect sense to me that they would be beneficial if it were possible to scope them to a single application. Simply being able to add boilerplate code when adding a new service or component to an existing application would be a use case for schematics.

Actually, the author of one of the articles you linked would seem to agree with me:

Schematics can also be used to easily introduce and enforce project wide conventions. This can in turn greatly reduce ramp up time for new developers joining ongoing projects.

[CesarD]

Yes, that is exactly their purpose, and that's why I also wanted them.
That said, they still operate outside of the scope of the app, at a CLI level.
When I wanted to make schematics, I was looking forward to be able to make schematics that I could use in several apps to keep coherence among my projects (services made the same way, CRUD modules made the same way, security implementation with OIDC, etc), so I could use and reuse the same patterns. I think that's the main purpose of schematics.
Anyway, it's just my point of view and perhaps the one used by the team when designing the schematics.
Perhaps there's a way to do what you want, just not as straight as it's shown in those articles.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}