Error creating application with @angular/bazel

[fabriziodebortoli]

🐞 Bug report

I would like to try Angular with Bazel following the instructions of the page https://next.angular.io/guide/bazel but I have errors both during the ng new and during the ng build

Command (mark with an x)

- [x] new
- [x] build

Description

ng new --collection=@angular/bazel throws an error

EDIT: After installing @angular/bazel package, also ng build throws an ERROR

🔬 Minimal Reproduction

npm i -g @angular/cli@next @angular/bazel@next

ng new --collection=@angular/bazel

🔥 Exception or Error

An unhandled exception occurred: Cannot find module '@angular-devkit/schematics'
Require stack:
- C:\Users\Admin\AppData\Roaming\npm\node_modules\@angular\bazel\src\schematics\ng-new\index.js
- C:\Users\Admin\AppData\Roaming\npm\node_modules\@angular\cli\node_modules\@angular-devkit\schematics\tools\export-ref.js
- C:\Users\Admin\AppData\Roaming\npm\node_modules\@angular\cli\node_modules\@angular-devkit\schematics\tools\index.js
- C:\Users\Admin\AppData\Roaming\npm\node_modules\@angular\cli\utilities\json-schema.js
- C:\Users\Admin\AppData\Roaming\npm\node_modules\@angular\cli\models\command-runner.js
- C:\Users\Admin\AppData\Roaming\npm\node_modules\@angular\cli\lib\cli\index.js
- C:\Users\Admin\AppData\Roaming\npm\node_modules\@angular\cli\lib\init.js
- C:\Users\Admin\AppData\Roaming\npm\node_modules\@angular\cli\bin\ng
See "C:\Users\Admin\AppData\Local\Temp\ng-2XKNxH\angular-errors.log" for further details.

🌍 Your Environment

Angular CLI: 9.0.0-rc.1
Node: 12.13.0
OS: win32 x64
Angular:
...

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.900.0-rc.1
@angular-devkit/core         9.0.0-rc.1
@angular-devkit/schematics   9.0.0-rc.1
@schematics/angular          9.0.0-rc.1
@schematics/update           0.900.0-rc.1
rxjs                         6.5.3

Anything else relevant?
I tried to do

ng new bazel-project
# and
ng add @angular/bazel

but with this output:

Installing packages for tooling via npm.
An unhandled exception occurred: spawnSync npm ENOENT
Package install failed, see above.
See "C:\Users\Admin\AppData\Local\Temp\ng-j3oYip\angular-errors.log" for further details.

