Running multiple build-storybook targets in parallel results in ngcc conflict error.

Current Behavior

Running multiple build-storybook targets in parallel (i.e. in affected or run-many use case) will result in an ngcc conflict error ngcc is already running at process with id [process id]. This is especially problematic running component tests with cypress using storybook in parallel as this will also result in the same error because this uses the build-storybook target.

Commands that will cause the error: npx nx run-many --target=build-storybook --projects=[project1,project2] --parallel npx nx run-many --target=e2e --all --parallel.

Expected Behavior

Running multiple build-storybook targets should not result in an ngcc lock error.

Steps to Reproduce

• Create a new Angular workspace
• Run npm
• Create 2 libs with 2 storybook configurations
• Run npx nx run-many --target=build-storybook --projects=[project1,project2] --parallel

An ngcc error should appear, presumably because they are both using the same app which will trigger a short lock.

Repo where error is reproduced after executing the above steps: https://github.com/LuukMoret/test-org Run command npm install and then run command npx nx run-many --target=build-storybook --projects=test,test2 --parallel or run npx nx run-many --target=e2e --all --parallel

Environment

Node : 14.17.5 OS : darwin x64 npm : 6.14.14

nx : Not Found @nrwl/angular : 12.7.2 @nrwl/cli : 12.7.2 @nrwl/cypress : 12.7.2 @nrwl/devkit : 12.7.2 @nrwl/eslint-plugin-nx : 12.7.2 @nrwl/express : Not Found @nrwl/jest : 12.7.2 @nrwl/linter : 12.7.2 @nrwl/nest : Not Found @nrwl/next : Not Found @nrwl/node : Not Found @nrwl/nx-cloud : Not Found @nrwl/react : Not Found @nrwl/schematics : Not Found @nrwl/tao : 12.7.2 @nrwl/web : Not Found @nrwl/workspace : 12.7.2 @nrwl/storybook : 12.7.2 @nrwl/gatsby : Not Found typescript : 4.3.5

[GrumpyMeow]

We are experiencing the same issue when running parallel E2E tests on Storybook. It seems the builder “@nrwl/cypress:cypress” (v12.5.8) does not support NGCC-lock-waiting.

> npm ls @nrwl/cypress
work-nx@0.1.0 
├─┬ @nrwl/angular@9.8.0
│ └── @nrwl/cypress@9.8.0 
├── @nrwl/cypress@12.5.8 
├─┬ @nrwl/storybook@12.9.0
│ └── @nrwl/cypress@12.9.0 
└─┬ @nrwl/web@12.6.2
  └── @nrwl/cypress@12.6.2 

Angular CLI: 9.1.15
Node: 14.17.6
OS: linux x64

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

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.901.15
@angular-devkit/build-angular     0.901.15
@angular-devkit/build-optimizer   0.901.15
@angular-devkit/build-webpack     0.901.15
@angular-devkit/core              9.1.15
@angular-devkit/schematics        9.1.15
@angular/cdk                      9.2.4
@angular/cli                      9.1.15
@angular/flex-layout              9.0.0-beta.31
@angular/material                 9.2.4
@ngtools/webpack                  9.1.15
@schematics/angular               9.1.15
@schematics/update                0.901.15
ng-packagr                        9.1.5
rxjs                              6.5.3
typescript                        3.8.3
webpack                           4.42.0

[Kamshak]

Found another solution for this, but hacky:

1. Before running parallel storybook builds (e.g. in pipeline) run ngcc once (took the parameters from what storybook passes): ngcc --create-ivy-entry-points --first-only
2. Patch the storybook package (I use patch-package for this) to prevent storybook from running ngcc again on each parallel instance:

diff --git a/node_modules/@storybook/angular/dist/ts3.9/server/framework-preset-angular-ivy.js b/node_modules/@storybook/angular/dist/ts3.9/server/framework-preset-angular-ivy.js
index deb7caf..90e9efd 100644
--- a/node_modules/@storybook/angular/dist/ts3.9/server/framework-preset-angular-ivy.js
+++ b/node_modules/@storybook/angular/dist/ts3.9/server/framework-preset-angular-ivy.js
@@ -131,7 +131,9 @@ exports.webpack = function (webpackConfig, options) { return __awaiter(void 0, v
                 if (angularOptions.enableIvy === false) {
                     return [2 /*return*/, webpackConfig];
                 }
-                exports.runNgcc();
+                if (!process.env.CI) {
+                  exports.runNgcc();
+                }
                 return [2 /*return*/, __assign(__assign({}, webpackConfig), { resolve: __assign(__assign({}, webpackConfig.resolve), { mainFields: [
                                 'es2015_ivy_ngcc',
                                 'module_ivy_ngcc',