Search code examples
javascriptangularuser-agentnavigatorcodebird

Getting ERROR ReferenceError: userAgent is not defined, in angular 4 production build (Angular 4)

Hi iam developing a project in angular 4, it is working fine in local and with develop environments. but when im doing prod build build was generated. but some errors were throwing in front end console.

below are the config details:

 "apps": [
    {
      "root": "src",
      "outDir": "dist",
      "assets": [
        "assets",
        "favicon.ico"
      ],
      "index": "index.html",
      "main": "main.ts",
      "polyfills": "polyfills.ts",
      "test": "test.ts",
      "tsconfig": "tsconfig.app.json",
      "testTsconfig": "tsconfig.spec.json",
      "prefix": "app",
      "styles": [

        "../node_modules/bootstrap/scss/bootstrap.scss",
        "../node_modules/font-awesome/css/font-awesome.css",
        "../node_modules/izimodal/css/iziModal.min.css",

        "../node_modules/flatpickr/dist/flatpickr.css",
        "assets/bootstrap-daterangepicker-master/daterangepicker.scss",
       "assets/css/style.css",
        "assets/css/common.css",
        "app.scss",
        "assets/css/select2.min.css"
      ],
      "scripts": [
        "../node_modules/jquery/dist/jquery.min.js",
        "assets/js/codebird.js",
        "../node_modules/popper.js/dist/umd/popper.min.js",
        "assets/bootstrap-daterangepicker-master/moment.js",
        "../node_modules/bootstrap/dist/js/bootstrap.min.js",
        "assets/js/flexibility.js",
        "../node_modules/flatpickr/dist/flatpickr.js",
        "../node_modules/izimodal/js/iziModal.min.js",
        "assets/bootstrap-daterangepicker-master/daterangepicker.js",
        "assets/js/select2.full.min.js"
      ],
      "environmentSource": "environments/environment.ts",
      "environments": {
        "dev": "environments/environment.ts",
        "staging": "environments/environment.staging.ts",
        "prod": "environments/environment.prod.ts",
        "uat": "environments/environment.uat.ts",
        "local": "environments/environment.local.ts",
        "develop": "environments/environment.dev.ts"
      }
    }
  ],
  "e2e": {
    "protractor": {
      "config": "./protractor.conf.js"
    }
  },
  "lint": [
    {
      "project": "src/tsconfig.app.json"
    },
    {
      "project": "src/tsconfig.spec.json"
    },
    {
      "project": "e2e/tsconfig.e2e.json"
    }
  ],
  "test": {
    "karma": {
      "config": "./karma.conf.js"
    }
  },
  "defaults": {
    "styleExt": "scss",
    "component": {
    }
  }

I am getting Below Error:

ERROR ReferenceError: userAgent is not defined.

enter image description here

i have checked in files where the script is used it is used in codebird.js. But unable to fix the issue.

Solution

  • It looks like izimodel has defined a variable userAgent and its the reason for the error.

    Place a copy of izimodel.min.js in your js folder and use that instead of one in node_modules.

    Then replace

    (userAgent=navigator.userAgent,userAgent.indexOf("MSIE ")>-1||userAgent.indexOf("Trident/")>-1)

    With

    (navigator.userAgent.indexOf("MSIE ")>-1||navigator.userAgent.indexOf("Trident/")>-1)

    That will solve the problem