EDIT: `ng add @angular/bazel' throws an error but will be solved with angular/angular-cli#16112

[alan-agius4]

The second issue is the same as angular/angular-cli#16115 and will be solved with angular/angular-cli#16112

[fabriziodebortoli]

The second issue is the same as angular/angular-cli#16115 and will be solved with angular/angular-cli#16112

I confirm, I applied locally angular/angular-cli#16112 and after ng add @angular/bazel returns Packages installed successfully.

Now, I'm trying ng build --leaveBazelFilesOnDisk but with thisoutput:

INFO: Call stack for the definition of repository 'npm' which is a npm_install (rule definition at C:/users/debortoli/_bazel_debortoli/lnul7bey/external/build_bazel_rules_nodejs/internal/npm_install/npm_install.bzl:298:15
):
 - C:/users/debortoli/_bazel_debortoli/lnul7bey/external/build_bazel_rules_nodejs/index.bzl:77:5
 - C:/microarea/bazel/WORKSPACE:64:1
ERROR: An error occurred during the fetch of repository 'npm':
   npm_install failed:
> bazel@0.0.0 postinstall C:
g-proj\bazel
> ngcc --properties es2015 browser module main --first-only --create-ivy-entry-points

 (npm WARN rollback Rolling back node-pre-gyp@0.12.0 failed (this is probably harmless): EPERM: operation not permitted, scandir 'C:
g-proj\bazel\node_modules\webpack-dev-server\node_modules\fsevents\node_modules'
The system cannot find the path specified.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! bazel@0.0.0 postinstall: `ngcc --properties es2015 browser module main --first-only --create-ivy-entry-points`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the bazel@0.0.0 postinstall script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Admin\AppData\Roaming\npm-cache\_logs\2019-11-08T13_04_26_484Z-debug.log
)
ERROR: no such package '@npm//': npm_install failed:
> bazel@0.0.0 postinstall C:
g-proj\bazel
> ngcc --properties es2015 browser module main --first-only --create-ivy-entry-points

 (npm WARN rollback Rolling back node-pre-gyp@0.12.0 failed (this is probably harmless): EPERM: operation not permitted, scandir 'C:
g-proj\bazel\node_modules\webpack-dev-server\node_modules\fsevents\node_modules'
The system cannot find the path specified.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! bazel@0.0.0 postinstall: `ngcc --properties es2015 browser module main --first-only --create-ivy-entry-points`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the bazel@0.0.0 postinstall script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Admin\AppData\Roaming\npm-cache\_logs\2019-11-08T13_04_26_484Z-debug.log
)
ERROR: no such package '@npm//': npm_install failed:
> bazel@0.0.0 postinstall C:
g-proj\bazel
> ngcc --properties es2015 browser module main --first-only --create-ivy-entry-points

 (npm WARN rollback Rolling back node-pre-gyp@0.12.0 failed (this is probably harmless): EPERM: operation not permitted, scandir 'C:
g-proj\bazel\node_modules\webpack-dev-server\node_modules\fsevents\node_modules'
The system cannot find the path specified.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! bazel@0.0.0 postinstall: `ngcc --properties es2015 browser module main --first-only --create-ivy-entry-points`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the bazel@0.0.0 postinstall script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Admin\AppData\Roaming\npm-cache\_logs\2019-11-08T13_04_26_484Z-debug.log
)
INFO: Elapsed time: 13.765s
INFO: 0 processes.
FAILED: Build did NOT complete successfully (0 packages loaded)
C:
g-proj\bazel\node_modules\@bazel\bazel\node_modules\@bazel\bazel-win32_x64\bazel-0.28.1-windows-x86_64.exe failed with code 1.

[manklu]

@fabriziodebortoli From my limited experience it works better with yarn.

bazel-0.28.1-windows-x86_64.exe failed with code 1.

Is the Visual C++ Redistributable for Visual Studio 2015 installed on your machine?
See https://docs.bazel.build/versions/1.1.0/install-windows.html

And you will need Bash. You can either install MSYS2 or use the executable from Git.

[IgorMinar]

I can't reproduce this with 9.0.0-rc.1 on mac.

But let's assume that the first part of this issue should be resolved by the next rc version of the CLI via angular/angular-cli#16112.

The second part seems to be related to invoking ngcc during npm postinstall.

can you try running npm install in the project folder and report any errors?

[fabriziodebortoli]

The second part seems to be related to invoking ngcc during npm postinstall.

can you try running npm install in the project folder and report any errors?

npm install completed successfully with no errors.
But ng build error remains

[fabriziodebortoli]

@fabriziodebortoli From my limited experience it works better with yarn.

I tried:

rimraf node_modules

yarn install # Completed successfully

ng build

with output:

ERROR: error loading package '': Unable to load file '@io_bazel_rules_webtesting//web/versioned:browsers-0.3.2.bzl': file doesn't exist
ERROR: error loading package '': Unable to load file '@io_bazel_rules_webtesting//web/versioned:browsers-0.3.2.bzl': file doesn't exist
INFO: Elapsed time: 75.143s
INFO: 0 processes.
FAILED: Build did NOT complete successfully (0 packages loaded)
C:\Microarea\bazel\node_modules\@bazel\bazel-win32_x64\bazel-0.28.1-windows-x86_64.exe failed with code 1.

[JiaLiPassion]

@fabriziodebortoli, I met the same issue before,
could you try.

yarn bazel clean --expunge
rimraf node_modules

then build again.

[IgorMinar]

I can't reproduce this on mac with 9.0.0-rc.2 any more. Does the issue reproduce for you?

Steps I used:

yarn global add @angular/cli@next @angular/bazel@next
ng new --collection=@angular/bazel bazel-v9-test
cd bazel-v9-test
yarn ng serve