angular / angular-cli

CLI tool for Angular
https://cli.angular.io
MIT License
26.73k stars 11.98k forks source link

unable to build due to @angular/cli FS dependency on client side #21325

Closed nhhockeyplayer closed 3 years ago

nhhockeyplayer commented 3 years ago

🐞 Bug report

all client side SPA use of package 'perf_hooks, 'os', 'fs' are non-existent we have no way of predicting what packages included in package.json use 'perf_hooks, 'os', 'fs'

so all builds fail now

Is this a regression?

Yes, the previous version in which this bug was not present was: angular 11 somehow the ecosystem was breached by npm issues and then the angular 12 changes creating a rabbit hole of all dependent build tools and compilers I use Nrwl Nx and they have mitigated some of this by governing WHICH typescript version to operate so my project does not have typescript installed as an npm package as you can see in the nx-report its found other projects in my mono-repo build fine... API, MOBILE APPS, but the two I am failing to build happen to have a large sass scaffold that gets built near the end and I do not know to what extent thats triggering these issues ### Description cannot build anymore with angular compiler ## πŸ”¬ Minimal Reproduction any attempt to upgrade to angular 12 will produce these issues are rampant on web ## πŸ”₯ Exception or Error ``` βœ” Browser application bundle generation complete. ./node_modules/typescript/lib/typescript.js:4747:17-38 - Warning: Module not found: Error: Can't resolve 'perf_hooks' in '/Users/me/u/app/node_modules/typescript/lib' BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default. This is no longer the case. Verify if you need this module and configure a polyfill for it. If you want to include a polyfill, you need to: - add a fallback 'resolve.fallback: { "os": require.resolve("os-browserify/browser") }' - install 'os-browserify' If you don't want to include a polyfill, you can use an empty module like this: resolve.fallback: { "os": false } BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default. This is no longer the case. Verify if you need this module and configure a polyfill for it. If you want to include a polyfill, you need to: - add a fallback 'resolve.fallback: { "path": require.resolve("path-browserify") }' - install 'path-browserify' If you don't want to include a polyfill, you can use an empty module like this: resolve.fallback: { "path": false } ## 🌍 Your Environment ``` Angular CLI: 12.1.1 Node: 16.3.0 (Unsupported) Package Manager: yarn 1.22.10 OS: darwin x64 Angular: undefined ... Package Version ------------------------------------------------------ @angular-devkit/architect 0.1201.1 (cli-only) @angular-devkit/core 12.1.1 (cli-only) @angular-devkit/schematics 12.1.1 (cli-only) @schematics/angular 12.1.1 (cli-only) Warning: The current version of Node (16.3.0) is not supported by Angular. > NX Report complete - copy this into the issue template Node : 16.3.0 OS : darwin x64 yarn : 1.22.10 nx : 11.6.3 @nrwl/angular : 12.5.7 @nrwl/cli : 12.5.7 @nrwl/cypress : 12.5.7 @nrwl/devkit : 12.5.7 @nrwl/eslint-plugin-nx : 12.5.7 @nrwl/express : Not Found @nrwl/jest : 12.5.7 @nrwl/linter : 12.5.7 @nrwl/nest : 12.5.7 @nrwl/next : Not Found @nrwl/node : 12.5.7 @nrwl/react : Not Found @nrwl/schematics : 8.12.11 @nrwl/tao : 12.5.7 @nrwl/web : Not Found @nrwl/workspace : 12.5.7 @nrwl/storybook : 12.5.7 @nrwl/gatsby : Not Found typescript : 4.3.5 ``` **Anything else relevant?**

browsers do not support the packages specified and they need to be muted for the build to succeed which fails to mute

we are then forced to start installing WEBPACK builders and npm packages for webpack

alan-agius4 commented 3 years ago

Duplicate of https://github.com/angular/angular-cli/issues/20910

nhhockeyplayer commented 3 years ago

Well angular is elite. Ngrx was the 2nd best standard. Now Nrwl/Nx is attempting to take it to the stars.

Velicoty has been crippled I cannot even prototype anymore like I did with angular-11. weeks and months struggling with build issues flanked from all angles... webpack...sass... npm...angular compiler... NODE... its quite the tangle unforeseen with my project which fairly tests limits and capacities. SO attention is appreciated and warranted my issues are valid and legit I tear thru apps/servers with high velocity and I havent been able to build since june.

Im pro angular 110% and surviving, presenting and advocating this product in the field at very sensitive and high end clients defense and govt

This has to be tightened up Victors masterpiece is being threatened at this time.

My friend across the street from me works for oracle... did angular for oracle for years and now says they are on react now even though he likes and prefers angular.

I highly suggest to review who is committing and what being committed

