Proposal: Auto add (providers, directives, pipes, styles, styleUrls) when adding 3rd party libs, etc.

Discussion on AngularAir today regarding 3rd party libraries (https://plus.google.com/events/c7m79d5o04nom5eednk5ecqtebk) brought up an interesting thought. See also: https://github.com/angular/angular/issues/5503

If 3rd party libs all adhered to a certain naming convention and style when exporting necessary services, directives, pipes, etc., it would be incredibly helpful if this CLI could auto-annotate the src code files with the necessary directives, providers, pipes, etc.

Consider the following scenario:

1. User wants to use ng2-image-lazy-load (https://github.com/NathanWalker/ng2-image-lazy-load)
2. Since it followed certain conventions, IMAGELAZYLOAD_PROVIDERS, the CLI might provide an additional helpful aid (command can be whatever, just using add-lib for example):

ng add-lib ng2-image-lazy-load 

It would proceed to run npm install ng2-image-lazy-load, then prompt with a couple questions:

$ Would you like this provider as part of the bootstrap? (y/n)

If “y”:

$ Please provide the path to the src file which bootstraps your app:
$ src/bootstrap.ts

It would add the import statements and append the aptly named [lib_prefix]_PROVIDERS in the user’s app bootstrap. If the lib contained no constants with PROVIDERS in the name, it would modify nothing.

If “n”:

$ Please provide the path of the component you would like the providers added to:
$ src/components/main.component.ts

It would add the import statements and append the libraries aptly named PROVIDERS in the viewProviders of the component.

Similar scenarios would apply for DIRECTIVES, PIPES, etc.

If this were possible, every 3rd party lib could suggest using the CLI as the first option to install, followed by manual npm install.

/cc @jvandemo, @gdi2290, @valorkin, @ocombe, @jeffwhelpley, @pascalprecht, @mgechev, @ludohenin, @robwormald

[robwormald]

i think perhaps a simple solution for this would be something along the lines of

//myPluginRoot.ts
import {MyPluginServiceA, MyPluginServiceB} from './services';
import {MyDirectiveA, MyDirectiveB} from './directives';
import {MyPipeA, MyPipeB} from './pipes';

//export the named stuff for granular usage
export * from './services'
export * from './directives'
export * from './pipes'

//use es6 default syntax to export the "plugin"
export default {
  providers: [MyPluginServiceA, MyPluginServiceB],
  directives: [MyDirectiveA, MyDirectiveB],
  pipes: [MyPipeA, MyPipeB]
}

users and tooling are then easily able to do :

//naming is irrelevant here
import myPlugin from 'myPlugin'

//now its consistent:
myPlugin.directives
myPlugin.services
myPlugin.pipes

and this is easily done with templating, as the actual name of the export is “default” - no weird lookups necessary and no NAMING_CONVENTIONS to force / invent.

see http://plnkr.co/edit/Yi1e3ifiX0gSqd8Qs2h4?p=preview - i added a little plugin registration helper too, which @IgorMinar will probably yell at me about.

[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.}