search

just-jeb / angular-builders

Angular build facade extensions (Jest and custom webpack configuration)
MIT License
1.14k stars 198 forks source link

ngDevMode and ngI18nClosureMode undefined error - ng build prod #550

Closed ash67 closed 2 years ago

ash67 commented 4 years ago

Describe the bug When I ran prod build, I get `ngI18nClosureMode is not defined' and 'ngDevMode is not defined' error. Nonprod(ng build) build is fine

Builder: "@angular-builders/custom-webpack": "8.2.0",

Libraries

To fix this issue, I created the global variable as below.

var ngDevMode = false;
var ngI18nClosureMode = false;

This fix works fine but is there a better way to fix this problem?

almaro90 commented 4 years ago

+1

almaro90 commented 4 years ago

Describe the bug When I ran prod build, I get `ngI18nClosureMode is not defined' and 'ngDevMode is not defined' error. Nonprod(ng build) build is fine

Builder: "@angular-builders/custom-webpack": "8.2.0",

Libraries

  • angular-devkit/build-angular: '0.803.2'
  • Angular CLI: 8.3.1
  • Angular: 9.0.0-next.3

To fix this issue, I created the global variable as below.

var ngDevMode = false;
var ngI18nClosureMode = false;

This fix works fine but is there a better way to fix this problem?

In which file do you declare these global variables?

Thanks in advance!

just-jeb commented 4 years ago

I see that there is a mismatch between CLI and Angular versions. Any chance this is the root cause?

arturovt commented 4 years ago

@ash67 could you provide a reproduction?

ash67 commented 4 years ago

@almaro90 I added the global variables inside the script tag in the index.html.

ash67 commented 4 years ago

https://github.com/just-jeb/angular-builders/issues/550#issuecomment-552620404 @just-jeb I tried with the same version for both CLI and Angular, but no luck :(

ash67 commented 4 years ago

@ash67 could you provide a reproduction?

@arturovt

  1. install @angular-builders/custom-webpack and add custom build setting as below
          "builder": "@angular-builders/custom-webpack:browser",
          "options": {
            "customWebpackConfig": {
              "path": "./extra-webpack.config.js",
              "mergeStrategies": {
                "optimization.minimizer": "replace"
              },
              "replaceDuplicatePlugins": true
            },
            "outputPath": "www",
            "index": "src/index.html",
            "main": "src/main.ts",
            "tsConfig": "src/tsconfig.app.json",
            "polyfills": "src/polyfills.ts",
            "assets": [
              "src/assets",
              "src/favicon.ico",
              "src/web-workers",
              "src/libs/*.js",
              "src/manifest.json",
              "src/background.js"
            ],
            "styles": [
              "src/styles.scss"
            ],
            "scripts": [
              "src/assets/libs/global.js",
            ]
          },
          "configurations": {
            "production": {
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "fileReplacements": [{
                "replace": "src/environments/environment.ts",
                "with": "src/environments/environment.prod.ts"
              }]
            }
          }
        }

extra extra-webpack.config.js file


module.exports = {

  // allow node crypto module for bitgo-utxo-lib
  // https://github.com/angular/angular-cli/issues/1548
  node: {
    vm: true,
    stream: true
  },
  resolve: {
    alias: {
      "crypto": "crypto-browserify"
    }
  },
  optimization: {
    minimizer: [
      new TerserPlugin({
        terserOptions: {
          mangle: {
            reserved: [
              'Buffer',
              'BigInteger',
              'Point',
              'ECPubKey',
              'ECKey',
              'sha512_asm',
              'asm',
              'ECPair',
              'HDNode'
            ]
          }
        }
      }),
    ],
  },
};
  1. run ng build --prod
  2. run the build

As soon as I start running, you will see the below error ngI18nClosureMode is not defined' and 'ngDevMode is not defined' error.

arturovt commented 4 years ago

@ash67

image

Parth7030 commented 2 years ago

This Worked for me:

Path: web/src/polyfills.browser.ts

import 'zone.js/dist/zone';

// @ts-ignore
if (typeof window.ngI18nClosureMode === 'undefined') {
    Object.defineProperty(window, 'ngI18nClosureMode', {value: false, writable: true});
}

extras:

package.json

