Custom Angular Schematics: how to modify files and create files in different locations/folders

I've been creating a custom Angular Schematics following this article: https://medium.com/@tomastrajan/total-guide-to-custom-angular-schematics-5c50cf90cdb4

Now I'm trying to find out how to modify some files (for example app-routing.module.ts, to add the route of the component created via my custom schematics). Is it possible? Could anyone provide an example?

I also would like to create files in different locations/folders at the same time.

This is the current structure of my custom schematics:

src

table

files

__name@dasherize __-table

__name@dasherize __-table-routing.module.ts

__name@dasherize __-table.component.html

__name@dasherize __-table.component.scss

...

index.ts

schema.d.ts

schema.json

collection.json

...

And this is my current code:

index.ts

import { strings } from '@angular-devkit/core';
import {
    apply, mergeWith, move, Rule, SchematicContext, SchematicsException, template, Tree, url
} from '@angular-devkit/schematics';
import { parseName } from '@schematics/angular/utility/parse-name';
import { buildDefaultPath } from '@schematics/angular/utility/project';

import { Schema } from './schema';

export function tabla(_options: Schema): Rule {
  return (tree: Tree, _context: SchematicContext) => {
    const workspaceConfigBuffer = tree.read('angular.json');

    if (!workspaceConfigBuffer) {
      throw new SchematicsException('Not an Angular CLI workspace');
    }

    const workspaceConfig = JSON.parse(workspaceConfigBuffer.toString());
    const projectName = _options.project || workspaceConfig.defaultProject;
    const project = workspaceConfig.projects[projectName];
    const defaultProjectPath = buildDefaultPath(project);
    const parsedPath = parseName(defaultProjectPath, _options.name);
    const { name, path } = parsedPath;
    const sourceTemplate = url('./files');

    const sourceParametrizedTemplate = apply(sourceTemplate, [
      template({
        ..._options,
        ...strings,
        name
      }),
      move(path)
    ]);

    return mergeWith(sourceParametrizedTemplate)(tree, _context);
  };
}

schema.json

{
    "$schema": "http://json-schema.org/schema",
    "id": "SchematicsTable",
    "title": "Options Table Schema",
    "type": "object",
    "description": "Creates a page with a table",
    "properties": {
        "project": {
            "type": "string",
            "description": "Generates in a specific project"
        },
        "name": {
            "type": "string",
            "description": "Component's name",
            "$default": {
                "$source": "argv",
                "index": 0
            }
        }
    },
    "required": [
        "name"
    ]
}

schema.d.ts

export interface Schema {
    project?: string;
    name: string;
}

collection.json

{
  "$schema": "../node_modules/@angular-devkit/schematics/collection-schema.json",
  "schematics": {
    "table": {
      "description": "Page with a table",
      "factory": "./table/index#table",
      "schema": "./table/schema.json"
    }
  }
}

Now if I execute "ng g my_package_name:table --name=example" in an Angular CLI workspace a folder "example-table" is created inside "src/app" with the following files inside it:

example-table-routing.module.ts

example-table.component.html

example-table.component.scss

...

This alreay works fine, but what I would like is that at the same time this folder and files are created, the "app-routing.module.ts" file is modified adding the route of the example-table page and also creates a folder with some files in the folder "src/app/services".

Recommended topics

Hot tags