[Schematics] 0. Schematics "Hello World"

1. Install schematics cli:

npm i -g @angular-devkit/schematics-cli@latest

 

2. Then run schematics to create a new blank project:

schematics blank --name=my-component

It creates folder with number of files for you.

CREATE /my-component/README.md (639 bytes)
CREATE /my-component/package.json (539 bytes)
CREATE /my-component/tsconfig.json (656 bytes)
CREATE /my-component/.gitignore (191 bytes)
CREATE /my-component/.npmignore (64 bytes)
CREATE /my-component/src/collection.json (231 bytes)
CREATE /my-component/src/my-component/index.ts (318 bytes)
CREATE /my-component/src/my-component/index_spec.ts (474 bytes)

3. One important thing to do now, open .npmignore, remove line:

*.ts

It is because when you do `npm pack` to publish your schematics, it will remove all ts files, which is not what we want.

 

4. src/collection.json:

{
  "$schema": "../node_modules/@angular-devkit/schematics/collection-schema.json",
  "schematics": {
    "my-component": {
      "description": "A blank schematic.",
      "factory": "./my-component/index#myComponent"
    }
  }
}

The highlighted part, is the name of your schematics. Run the following command from the my-component directory.

schematics .:my-component

By default schematics run in staging mode, which means it won't generate any files for you. Instaed you can run:

schematics .:my-component --dry-run=false

 

5. Let’s do something slightly more interesting than making sure it runs and create a hello.ts file. Modify my-component/index.ts to have a tree.create() command.

import { Rule, SchematicContext, Tree } from '@angular-devkit/schematics';

export function myComponent(_options: any): Rule {
  return (tree: Tree, _context: SchematicContext) => {
    tree.create('hello.ts', 'console.log("Hello, World")');
    return tree;
  };
}

describe('my-component', () => {
  it('works', () => {
    const runner = new SchematicTestRunner('schematics', collectionPath);
    const tree = runner.runSchematic('my-component', {}, Tree.empty());

    expect(tree.files).toEqual(['/hello.ts']);
  });
});