Angular doesn't work for safari browser. promiseReactionJob Error

Question

Please understand that it may be difficult to understand because of my poor English.

We made a new Angular project and confirmed that it is working properly when connecting with Safari. But the problem is that the project I'm working on doesn't work.

Chrome is coming out really well, but if you go into safari, it only comes out on the white screen.

I am currently using Angular-cli 9.0.7 and Node is using 10.16.0.

Many attempts have been made to resolve this issue, but all failed (change base_href, change polyfils, check browsers list, change build options, etc.).

If you enter the safari, the following error is occurring.

SyntaxError: Unexpected keyword 'this'. Expected a ';' following a return statement. [N] promiseReactionJob

Both ng serve and ng build are experiencing errors. Below are the ng build commands and ng serve commands that I am using.

ng build : 'ng build --output-path deploy/public --base-href / --configuration=alpha --aot=true --output-hashing=all'

ng serve : 'ng serve --configuration=local --aot=true --sourceMap=false' or 'ng serve --configuration=local'

Below are the setup files for my project.

package.json

{
  "name": "my-project",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve --configuration=local",
    "startAlpha": "ng serve --configuration=alpha --aot=true --sourceMap=false",
    "startProduction": "ng serve --configuration=production --aot=true --sourceMap=false",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~9.0.1",
    "@angular/cdk": "^12.0.5",
    "@angular/common": "~9.0.1",
    "@angular/compiler": "~9.0.1",
    "@angular/core": "~9.0.1",
    "@angular/forms": "~9.0.1",
    "@angular/material": "^9.2.4",
    "@angular/platform-browser": "~9.0.1",
    "@angular/platform-browser-dynamic": "~9.0.1",
    "@angular/router": "~9.0.1",
    "@ngx-translate/core": "^13.0.0",
    "@ngx-translate/http-loader": "^4.0.0",
    "browserslist": "^4.16.6",
    "hammerjs": "^2.0.8",
    "ngx-cookie-service": "^12.0.0",
    "ngx-smart-modal": "^7.4.1",
    "normalize.css": "^8.0.1",
    "rxjs": "~6.5.4",
    "tslib": "^1.10.0",
    "zone.js": "~0.10.2"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.900.2",
    "@angular/cli": "~9.0.2",
    "@angular/compiler-cli": "~9.0.1",
    "@angular/language-service": "~9.0.1",
    "@types/jasmine": "~3.5.0",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "^12.11.1",
    "codelyzer": "^5.1.2",
    "protractor": "~5.4.3",
    "ts-node": "~8.3.0",
    "typescript": "~3.7.5"
  }
}

browserslist

browserslist

# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
# For additional information regarding the format and rule options, please see:
# https://github.com/browserslist/browserslist#queries

# You can see what browsers were selected by your queries by running:
#   npx browserslist

> 0.5%
last 2 versions
Firefox ESR
not dead
not IE <= 10

Result

and_chr 91
and_ff 89
and_qq 10.4
and_uc 12.12
android 91
baidu 7.12
chrome 92
chrome 91
chrome 90
edge 91
edge 90
firefox 90
firefox 89
firefox 78
ie 11
ios_saf 14.5-14.7
ios_saf 14.0-14.4
ios_saf 13.4-13.7
kaios 2.5
op_mini all
op_mob 62
opera 77
opera 76
safari 14.1
safari 14
samsung 14.0
samsung 13.0

polyfils.ts

import 'zone.js/dist/zone';  // Included with Angular CLI.

angular.json

angular.json

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "my-project": {
      "projectType": "application",
      "schematics": {
        "@schematics/angular:component": {
          "style": "scss"
        }
      },
      "root": "",
      "sourceRoot": "src",
      "prefix": "app",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "crossOrigin": "use-credentials",
            "showCircularDependencies": false,
            "outputPath": "dist/my-project",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.app.json",
            "aot": true,
            "assets": [
              "src/favicon.ico",
              "src/assets",
              "src/assets/i18n/"
            ],
            "styles": [
              "src/styles.scss"
            ],
            "scripts": []
          },
          "configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "crossOrigin": "use-credentials",
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "4mb",
                  "maximumError": "5mb"
                },
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "6kb",
                  "maximumError": "20kb"
                }
              ]
            },
            "alpha": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.alpha.ts"
                }
              ],
              "crossOrigin": "use-credentials",
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "4mb",
                  "maximumError": "5mb"
                },
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "6kb",
                  "maximumError": "20kb"
                }
              ]
            },
            "local": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.local.ts"
                }
              ],
              "crossOrigin": "use-credentials",
              "optimization": false,
              "outputHashing": "none",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "showCircularDependencies": false,
              "aot": true,
              "extractLicenses": false,
              "statsJson": false,
              "progress": false,
              "vendorChunk": true,
              "buildOptimizer": false,
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "4mb",
                  "maximumError": "5mb"
                },
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "6kb",
                  "maximumError": "20kb"
                }
              ]
            }
          }
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "my-project:build"
          },
          "configurations": {
            "production": {
              "browserTarget": "my-project:build:production"
            },
            "alpha": {
              "browserTarget": "my-project:build:alpha"
            },
            "local": {
              "browserTarget": "my-project:build:local"
            }
          }
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "my-project:build"
          }
        },
        "e2e": {
          "builder": "@angular-devkit/build-angular:protractor",
          "options": {
            "protractorConfig": "e2e/protractor.conf.js",
            "devServerTarget": "my-project:serve"
          },
          "configurations": {
            "production": {
              "devServerTarget": "my-project:serve:production"
            }
          }
        }
      }
    }
  },
  "defaultProject": "my-project",
  "cli": {
    "analytics": false
  }
}

tsconfig.app.json

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "outDir": "./out-tsc/app",
    "types": []
  },
  "files": [
    "src/main.ts",
    "src/polyfills.ts"
  ],
  "include": [
    "src/**/*.d.ts"
  ]
}

tsconfig.json

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "module": "esnext",
    "moduleResolution": "node",
    "importHelpers": true,
    "target": "es2015",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2018",
      "dom"
    ]
  },
  "angularCompilerOptions": {
    "fullTemplateTypeCheck": true,
    "strictInjectionParameters": true
  }
}

Please save me. I've been searching for that error for hours. But I don't have the right solution for me.

If you know anyone, please help me.

(UPDATE) I successfully added 'web-animations-js' to polyfils, but it didn't work. T.T

Angular doesn't work for safari browser. promiseReactionJob Error

Answers (1)

Related Questions

Angular doesn&#39;t work for safari browser. promiseReactionJob Error

Answers (1)

Related Questions

Angular doesn't work for safari browser. promiseReactionJob Error