This repository is a basic Schematic implementation that serves as a starting point to create and publish Schematics to NPM.
To test locally, install @angular-devkit/schematics
globally and use the schematics
command line tool. That tool acts the same as the generate
command of the Angular CLI, but also has a debug mode.
Check the documentation with
npm install -g @angular-devkit/schematics-cli
schematics --help
npm run test
will run the unit tests, using Jasmine as a runner and test framework.
To publish, simply do:
npm run build
npm publish
That's it!
https://blog.angular.io/schematics-an-introduction-dc1dfbc2a2b2
https://github.com/angular/devkit/tree/master/packages/schematics/angular/enum
https://www.npmjs.com/package/json-schema-to-typescript
./node_modules/.bin/json2ts src/sam/schema.json > src/sam/schema.d.ts
npm run build
npm link
schematics my-schematics:sam awesome-sir --path dist --dry-run
default .gitignore
file which excludes compiled Javascript files and we get nice “module not found” error when we install and try to use collection which was published just with npm publish without any tweaking.
The simplest way to make this work is to remove the rule that ignores generated .js file from .gitignore so that they are published together with Typescript sources.
An elegant solutions with compiling Typescript sources into a dist folder and publishing the dist folder.
After publishing, to use the new schematics. ex: ng g schematics-name -c our-collection-name
. Remember that one collection can and probably will contain more than one useful schematic.
npm link my-schematics
ng g my-schematics:sam awesome-sause -c my-schematics --path dist
Schematics apply rules to the tree representing all existing project files and staging area which is a list of changes that will be applied to these files.
-
schematics collection — is a project (npm package) which contains at least one schematic
-
schematic — is a "recipe" which can be executed by using
ng generate <schematic-name>
to generate and adjust project files
https://github.com/angular/devkit/tree/master/packages/angular_devkit/schematics
String methods https://github.com/angular/devkit/blob/master/packages/angular_devkit/core/src/utils/strings.ts
Rules/base https://github.com/angular/devkit/blob/master/packages/angular_devkit/schematics/src/rules/base.ts
Angular CLI ng new APP_NAME
https://github.com/angular/devkit/blob/master/packages/schematics/angular/application/index.ts