Angular Schematics - Apply thounsand of change on tree cause error Maximum call stack size exceeded

Question

I try to migrate a big AngularJs project to Angular. I found the Angular Schematics to be a good way to automate some tasks.

My first task is to create components for each folder and I have about 1200 components to create.

My function look like this:

return (tree: Tree, _context: SchematicContext) => {
    const directory = tree.getDir('my_path/pages');

    const rules: Rule[] = [];
    directory.visit((filePath) => {
        if (!filePath.endsWith('config.ts')) {
            return;
        }

        const parsedPath = parseName(dirPath, basename(filePath).split('.')[0]);
        options = {
            path: parsedPath.path,
            name: parsedPath.name
        };

        const templateSource = apply(
            url('./files'),
            [
                applyTemplates({
                    ...strings,
                    ...options
                }),
                move(parsedPath.path)
            ]
        );

        const rule = mergeWith(templateSource);
        rules.push(rule);
    });

    return chain(rules);
};

So I end up to chain 1200 rules to my tree and this cause the error Maximum call stack size exceeded. How can I effectively apply model-based component creation?

*The code is working for a smaller project like 200 component creation.

I created an issue on the Github repo of Angular-Cli

Answer 1

Since the API accepts Promise, you can work around the bug by using asynchronous rules:

return chain(rules.map(rule => () => Promise.resolve(rule)));