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

Question

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.

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

score 0 · Accepted Answer · edited Oct 30 '17 at 11:59

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

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

1 Answers1