Build/Snap error @angular/compiler-cli/ngcc

[v4ssi404]

Hello,

i am having trouble to build/snap a component.

bit build
✔ found 1 components to build
✔ running pre install subscribers
✔ deduping dependencies for installation
...bff0a3547e3c65c1ec5a5595f408827165a11 |  +28 +++
Packages are hard linked from the content-addressable store to the virtual store.
  Content-addressable store is at: /home/pixel/.pnpm-store/v3
  Virtual store is at:             ../../Library/Caches/Bit/capsules/b85bff0a3547e3c65c1ec5a5595f408827165a11/node_modules/.pnpm
...bff0a3547e3c65c1ec5a5595f408827165a11 | Progress: resolved 28, reused 28, downloaded 0, added 28, done
  -------------------------
✔ installing dependencies using pnpm
Cannot find module '@angular/compiler-cli/ngcc'
Require stack:
- /home/pixel/Library/Caches/Bit/capsules/5d80ac32eac50bb23e9f86198a31b2abb95aa781/teambit.angular_angular@0.0.60/dist/webpack-plugins/ngcc-processor.js
- /home/pixel/Library/Caches/Bit/capsules/5d80ac32eac50bb23e9f86198a31b2abb95aa781/teambit.angular_angular@0.0.60/dist/index.js
- /home/pixel/Library/Caches/Bit/capsules/5d80ac32eac50bb23e9f86198a31b2abb95aa781/teambit.angular_angular-v13@0.0.25/dist/angular-v13.main.runtime.js
- /home/pixel/.bvm/versions/0.0.766/bit-0.0.766/node_modules/@teambit/scope/dist/scope.main.runtime.js
- /home/pixel/.bvm/versions/0.0.766/bit-0.0.766/node_modules/@teambit/bit/dist/load-bit.js
- /home/pixel/.bvm/versions/0.0.766/bit-0.0.766/node_modules/@teambit/bit/dist/app.js
- /home/pixel/.bvm/versions/0.0.766/bit-0.0.766/node_modules/@teambit/bit/bin/bit

Here is my package.json, i deleted node_modules and package-lock.json and reinstalled all dep to be sure that i have all versions to 13.2.6

{
  "name": "angular-core-backend",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve --watch --poll=2000",
    "build": "ng build",
    "serve": "http-server ./dist/angular-core-backend -p 4201 --cors",
    "test": "echo \"There are no tests for now.\"",
    "lint": "ng lint",
    "lint-fix": "ng lint --fix",
    "e2e": "ng e2e",
    "format:write": "prettier src/**/*.{ts,json,md,scss,html} --write",
    "format:test": "prettier src/**/*.{ts,json,md,scss,html} --list-different",
    "postinstall": "bit compile && bit link"
  },
  "private": true,
  "husky": {
    "hooks": {
      "pre-commit": "pretty-quick --staged"
    }
  },
  "dependencies": {
    "@angular/animations": "13.2.6",
    "@angular/cdk": "^11.0.0",
    "@angular/common": "13.2.6",
    "@angular/compiler": "13.2.6",
    "@angular/core": "13.2.6",
    "@angular/forms": "13.2.6",
    "@angular/platform-browser": "13.2.6",
    "@angular/platform-browser-dynamic": "13.2.6",
    "@angular/router": "13.2.6",
    "@auth0/angular-jwt": "^3.0.0",
    "@ckeditor/ckeditor5-angular": "^1.1.2",
    "@ckeditor/ckeditor5-build-classic": "^15.0.0",
    "@ng-select/ng-select": "^8.0.0",
    "@ngx-translate/core": "^12.1.2",
    "@ngx-translate/http-loader": "^4.0.0",
    "@tinymce/tinymce-angular": "^4.2.4",
    "@types/lodash": "^4.14.149",
    "chart.js": "^2.9.4",
    "chartjs-chart-treemap": "0.2.3",
    "chartjs-plugin-datalabels": "^1.0.0",
    "dom-to-image": "^2.6.0",
    "exceljs": "^1.12.0",
    "file-saver": "^2.0.2",
    "flag-icons": "^6.1.1",
    "google-libphonenumber": "^3.2.27",
    "icheck-bootstrap": "^3.0.1",
    "intl-tel-input": "^17.0.3",
    "jspdf": "^2.3.1",
    "jspdf-autotable": "^3.5.14",
    "libphonenumber-js": "^1.9.50",
    "lodash": "^4.17.15",
    "mathjs": "^8.1.0",
    "ngx-bootstrap": "^5.1.2",
    "ngx-drag-drop": "^2.0.0",
    "ngx-intl-tel-input": "^3.1.3",
    "ngx-toastr": "^11.3.3",
    "rxjs": "~6.6.7",
    "tslib": "^2.0.0",
    "xss": "^1.0.9",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "13.2.6",
    "@angular-eslint/builder": "13.1.0",
    "@angular-eslint/eslint-plugin": "13.1.0",
    "@angular-eslint/eslint-plugin-template": "13.1.0",
    "@angular-eslint/schematics": "13.1.0",
    "@angular-eslint/template-parser": "13.1.0",
    "@angular/cli": "13.2.6",
    "@angular/compiler-cli": "13.2.6",
    "@angular/language-service": "13.2.6",
    "@types/jasmine": "~3.6.0",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "^12.11.1",
    "@typescript-eslint/eslint-plugin": "5.11.0",
    "@typescript-eslint/parser": "5.11.0",
    "eslint": "^8.2.0",
    "eslint-plugin-unused-imports": "^2.0.0",
    "http-server": "^0.12.1",
    "husky": "^3.0.9",
    "jasmine-core": "~3.6.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "~6.3.17",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage-istanbul-reporter": "~3.0.2",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "^1.5.0",
    "prettier": "^2.6.1",
    "pretty-quick": "^2.0.0",
    "protractor": "~7.0.0",
    "ts-node": "~7.0.0",
    "typescript": "~4.5.5"
  }
}

