Why do I have to add entries to package.json?

[evanchaoli]

I am following the Angular Example to migrate our Angular project to build with rules_js. I am new to Bazel, and I have managed to make the build work.

But during the migration, I had to add some entries to package.json which I consider unexpected. So I want to check with the community if I missed something or did something wrong.

Basically, before the migration, I could successfully build my project by npm:

$ npm install
$ npm run build

Following the example, I created WORKSPACE.bazel etc. files under my project, and updated APPLICATION_DEPS in defs.bzl with all entries from package.json. After that, I ran bazel build --verbose_failures //:app, and got errors like:

Browserslist: caniuse-lite is outdated. Please run:
  npx update-browserslist-db@latest
  Why you should do it regularly: https://github.com/browserslist/update-db#readme
- Generating browser application bundles (phase: setup)...
✔ Browser application bundle generation complete.
✔ Browser application bundle generation complete.
platform-dev-center:build:
./node_modules/rxjs/dist/esm/internal/observable/innerFrom.js:1:0-49 - Error: Module not found: Error: Can't resolve 'tslib' in '/private/var/tmp/_bazel_chaol/6e218f2fd61321d6163fce75effbf190/sandbox/darwin-sandbox/18/execroot/_main/bazel-out/darwin_x86_64-fastbuild/bin/node_modules/rxjs/dist/esm/internal/observable'

The original package.json doesn't contain an entry of tslib. But many other modules depend on tslib, npm install figured out the dependencies, and installed tslib. So that package-lock.json contains an entry of tslib:

    "tslib": {
      "version": "2.6.2",
      "resolved": "http://build-artifactory.eng.vmware.com/artifactory/api/npm/npm/tslib/-/tslib-2.6.2.tgz",
      "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q=="
    },

So I manually added "tslib": "2.6.2", to package.json and ran npm install to update package-lock.json, and also added tslib to APPLICATION_DEPS in defs.bzl. Then rerun bazel build --verbose_failures //:app fixed the error.

Similarly to tslib, I had to manually add quite a few other modules to package.json. Is that an expected behavior?

After fixed all such "module not found" errors, I got the finally error:

Browserslist: caniuse-lite is outdated. Please run:
  npx update-browserslist-db@latest
  Why you should do it regularly: https://github.com/browserslist/update-db#readme
- Generating browser application bundles (phase: setup)...
✔ Browser application bundle generation complete.
✔ Browser application bundle generation complete.
platform-dev-center:build:
Error: error TS2688: Cannot find type definition file for 'node'.
  The file is in the program because:
    Entry point of type library 'node' specified in compilerOptions


Error: src/app/components/platform-dev-center/platform-dev-center.component.ts:17:33 - error TS2591: Cannot find name 'require'. Do you need to install type definitions for node? Try `npm i --save-dev @types/node` and then add 'node' to the types field in your tsconfig.

17 const { version: appVersion } = require('../../../../package.json')
                                   ~~~~~~~
FAILURE

Then I followed the hint message to run npm i --save-dev @types/node, which fixed the problem. But I wonder why pure npm run build doesn't require to install @types/node?

[jbedard]

Does the angular example in https://github.com/aspect-build/bazel-examples have this issue? Can you reproduce the issue there to demonstrate the issue?