Closed nhhockeyplayer closed 3 years ago
do we HAVE to use the webpack builders to get our angular 12 SPA's building?
It looks like the primary issue here is that @angular/compiler-cli
is being included in the bundle. That is a Node only package that is not meant to be bundled into an app. It's not clear what may be causing this and without code we're very unlikely to be able to help you resolve this issue.
Indeed as @JoostK pointed out, it does appear that packages which are meant to be used on Node are being included in the browser bundle. This typically indicates that have an incorrect import or a using Node.JS libraries in your web application.
This doesn't appear to be an issue with Angular itself, but rather something in the application code is causing modules that are meant to build the application to be included as part of the browser bundle.
I wish I had fulltime to focus on this and do a repo but its classified.
if 10 days could be allowed before decision to close that would be nice. Can this be reopened?
clients at corps enjoy us prototyping with latest releases but angular 12 is not allowing even a hello world prototype.
I keep upgrading after each week but nothing is giving and the amount of errors have had me on the ropes trying to work this on weekends since june I have yet to build yet.
SO... my project is an Nrwl/Nx workspace which is reasonable and legit.
the package json holds everything end to end... apps... servers... rightfully and shared isomorphic types interfaces collections etc...
this is the new trend mono-repo and the obvious way forward for everything
{
"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
}
}
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.
Which @angular/* package(s) are the source of the bug?
compiler-cli
Is this a regression?
Yes
Description
I have been show stopped with build issues since the angular 12 release in June
still now cannot build here is the complete output descriptions below any feedback on this would be very much appreciates this is post angular 12 upgrade on the latest nrwl nx all up to date latest revs as of today
thanks in advance
Please provide a link to a minimal reproduction of the bug
No response
Please provide the exception or error you saw
No response
Please provide the environment you discovered this bug in
No response
Anything else?
thats it
I would like to build and i cant
I thought there were fittings to put into package.json to mute this like
but i tried and they fail
i can get the build to succeed by using the webpack builders with this webpack.config.js
but at runtime I get a variety of webpack load stack traces in the console and the bundles cannot even load and I want nothing to do with webpack anyway
I eliminated any uses of require
any help is greatly appreciated