angular / angular/angular-cli

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

Open
#17,851 1 comment 3 reactions 0 assignees View on GitHub
area: @angular-devkit/schematics freq1: low severity3: broken type: bug/fix
Dominant language
TypeScript
Stars
27k
Forks
11.8k
Avg merge
14h 23m
Merged PRs (30d)
162

Description

# 🐞 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

Contributor guide

Open the contributing guide

Research direction

Start at the createPageComponents entry point in the reproduction, especially the rules array and chain(rules), and reproduce the failure with more than 1,000 schematics rules. Read the Angular Schematics execution path alongside the RxJS stack trace shown in the report. Done means applying the large set of page-component changes without a maximum call stack error.

Written by the indexing model from the issue text.

Assessment

Tech stack
angular, typescript
Domain
cli, tooling
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.