"dependencies": {
    "@angular/animations": "~8.2.14",
    "@angular/common": "~8.2.14",
    "@angular/compiler": "~8.2.14",
    "@angular/core": "~8.2.14",
    "@angular/forms": "~8.2.14",
    "@angular/platform-browser": "~8.2.14",
    "@angular/platform-browser-dynamic": "~8.2.14",
    "@angular/platform-server": "~8.2.14",
    "@angular/router": "~8.2.14",
    "@biesbjerg/ngx-translate-extract": "^3.0.5",
    "@netbasal/ngx-content-loader": "^2.1.3",
    "@ng-bootstrap/ng-bootstrap": "5.3.0",
    "@ng-select/ng-select": "^3.7.3",
    "@ngx-cache/core": "^7.0.0",
    "@ngx-cache/platform-browser": "^7.0.0",
    "@ngx-translate/core": "^10.0.2",
    "@ngx-translate/http-loader": "^3.0.1",
    "@swimlane/ngx-datatable": "^15.0.0",
    "angularx-flatpickr": "^6.1.0",
    "bootstrap": "^3.3.7",
    "city-timezones": "^1.2.0",
    "core-js": "^2.5.7",
    "countries-and-timezones": "^2.3.1",
    "countries-list": "^2.5.4",
    "flatpickr": "4.5.1",
    "googleapis": "^18.0.0",
    "hammer-timejs": "^1.1.0",
    "hammerjs": "^2.0.8",
    "i18n-iso-countries": "^7.4.0",
    "intl": "^1.2.5",
    "jwt-decode": "^2.2.0",
    "lodash-es": "4.17.11",
    "ng-intercom": "^8.0.2",
    "ng-lazyload-image": "4.0.0",
    "ng2-nouislider": "1.7.13",
    "ngx-facebook": "^2.4.0",
    "nouislider": "^9.2.0",
    "reflect-metadata": "^0.1.9",
    "rxjs": "6.6.7",
    "slick-carousel": "^1.8.1",
    "viewerjs": "1.9.0",
    "xmltojson": "^1.3.5",
    "zone.js": "^0.9.1",
    "date-fns": "^2.28.0"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.803.21",
    "@angular-devkit/build-optimizer": "^0.803.21",
    "@angular/cdk": "~8.2.3",
    "@angular/cli": "~8.3.29",
    "@angular/compiler-cli": "~8.2.14",
    "@angular/language-service": "~8.2.14",
    "@biesbjerg/ngx-translate-extract-marker": "^1.0.0",
    "@google-cloud/translate": "^1.1.0",
    "@ngtools/webpack": "^8.3.29",
    "@types/anymatch": "ts2.8",
    "@types/hammerjs": "ts2.8",
    "@types/jasmine": "ts2.8",
    "@types/lodash": "ts2.8",
    "@types/lodash-es": "ts2.8",
    "@types/node": "ts2.8",
    "@types/stripe-v3": "ts2.8",
    "@types/svgo": "ts2.8",
    "@types/tapable": "ts2.8",
    "@types/uglify-js": "ts2.8",
    "@types/webpack": "ts2.8",
    "add-asset-html-webpack-plugin": "^2.1.3",
    "ajv": "^6.0.0",
    "angular2-template-loader": "^0.6.2",
    "assets-webpack-plugin": "^3.8.4",
    "awesome-typescript-loader": "^5.2.0",
    "codelyzer": "^4.4.3",
    "concurrently": "^3.1.0",
    "copy-webpack-plugin": "^4.5.1",
    "cross-env": "^5.2.0",
    "css-loader": "^1.0.0",
    "dotenv": "^6.0.0",
    "exports-loader": "^0.7.0",
    "expose-loader": "^0.7.5",
    "file-loader": "^1.1.11",
    "google-translate-api": "^2.3.0",
    "gulp": "^4.0.2",
    "gulp-shell": "^0.8.0",
    "html-webpack-plugin": "^3.2.0",
    "imagemin-webpack-plugin": "^2.4.2",
    "imports-loader": "^0.8.0",
    "jscpd": "^0.6.13",
    "mini-css-extract-plugin": "^0.4.0",
    "minimist": "^1.2.0",
    "node-sass": "^6",
    "npm": "^6.0.0",
    "npm-run-all": "^4.1.3",
    "optimize-js-plugin": "^0.0.4",
    "parse5": "^5.0.0",
    "postcss": "^7.0.0",
    "postcss-loader": "^4.3.0",
    "raven-js": "3.27.0",
    "raw-loader": "^0.5.1",
    "rimraf": "^2.6.2",
    "rxjs-tslint": "^0.1.5",
    "sass-loader": "^10",
    "script-ext-html-webpack-plugin": "^2.0.1",
    "sockjs-client": "^1.1.4",
    "source-map-loader": "^0.2.3",
    "string-replace-loader": "^2.1.1",
    "style-loader": "^0.22.1",
    "terser-webpack-plugin": "^4.2.3",
    "to-string-loader": "^1.1.5",
    "ts-node": "^7.0.0",
    "tslib": "^1.10.0",
    "tslint": "^5.10.0",
    "tslint-loader": "^3.6.0",
    "typescript": "~3.5.3",
    "url-loader": "^1.0.1",
    "webpack": "^4.46.0",
    "webpack-cli": "^3.3.10",
    "webpack-dev-middleware": "^5.3.0",
    "webpack-dev-server": "^3.11.3",
    "webpack-inline-manifest-plugin": "^4.0.1",
    "webpack-merge": "^4.1.4"
  },