nhhockeyplayer commented 3 years ago
{
  "name": "starter",
  "version": "0.0.0",
  "license": "MIT",

  "scripts": {
    "ng": "nx",
    "postinstall": "node ./decorate-angular-cli.js && ngcc --properties es2015 browser module main",
    "nx": "nx",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "nx workspace-lint && ng lint",
    "e2e": "ng e2e",
    "affected:apps": "nx affected:apps",
    "affected:libs": "nx affected:libs",
    "affected:build": "nx affected:build",
    "affected:e2e": "nx affected:e2e",
    "affected:test": "nx affected:test",
    "affected:lint": "nx affected:lint",
    "affected:dep-graph": "nx affected:dep-graph",
    "affected": "nx affected",
    "format": "nx format:write",
    "format:write": "nx format:write",
    "format:check": "nx format:check",
    "update": "nx migrate latest",
    "workspace-generator": "nx workspace-generator",
    "dep-graph": "nx dep-graph",
    "help": "nx help"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "12.1.4",
    "@angular/cdk": "^12.1.3",
    "@angular/common": "12.1.4",
    "@angular/compiler": "12.1.4",
    "@angular/core": "12.1.4",
    "@angular/flex-layout": "^12.0.0-beta.34",
    "@angular/forms": "12.1.4",
    "@angular/material": "12.1.4",
    "@angular/platform-browser": "12.1.4",
    "@angular/platform-browser-dynamic": "12.1.4",
    "@angular/router": "12.1.4",
    "@auth0/angular-jwt": "^5.0.2",
    "@capacitor/cli": "^3.1.2",
    "@capacitor/core": "^3.1.2",
    "@fortawesome/angular-fontawesome": "^0.9.0",
    "@fortawesome/fontawesome-free": "^5.15.3",
    "@fortawesome/fontawesome-svg-core": "^1.2.35",
    "@fortawesome/free-brands-svg-icons": "^5.15.3",
    "@fortawesome/free-solid-svg-icons": "^5.15.3",
    "@ionic-native/android-permissions": "^5.34.0",
    "@ionic-native/app-center-analytics": "^5.34.0",
    "@ionic-native/app-center-crashes": "^5.34.0",
    "@ionic-native/app-version": "^5.34.0",
    "@ionic-native/background-mode": "^5.34.0",
    "@ionic-native/call-number": "^5.34.0",
    "@ionic-native/core": "^5.34.0",
    "@ionic-native/deeplinks": "^5.34.0",
    "@ionic-native/document-viewer": "^5.34.0",
    "@ionic-native/file": "^5.34.0",
    "@ionic-native/file-opener": "^5.34.0",
    "@ionic-native/file-path": "^5.34.0",
    "@ionic-native/file-transfer": "^5.34.0",
    "@ionic-native/fingerprint-aio": "^5.34.0",
    "@ionic-native/in-app-browser": "^5.34.0",
    "@ionic-native/insomnia": "^5.34.0",
    "@ionic-native/local-notifications": "^5.34.0",
    "@ionic-native/native-storage": "^5.34.0",
    "@ionic-native/network": "^5.34.0",
    "@ionic-native/qr-scanner": "^5.34.0",
    "@ionic-native/sms-retriever": "^5.34.0",
    "@ionic-native/splash-screen": "^5.34.0",
    "@ionic-native/status-bar": "^5.34.0",
    "@ionic-native/vibration": "^5.34.0",
    "@ionic/angular": "^5.6.12",
    "@ionic/storage": "^3.0.4",
    "@nestifyjs/cookie": "^0.1.0",
    "@nestjs/common": "^8.0.3",
    "@nestjs/config": "^1.0.0",
    "@nestjs/core": "^8.0.3",
    "@nestjs/graphql": "^8.0.2",
    "@nestjs/jwt": "^8.0.0",
    "@nestjs/microservices": "^8.0.3",
    "@nestjs/mongoose": "^8.0.0",
    "@nestjs/passport": "^8.0.0",
    "@nestjs/platform-express": "^8.0.3",
    "@nestjs/platform-socket.io": "^8.0.3",
    "@nestjs/swagger": "^5.0.3",
    "@nestjs/typeorm": "^8.0.1",
    "@nestjs/websockets": "^8.0.3",
    "@nestjsplus/cookies": "^1.1.1",
    "@nestjsx/crud": "^5.0.0-alpha.3",
    "@nestjsx/crud-request": "^4.6.2",
    "@nestjsx/crud-typeorm": "^5.0.0-alpha.3",
    "@ngrx/effects": "12.2.0",
    "@ngrx/entity": "12.2.0",
    "@ngrx/router-store": "12.2.0",
    "@ngrx/schematics": "12.2.0",
    "@ngrx/store": "12.2.0",
    "@ngrx/store-devtools": "12.2.0",
    "@ngx-translate/core": "^13.0.0",
    "@ngx-translate/http-loader": "^6.0.0",
    "@nrwl/angular": "12.6.3",
    "@nrwl/schematics": "^8.12.11",
    "@nxtend/capacitor": "^11.0.0",
    "@nxtend/ionic-angular": "11.1.1",
    "add": "^2.0.6",
    "amazon-cognito-identity-js": "^5.0.3",
    "angular-builder-custom-terser-options": "^1.0.1",
    "animate.css": "^4.1.1",
    "assert": "^2.0.0",
    "bcrypt": "^5.0.1",
    "bcrypt-nodejs": "^0.0.3",
    "bootstrap": "^5.0.2",
    "browser-detect": "^0.2.28",
    "chart.js": "^3.2.1",
    "class-transformer": "^0.4.0",
    "class-validator": "^0.13.1",
    "classlist.js": "1.1.20150312",
    "cluster": "^0.7.7",
    "config": "^3.3.6",
    "cookie-parser": "^1.4.5",
    "d3": "^7.0.0",
    "d3-array": "^3.0.1",
    "d3-brush": "^3.0.0",
    "d3-color": "^3.0.1",
    "d3-force": "^3.0.0",
    "d3-format": "^3.0.1",
    "d3-hierarchy": "^3.0.1",
    "d3-interpolate": "^3.0.1",
    "d3-scale": "^4.0.0",
    "d3-selection": "^3.0.0",
    "d3-shape": "^3.0.1",
    "d3-time-format": "^4.0.0",
    "easy-pie-chart": "^2.1.7",
    "emoji-flags": "^1.3.0",
    "font-awesome": "^4.7.0",
    "geoip-lite": "^1.4.2",
    "global": "^4.4.0",
    "hammerjs": "^2.0.8",
    "hostile": "^1.3.3",
    "http-status-codes": "^2.1.4",
    "http2": "^3.3.7",
    "https": "^1.0.0",
    "ionic-plugin-deeplinks": "^1.0.22",
    "ionic2-calendar": "^0.6.9",
    "ionicons": "^5.5.2",
    "jquery": "^3.6.0",
    "json2csv": "^5.0.6",
    "jsonwebtoken": "^8.5.1",
    "jwk-to-pem": "^2.0.5",
    "jwt-decode": "^3.1.2",
    "koa-router": "^10.0.0",
    "lodash": "^4.17.21",
    "luxon": "^2.0.1",
    "moment": "^2.29.1",
    "moment-timezone": "^0.5.33",
    "mongoose": "^5.13.3",
    "mongoose-findorcreate": "^3.0.0",
    "ng-multiselect-dropdown": "^0.3.4",
    "ng2-pdf-viewer": "^7.0.1",
    "ngrx-store-freeze": "^0.2.4",
    "ngrx-store-logger": "^0.2.4",
    "ngx-bootstrap": "^7.0.0",
    "ngx-cookie-service": "^12.0.0-rc.3",
    "ngx-doc-viewer": "^2.0.2",
    "nodemailer": "^6.6.2",
    "passport": "^0.4.1",
    "passport-jwt": "^4.0.0",
    "passport-local": "^1.0.0",
    "pg": "^8.6.0",
    "properties-parser": "^0.3.1",
    "reflect-metadata": "^0.1.13",
    "request": "^2.88.2",
    "require": "^2.4.20",
    "rimraf": "^3.0.2",
    "rxjs": "^7.2.0",
    "screenfull": "^5.1.0",
    "socket.io": "^4.1.3",
    "socket.io-client": "^4.1.3",
    "swagger-ui": "^3.48.0",
    "swagger-ui-express": "^4.1.6",
    "ts-loader": "^9.2.3",
    "typegoose": "^5.9.1",
    "typeorm": "^0.2.2",
    "zone.js": "0.11.4"
  },
  "devDependencies": {
    "@angular-builders/custom-webpack": "^12.1.0",
    "@angular-devkit/build-angular": "12.1.4",
    "@angular-eslint/eslint-plugin": "12.3.1",
    "@angular-eslint/eslint-plugin-template": "12.3.1",
    "@angular-eslint/template-parser": "12.3.1",
    "@angular/cli": "12.1.4",
    "@angular/compiler-cli": "12.1.4",
    "@angular/language-service": "12.1.4",
    "@capacitor/android": "^3.1.2",
    "@capacitor/ios": "^3.1.2",
    "@nestjs/schematics": "^8.0.1",
    "@nestjs/testing": "^8.0.3",
    "@nrwl/cli": "12.6.3",
    "@nrwl/cypress": "12.6.3",
    "@nrwl/eslint-plugin-nx": "12.6.3",
    "@nrwl/jest": "12.6.3",
    "@nrwl/linter": "12.6.3",
    "@nrwl/nest": "12.6.3",
    "@nrwl/node": "12.6.3",
    "@nrwl/nx-cloud": "12.3.5",
    "@nrwl/tao": "12.6.3",
    "@nrwl/workspace": "12.6.3",
    "@types/bcrypt": "^5.0.0",
    "@types/bcrypt-nodejs": "^0.0.31",
    "@types/bluebird": "^3.5.35",
    "@types/bootstrap": "^5.0.5",
    "@types/chart.js": "^2.9.32",
    "@types/config": "0.0.39",
    "@types/d3-array": "^3.0.1",
    "@types/d3-axis": "^3.0.1",
    "@types/d3-brush": "^3.0.1",
    "@types/d3-color": "^3.0.1",
    "@types/d3-drag": "^3.0.0",
    "@types/d3-force": "^3.0.3",
    "@types/d3-format": "^3.0.1",
    "@types/d3-hierarchy": "^3.0.2",
    "@types/d3-interpolate": "^3.0.1",
    "@types/d3-scale": "^4.0.0",
    "@types/d3-selection": "^3.0.0",
    "@types/d3-selection-multi": "^1.0.10",
    "@types/d3-shape": "^3.0.0",
    "@types/d3-time": "^3.0.0",
    "@types/d3-time-format": "^4.0.0",
    "@types/d3-transition": "^3.0.1",
    "@types/geoip-lite": "^1.4.1",
    "@types/googlemaps": "^3.43.3",
    "@types/jasmine": "^3.7.7",
    "@types/jasminewd2": "^2.0.9",
    "@types/jest": "^26.0.24",
    "@types/jquery": "^3.5.5",
    "@types/luxon": "^1.27.0",
    "@types/moment-timezone": "^0.5.30",
    "@types/mongodb": "^3.6.18",
    "@types/mongoose": "^5.10.5",
    "@types/node": "^14.14.33",
    "@types/passport-local": "^1.0.33",
    "@types/socket.io": "^3.0.2",
    "@types/socket.io-client": "^3.0.0",
    "@typescript-eslint/eslint-plugin": "4.28.5",
    "@typescript-eslint/parser": "4.28.5",
    "@workspace/shared-assets": "file:libs/shared-assets/src/lib",
    "@workspace/shared-components": "file:libs/shared-components/src/lib",
    "@workspace/shared-directives": "file:libs/shared-directives/src/lib",
    "@workspace/shared-features": "file:libs/shared-features/src/lib",
    "@workspace/shared-pipes": "file:libs/shared-pipes/src/lib",
    "@workspace/shared-sass": "file:libs/shared-sass/src/lib",
    "@workspace/shared-util": "file:libs/shared-util/src/lib",
    "cypress": "^8.0.0",
    "dotenv": "^10.0.0",
    "eslint": "^7.30.0",
    "eslint-config-prettier": "^8.3.0",
    "eslint-plugin-cypress": "^2.10.3",
    "jest": "^27.0.6",
    "jest-preset-angular": "^9.0.4",
    "prettier": "^2.3.1",
    "ts-jest": "^27.0.4",
    "ts-node": "^10.1.0"
  },
  "node": {
    "crypto": "empty",
    "fs": "empty",
    "path": "empty",
    "stream": "empty",
    "net": "empty",
    "tls": "empty"
  },
  "browser": {
    "crypto": false,
    "fs": false,
    "path": false,
    "os": false,
    "net": false,
    "stream": false,
    "tls": false
  }
}
nhhockeyplayer commented 3 years ago

and re-open and repair these issues

we should not be imposed to add anything to band-aid this up it should fly and fix itself for the developer to focus on pure business logic

20910 may be legit but I find it a terrible solution when we are forced to add new packages to a project just to get it building... that goes for the paths too. I have yet to try it but my initial gut feel is not good Im having bundling issues with untraceable console stack traces that show or say very little.

angular should be smart enough and especially to the flanks threatening it from all angles outside... npm...sass...nrwl/nx (im seeing Nrwl/Nx is attempting to mitigate and automate anything to avoid such lapses) but webpack and anythignjavascript is the worst.

I wish I could offer more support and help but im owned mon-fri at sensitive client

we needed Nrwl/Nx/Angular last MAY... and things fell thru the floor in June with angular 12... and imp praying for your best week to week waiting for something to land.

angular-automatic-lock-bot[bot] commented 3 years ago

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

This action has been performed automatically by a bot.