search

ngx-rocket / generator-ngx-rocket

:rocket: Extensible Angular 14+ enterprise-grade project generator
https://ngx-rocket.github.io/
MIT License
1.53k stars 217 forks source link

How to fix 'global is not defined' after i added my libraries #489

Closed osamax2 closed 4 years ago

osamax2 commented 5 years ago

I'm submitting a...

Current behavior

'global is not defined'

Expected behavior

start the App normal without issue

Minimal reproduction of the problem with instructions

After install ngx new app with cordova configuration I installed my libraries like 'chartjs , coaty,...' when i started the app it worked 


npm start
NOTICE: Hot Module Replacement (HMR) is enabled for the dev server.
 10% building 3/3 modules 0 active[HPM] Proxy created: /api  ->  https://api.chucknorris.io                     
[HPM] Proxy rewrite rule created: "^/api" ~> ""
ℹ ｢wds｣: Project is running at http://localhost:4200/webpack-dev-server/
ℹ ｢wds｣: webpack output is served from /
ℹ ｢wds｣: 404s will fallback to //index.html

chunk {about-about-module} about-about-module.js, about-about-module.js.map (about-about-module) 6.73 kB  [rendered]
chunk {main} main.js, main.js.map (main) 195 kB [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 252 kB [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 34 kB [entry] [rendered]
chunk {styles} styles.js, styles.js.map (styles) 1.28 MB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 5.8 MB [initial] [rendered]
Date: 2019-07-17T08:57:39.630Z - Hash: d163061b7de8366edf1d - Time: 12823ms
** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
ℹ ｢wdm｣: Compiled successfully.

and everything was working fine thin I start implement my libraries in code just i put some code like this in main.js


import { provideComponents } from 'coaty/runtime-angular';
import { Container } from 'coaty/runtime';
import { components, configuration } from './app/agent.config';

const container = Container.resolve(components, configuration);

After that I started the App one more time with Compiled successfully. but it will not render the App in browser and the console in browser like this 


[HMR] Waiting for update signal from WDS... ................................log.js:24
ReferenceError: global is not defined[Learn More]............. _stream_readable.js:56
[WDS] Hot Module Replacement enabled. ......................................client:48
[WDS] Live Reloading enabled. ..............................................client:52

my libraries use (process, global, Buffer, etc.) are required by MQTT.js I treid do this but it is not working in angular.json file


.....  
"architect": {
        "build": {
          "builder": "@angular-builders/custom-webpack:browser",
          "options": {
            "customWebpackConfig": {
              "path": "./webpack.node-polyfills.config.js"
          },
......

the webpack.node-polyfills.config.js content 


module.exports = {
    node: {
        console: false,
        global: true,
        process: true,
        __filename: 'mock',
        __dirname: 'mock',
        Buffer: true,
        setImmediate: true
    }
};

what can i do ???

Environment



ngX-Rocket: 7.0.1
Node.js: v10.16.0
Npm: 6.9.0
OS: linux x64 4.4.0-148-generic

-------------------------------------------------------------------------
package.json

{
  "name": "avg-dashboard-mobile",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "ng": "ng",
    "build": "coaty-scripts info ./src/app && npm run env -s && ng build --prod",
    "start": "coaty-scripts info ./src/app && npm run env -s && ng serve --proxy-config proxy.conf.js",
    "serve:sw": "npm run build -s && npx http-server ./www -p 4200",
    "lint": "ng lint && stylelint \"src/**/*.scss\" --syntax scss && htmlhint \"src\" --config .htmlhintrc",
    "test": "npm run env -s && ng test",
    "test:ci": "npm run env -s && npm run lint -s && ng test --code-coverage --watch=false",
    "e2e": "npm run env -s && ng e2e",
    "translations:extract": "ngx-translate-extract --input ./src --output ./src/translations/template.json --format=json --clean --sort --marker extract",
    "docs": "hads ./docs -o",
    "compodoc": "compodoc -p src/tsconfig.app.json -d docs/generated -s -o",
    "env": "ngx-scripts env npm_package_version",
    "prettier": "prettier --write \"./{src,e2e}/**/*.{ts,js,html,scss}\"",
    "prettier:check": "prettier --list-different \"./{src,e2e}/**/*.{ts,js,html,scss}\"",
    "postinstall": "npm run prettier -s",
    "cordova:prepare": "ngx-scripts cordova prepare",
    "cordova:run": "ngx-scripts cordova run",
    "cordova:build": "ngx-scripts cordova build --device --release --copy dist",
    "cordova:clean": "ngx-scripts clean",
    "cordova": "cordova",
    "generate": "ng generate"
  },
  "dependencies": {
    "@angular-devkit/build-angular": "^0.801.1",
    "@angular/animations": "^8.1.0",
    "@angular/common": "^8.1.0",
    "@angular/compiler": "^8.1.0",
    "@angular/core": "^8.1.0",
    "@angular/forms": "^8.1.0",
    "@angular/platform-browser": "^8.1.0",
    "@angular/platform-browser-dynamic": "^8.1.0",
    "@angular/router": "^8.1.0",
    "@angular/service-worker": "^8.1.0",
    "@fortawesome/fontawesome-free": "^5.1.0",
    "@ionic-native/core": "^5.0.0",
    "@ionic-native/keyboard": "^5.0.0",
    "@ionic-native/splash-screen": "^5.0.0",
    "@ionic-native/status-bar": "^5.0.0",
    "@ng-bootstrap/ng-bootstrap": "^5.0.0-rc.1",
    "@ngx-translate/core": "^11.0.1",
    "bootstrap": "^4.1.1",
    "buffer": "^5.2.1",
    "chart.js": "^2.7.3",
    "coaty": "^1.10.0",
    "conventional-changelog": "^3.1.8",
    "conventional-recommended-bump": "^5.0.0",
    "cordova-android": "^8.0.0",
    "cordova-custom-config": "^5.0.2",
    "cordova-ios": "^5.0.0",
    "cordova-plugin-device": "^2.0.2",
    "cordova-plugin-ionic-keyboard": "^2.1.3",
    "cordova-plugin-ionic-webview": "^4.0.1",
    "cordova-plugin-splashscreen": "^5.0.2",
    "cordova-plugin-statusbar": "^2.4.1",
    "cordova-plugin-whitelist": "^1.3.3",
    "cordova-sqlite-storage": "^3.2.0",
    "d3": "^4.13.0",
    "dygraphs": "^2.1.0",
    "hammerjs": "^2.0.8",
    "pg": "^7.11.0",
    "process": "^0.11.10",
    "rxjs": "^6.5.2",
    "sqlite3": "^4.0.9",
    "zone.js": "^0.9.1"
  },
  "devDependencies": {
    "@angular-builders/custom-webpack": "^8.1.0",
    "@angular/cli": "~8.1.0",
    "@angular/compiler-cli": "^8.1.0",
    "@angular/language-service": "^8.1.0",
    "@angularclass/hmr": "^2.1.3",
    "@biesbjerg/ngx-translate-extract": "^2.3.4",
    "@compodoc/compodoc": "^1.1.9",
    "@ngx-rocket/scripts": "^4.0.0",
    "@types/chart.js": "^2.7.55",
    "@types/d3": "^5.0.0",
    "@types/jasmine": "^3.3.13",
    "@types/jasminewd2": "^2.0.3",
    "@types/node": "^10.14.12",
    "codelyzer": "^5.1.0",
    "cordova": "^9.0.0",
    "hads": "^1.7.0",
    "htmlhint": "^0.11.0",
    "https-proxy-agent": "^2.0.0",
    "husky": "^3.0.0",
    "jasmine-core": "~3.4.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.1.0",
    "karma-chrome-launcher": "^2.2.0",
    "karma-cli": "~2.0.0",
    "karma-coverage-istanbul-reporter": "^2.0.2",
    "karma-jasmine": "^2.0.1",
    "karma-jasmine-html-reporter": "^1.4.0",
    "karma-junit-reporter": "^1.2.0",
    "prettier": "^1.16.3",
    "pretty-quick": "^1.10.0",
    "process": "~0.11.10",
    "protractor": "~5.4.0",
    "puppeteer": "^1.17.0",
    "stylelint": "~10.1.0",
    "stylelint-config-prettier": "^5.1.0",
    "stylelint-config-recommended-scss": "~3.3.0",
    "stylelint-config-standard": "~18.3.0",
    "stylelint-scss": "~3.9.0",
    "ts-node": "^8.3.0",
    "tslint": "~5.18.0",
    "tslint-config-prettier": "^1.14.0",
    "typescript": "~3.4.0"
  },
  "prettier": {
    "singleQuote": true,
    "overrides": [
      {
        "files": "*.scss",
        "options": {
          "singleQuote": false
        }
      }
    ]
  },
  "husky": {
    "hooks": {
      "pre-commit": "pretty-quick --staged"
    }
  },
  "cordova": {
    "platforms": [
      "android"
    ],
    "plugins": {
      "cordova-custom-config": {},
      "cordova-plugin-device": {},
      "cordova-plugin-splashscreen": {},
      "cordova-plugin-statusbar": {},
      "cordova-plugin-whitelist": {},
      "cordova-plugin-ionic-webview": {},
      "cordova-plugin-ionic-keyboard": {}
    }
  }
}

Others:

sinedied commented 5 years ago

Seems that the issue is more related to angular-cli than this project, as your webpack config override do not seems to work, seeing your error.

You might also try to set/add "types": ["node"] in your tsconfig, but I'm not sure it's a typing issue here.

osamax2 commented 5 years ago

@sinedied I tried node in tsconfig Not working

sinedied commented 5 years ago

I think your best bet would be to report this to https://github.com/just-jeb/angular-builders, as the custom webpack config part does not seem to be working here.

sinedied commented 4 years ago

Closing as it's not directly related to this project.