How to target filepath in custom Angular Schematics?

Question

I am currently trying to create my own custom Angular Schematics. I have the following:

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


// You don't have to export the function as default. You can also have more than one rule factory
// per file.
export function pxSchematics(options: any): Rule {
  return (tree: Tree, _context: SchematicContext) => {
    tree.create(options.name || 'hello', 'world');
    return tree;
  };
}

Which just creates a file with 'hello world'. How would I alter the file path for the tree, so that it outputs the file in a custom directory of sorts? Thank you.

score 5 · Accepted Answer · edited Jul 13 '18 at 05:17

5

You can just specify the desired path:

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

export function pxSchematics(options: any): Rule {
  return (tree: Tree, _context: SchematicContext) => {
    tree.create(options.name || normalize('sorts/hello'), 'world');
    return tree;
  };
}

edited Jul 13 '18 at 05:17

Charlie-Greenman

1,469
1
16
36

answered Jul 10 '18 at 19:13

eko

39,722
10
72
98

can the options.name route be outside of the schematics projct, in an upper folder level? – Ricardo Daniel Mar 29 '19 at 20:57
1

@RicardoDaniel I think the top of the tree is where you execute the command. You can use nodejs methods tho.. – eko Mar 29 '19 at 22:29
actually yes.... the options.name is outside of the schematics project, that's the issue i think. Do you say that I can use for example the Node.js file system module for that? – Ricardo Daniel Mar 29 '19 at 23:33
I tried to create a file with base node.js code and it works. Apparently the top is the schematics project directory. Instead I will refactor, read the file with node.js and just use the top limit write of schematics (it may be due to security reasons) – Ricardo Daniel Mar 29 '19 at 23:38
@RicardoDaniel you can also write it with nodejs too :) At that point, schematics just give some convenience with the cli commands i guess – eko Mar 30 '19 at 11:00
1

yes... actually, after lot's of work i decided to go with a hook postinstall, schematics is great for templating, dealing with project structure, but on the case you change on angular.json some routes to make your app scale,it is pretty difficult to handle those situations outside of the main directory – Ricardo Daniel Apr 02 '19 at 16:20

score 0 · Answer 2 · answered Jul 10 '18 at 08:41

you can do something like that

import {chain, move, Rule, SchematicContext, Tree} from "@angular-devkit/schematics";
import {Schema as ApplicationOptions} from "@schematics/angular/application/schema";

export default function (options: ApplicationOptions): Rule {
    return (tree: Tree, _context: SchematicContext) => {
        console.log(_context);
        const result = (tree: Tree, _context: SchematicContext) => {
            tree.create(options.name || 'hello', 'world')
            return tree;
        }
        // Here you can get whatever from options
        const desiredPath = 'src';
        return chain([
                result,
                move(options.name || 'hello', `${desiredPath}/${options.name || 'hello'}`)
            ]
        )(tree, _context);
    }
}

yes, i tried it... but it keeps saying: Error: Path "/../../src/hello" is invalid. — Ricardo Daniel, Mar 29 '19 at 23:26

How to target filepath in custom Angular Schematics?

2 Answers2