Any hint? ty

[ocombe]

Did you switch from pnpm to yarn at some point ? If so, you need to delete both the node modules and the aspect's root capsule (you can find its location with bit capsule list)

[v4ssi404]

No i didn't.
It's my first use of Bit, and i am doing the first setup into an already working project.

The command response is this one:

found 3 capsule(s) for workspace:  /home/pixel/PhpstormProjects/angular-core-backend
workspace capsules root-dir:       /home/pixel/Library/Caches/Bit/capsules/b85bff0a3547e3c65c1ec5a5595f408827165a11
scope's aspects capsules root-dir: /home/pixel/Library/Caches/Bit/capsules/5d80ac32eac50bb23e9f86198a31b2abb95aa781
use --json to get the list of all workspace capsule

[ocombe]

oh so your current project already has node modules installed with npm ?

[v4ssi404]

Yes as you can see i am also not using bit install but i have added "postinstall": "bit compile && bit link" to my package.json

[ocombe]

Then this is why it is not working. In a bit workspace you need to use bit install because we install dependencies in a very specific way.
If you have dependencies in your package.json they will also be installed when you run bit install

[v4ssi404]

Ok, so this part of the docs does not apply to Angular env?

When using package managers directly
If you choose not to use Bit to manage dependencies in the project, ensure to add bit compile && bit link to your package.json as >post-install scripts.

[v4ssi404]

I deleted again package-lock.json and also node_modules dir, i removed "postinstall": "bit compile && bit link" and i have now used bit install.
Same error but now i have a pnpm-lock.yaml file.

[ocombe]

Ok so there are a few things that can cause these issues:

• you should use yarn as a package manager for bit, instead of pnpm which doesn't work well with some angular packages right now (we are working on a fix), if you switch from pnpm to yarn, make sure to delete node modules and the aspect's root capsule at /home/pixel/Library/Caches/Bit/capsules/5d80ac32eac50bb23e9f86198a31b2abb95aa781 before you run bit install again
• you have dependencies in your package.json which will probably create issues with bit angular: angular/cli and angular/compiler-cli

The easiest way to make all of that work is to start from a fresh workspace using the workspace generator. Is there any reason why you want to use this existing workspace?

[v4ssi404]

Ok ty, i will try with yarn, so basically i must not use npm install anymore? why yarn? just for knowledge.

This repo it is like a core/boiler plate where we would like to start projects from, of course into the new repos we would link bit packages instead of copypasting.

I was just playing around with Bit, in my mind i was just planning to create a "library" repo just for bit and then link them into the boilerplate repo, you think this is better?

What about this?

Ok, so this part of the docs does not apply to Angular env?

When using package managers directly
If you choose not to use Bit to manage dependencies in the project, ensure to add bit compile && bit link to your package.json as >post-install scripts.

Thank you.