Angular Schematics - Apply thousands of changes on tree cause error "Maximum call stack size exceeded"

[fatalcaron]

🐞 Bug report

Description

I use Angular Schematics to migrate from AngularJs to Angular. The application is a large one with thousands of page. I try to create a component for each page based on a template. When I try to create the component on a smaller project like 200 pages it's working but when I fall on a large one with more than 1000 pages (1000 schematics rules)

🔬 Minimal Reproduction

export function createPageComponents(options: any): Rule {
    return (tree: Tree, context: SchematicContext) => {
        const logger = context.logger;
        const directory = tree.getDir('my_path/pages');

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

            const dirPath = dirname(filePath);
            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);
    };
}

🔥 Exception or Error

    RangeError: Maximum call stack size exceeded
        at Console.warn ()
        at Observable._trySubscribe (my_path\node_modules\rxjs\internal\Observable.js:55:25)
        at Observable.subscribe (my_path\node_modules\rxjs\internal\Observable.js:30:22)
        at MergeMapOperator.call (my_path\node_modules\rxjs\internal\operators\mergeMap.js:39:23)
        at Observable.subscribe (my_path\node_modules\rxjs\internal\Observable.js:25:31)
        at MapOperator.call (my_path\node_modules\rxjs\internal\operators\map.js:32:23)
        at Observable.subscribe (my_path\node_modules\rxjs\internal\Observable.js:25:31)
        at MapToOperator.call (my_path\node_modules\rxjs\internal\operators\mapTo.js:26:23)
        at Observable.subscribe (my_path\node_modules\rxjs\internal\Observable.js:25:31)
        at DefaultIfEmptyOperator.call (my_path\node_modules\rxjs\internal\operators\defaultIfEmpty.js:27:23)

🌍 Your Environment

Angular CLI: 9.1.4
Node: 10.19.0
OS: win32 x64

Angular: 9.1.4
... animations, cli, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router
Ivy Workspace: Yes

Package                            Version
------------------------------------------------------------
@angular-devkit/architect          0.901.4
@angular-devkit/build-angular      0.901.4
@angular-devkit/build-ng-packagr   0.901.4
@angular-devkit/build-optimizer    0.901.4
@angular-devkit/build-webpack      0.901.4
@angular-devkit/core               9.1.4
@angular-devkit/schematics         9.1.7
@angular-devkit/schematics-cli     0.901.7
@angular/upgrade                   9.1.9
@ngtools/webpack                   9.1.4
@schematics/angular                9.1.4 (cli-only)
@schematics/schematics             0.901.7
@schematics/update                 0.901.4
ng-packagr                         9.1.3
rxjs                               6.5.5
typescript                         3.8.3
webpack                            4.42.0

[blidblid]

In my library, this happens with 170~ rules.

Found a workaround though:

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