@angular/devkit

schematics.md

@angular-devkit/schematics MEMO

command

generate schematics and development

# generate new schematics project
schematics blank --name=[schematics Name]

# add collection
schematics blank --name=[collenction Name]

# building
npm run build

# local checking
schematics .:[collenction名] [--Options]

create new project (ng new)

In ng-new, use workspace, application.

• ng new
  • ng-new
    • application
    • workspace

# Run on exists project
schematics blank --name=application
# global link
npm link ${generate schematics project path}

./src/application/index.ts

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

export function application(options: any): Rule {
  return chain([
    externalSchematic('@schematics/angular', 'application', options),
  ]);
}

• generate my project

ng new --collection=[schematics Name] [application name]

file generate / update

# angular-cli initialize
ng new my-project
cd my-project
# global link
npm link ${generate schematics project path}

# generate my collection
ng g [schematics名]:[Collection名] [--Options]

Code Chips

Update existing code

function readTypeScript(options: any): Rule {
  return (host: Tree, context: SchematicContext) => {
    host.getDir('/files').visit(filePath => {
      if (!filePath.endsWith('.ts')) {
        return ;
      }
      const text = host.read(filePath);
      if (text === null) {
        throw new SchematicsException(`File ${filePath} does not exist.`);
      }

      const declarationRecorder = host.beginUpdate(filePath);
      /** 
       * Update existing code
      **/
      host.commitUpdate(declarationRecorder);

    });

    return host;
  };
}

export function updateCode(options: any): Rule {
  return branchAndMerge(chain([
    readTypeScript(options),
  ]));
}

readme

sample of how to make

Links

tutorial

AsT Explorer

take a look

• use ng new --collenction [SchematicsName]