angular / angular/angular-cli

feat: search and install Schematics

Offen
#10,000 8 Kommentare 35 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen
area: @angular/cli feature feature: under consideration
Vorherrschende Sprache
TypeScript
Sterne
27k
Forks
11.8k
Ø Merge
14 Std. 23 Min.
Gemergte PRs (30 T.)
162

Beschreibung

## RFC: Search and install Angular CLI Schematics

### tl;dr

The goal of this proposal is to add a new `ng` command allowing to search and install Angular CLI Schematics right from the command line, using the NPM registry. Read below for more technical details.

### Longer version

The Angular CLI has introduced support for [Schematics](https://github.com/angular/devkit) allowing developers to easily extend or even completely change the default behavior of the Angular CLI commands. With Schematics, we can (for instance)...

- use the official [`ng update`](https://www.npmjs.com/package/@schematics/package-update) command to update the Angular dependencies of a project (and more).
- use the [Nrwl Nx Workspace](https://nrwl.io/nx) to scaffold enterprise-grade Angular applications with proven project structure and patterns.
- use your own Schematics to transform any [Feature module](https://angular.io/guide/feature-modules) to a [Lazy Loading Feature module](https://angular.io/guide/lazy-loading-ngmodules).

More generally, you can use Schematics to "[...] transforms to your project, such as create a new component or updating your code to fix breaking changes in a dependency. Or maybe you want to add a new configuration option or framework to an existing project". Read more on the [angular.io](https://blog.angular.io/schematics-an-introduction-dc1dfbc2a2b2).

The Angular community has already started creating custom Schematics, here are some of them:

- [@nrwl/schematics](https://github.com/nrwl/nx)
- [@ngrx/schematics](https://github.com/ngrx/platform/blob/master/docs/schematics/README.md)
- [@ionic-angular/schematics](https://github.com/Robinyo/ionic-angular-schematics)
- [@nativescript/schematics](https://github.com/nativescript/nativescript-schematics#readme)
- [@angular-extensions/schematics](https://github.com/angular-extensions/schematics#readme)
- [@ssilvert/keycloak-schematic](https://github.com/ssilvert/keycloak-schematic#readme)
- [@decerto/schematics](https://github.com/decerto-poland/decerto-schematics#readme)
- [@michael.warneke/ng-schematics](https://github.com/MichaelWarneke/ng-schematics#readme)
- [material-schematics](https://github.com/amcdnl/material-schematics)
- [ngx-schematics-collection](https://github.com/wellwind/ngx-schematics-collection)
- [angular-crud](https://github.com/manfredsteyer/angular-crud#readme)
- [custom-schematics](https://github.com/gioboa/custom-schematics#readme)
- [ng-schematics-utils](https://github.com/caroso1222/ng-schematics-utils#readme)
- [enterprise-angular-generator](https://github.com/cambronjay/enterprise-angular-generator#readme)

We expect the number of the Angular CLI Schematics to grow; hence, the goal of this thread is to discuss the ability to add a new `ng` command allowing to (right from the command line):

#### Note: the commands used below `ng search **` are just for illustration purposes!

0. Searching for available Schematics

```
> ng search foo_
● foo_abc (description) (popularity index)
○ foo_def (description) (popularity index)
○ foo_ghi (description) (popularity index)
○ foo_ijk (description) (popularity index)
```

1. Interactively search for Schematics

```
> ng search
? Find and install Angular CLI Schematics: foo_
● foo_abc (description) (popularity index)
○ foo_def (description) (popularity index)
○ foo_ghi (description) (popularity index)
○ foo_ijk (description) (popularity index)
```

2. Interactively installing Schematics

```
> ng search
? Find and install Angular CLI Schematics: bar_ [ENTER]
● bar_def (description) (popularity index)
○ bar_ijk (description) (popularity index)

Installing packages for tooling via npm...
```

3. ~Install Schematics~
NOTE: This was implemented via the [`ng add`](https://github.com/angular/angular-cli/wiki/add) command.

```
> ng schematics install foo_abc foo_ghi
Installing...
```

In order for this search to be done, we will leverage the NPM infrastructure and use the public registry as the database and we need to be able to identify what NPM packages are actually Angular CLI Schematics. Here are different proposals:

1. Use the current `schematics` property in the `package.json`, eg. [see example](https://github.com/nrwl/bazel-build/blob/master/package.json#L11):
```
{
...
"schematics": "./src/collection.json"
}
```

2. Use an NPM named scope, eg. `@ngxschematics` (`ngx` being the community reserved prefix we agreed on (cc @IgorMinar) — `@schematics` is already reserved for the official Schematics made by the Angular team). The community NPM scope (`@ngxschematics`) would obviously be owned (and maintained) by the Angular core team. So (community) Schematics authors will have to send PRs to that repository to make their Schematics available (listed) in the Angular CLI search command (discussed here). This approach is similar to the [DefinitelyTyped](http://definitelytyped.org/) project (`@types/**`).

3. Have some sort of a "Market Place for Schematics" (out of the scope of this proposal). This could be merged with the previous solution.

4. Community Schematics authors would have to tag their schematics with an explicit set of tags, eg. `(angular, schematics)`. Community Schematics that aren't tagged using these keywords won't be listed by the Angular CLI search command (discussed here).

Other topics to cover (later) are:

1. list, update or remove local Schematics.
2. Replace an active Schematic, eg. defaults, with a new one.

The search process would be done by using 3rd party search APIs that interface with the NPM registry (offering probably better performances?), here are some of them:

1. [npms.io](https://npms.io/about)
2. [npmsearch.com](http://npmsearch.com/)
3. [github.com/algolia/npm-search](https://github.com/algolia/npm-search)
4. [npm search](https://docs.npmjs.com/cli/search)


Similar projects (inspiration):

- [https://github.com/maticzav/emma-cli](https://github.com/maticzav/emma-cli)
- [https://microsoft.github.io/TypeSearch/](https://microsoft.github.io/TypeSearch/)
- [Vue CLI search command](https://github.com/vuejs/vue-cli/commit/83939c9214609fe2db4d24a7f1f4b90f369355d2)


Please use Github's emoji to express your interest in this draft.

cc @hansl @Brocco @filipesilva

~[UPDATE] working prototype (https://github.com/manekinekko/angular-cli/blob/search-install-schematics/packages/%40angular/cli/tasks/schematic-search.ts)~

[UPDATE] upgrade ptotype to v6.0.0-rc.6 (https://github.com/manekinekko/angular-cli/commit/37063374c731386b460fff925183a9d461d0a364)

![angular-schematics](https://user-images.githubusercontent.com/1699357/37805910-460a474a-2e3d-11e8-8161-a2179808b8b8.gif)

Beitragsleitfaden

Beitragsleitfaden öffnen

Rechercherichtung

Beginne mit packages/@angular/cli/tasks/schematic-search.ts und dem verknüpften Prototyp-Commit und vergleiche anschließend dessen Verhalten mit den ng search-Beispielen im RFC. Überprüfe, wie die Identifizierung der NPM-Registry und von Schematics-Paketen voraussichtlich funktionieren soll, einschließlich des Hinweises, dass die Installation über ng add implementiert wurde. Die Abschlusskriterien für Suche, interaktive Auswahl, Paketerkennung und lokale Installation müssen noch vereinbart werden.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Bewertung

Tech-Stack
angular, typescript
Bereich
cli, tooling
Issue-Typ
Feature
Schwierigkeit
5/5
Geschätzter Aufwand
Über eine Woche
Aktivitätsstatus
Veraltet
Klarheit
Muss geklärt werden
Anfängerfreundlichkeit
25/100

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.