Angular2 不适用于 Safari 9.1.2

Angular2 not working on Safari 9.1.2

我在 Safari 9.1.2 上遇到 运行 angular2 应用程序问题。所有其他更高版本都在工作。这是我的无言错误:

我的package.json

{
  "name": "xxxxxx-client",
  "version": "1.0.0",
  "description": "Client app",
  "main": "index.js",
  "repository": {
    "type": "git",
    "url": "xxxxxxx"
  },
  "engines": {
    "node": "6.9.2",
    "npm": "3.10.9"
  },
  "scripts": {
    "dev_build": "node --max_old_space_size=8192 ./node_modules/webpack/bin/webpack.js --config ./config/webpack-dev.config.js",
    "build": "node --max_old_space_size=8192 ./node_modules/webpack/bin/webpack.js --config ./config/webpack-prod.config.js",
    "postbuild": "rollup --config ./config/rollup.config.js",
    "build_dev": "npm run dev_build && npm start",
    "build_prod": "npm run build && npm run postbuild",
    "start": "node app.js"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "*",
    "@angular/common": "^2.4.3",
    "@angular/compiler": "^2.4.3",
    "@angular/core": "^2.4.3",
    "@angular/forms": "^2.4.3",
    "@angular/http": "^2.4.3",
    "@angular/platform-browser": "^2.4.3",
    "@angular/platform-browser-dynamic": "^2.4.3",
    "@angular/router": "^3.3.1",
    "@mapbox/mapbox-gl-draw": "^0.16.1",
    "@swimlane/ngx-charts": "4.0.0",
    "@types/es6-shim": "^0.31.32",
    "@types/geojson": "1.0.0",
    "@types/mapbox-gl": "^0.30.0",
    "@types/pusher-js": "*",
    "@types/turf": "^3.5.32",
    "angular2-cool-storage": "^3.0.1",
    "angular2-jwt": "^0.1.28",
    "animate.css": "^3.5.2",
    "d3-array": "*",
    "d3-brush": "*",
    "d3-collection": "*",
    "d3-color": "*",
    "d3-dispatch": "*",
    "d3-drag": "*",
    "d3-ease": "*",
    "d3-force": "*",
    "d3-format": "*",
    "d3-hierarchy": "*",
    "d3-interpolate": "*",
    "d3-path": "*",
    "d3-quadtree": "*",
    "d3-scale": "*",
    "d3-selection": "*",
    "d3-shape": "*",
    "d3-time": "*",
    "d3-time-format": "*",
    "d3-timer": "*",
    "d3-transition": "*",
    "express": "4.13.x",
    "font-awesome": "4.7.0",
    "fs": "0.0.1-security",    
    "https": "^1.0.0",
    "luxbar": "^0.3.2",
    "mapbox-gl": "0.32.1",
    "material-design-icons": "^3.0.1",
    "material-design-lite": "^1.3.0",
    "moment": "^2.17.1",
    "ng2-data-table": "^1.0.0",
    "ng2-page-slider": "^0.9.0",
    "ng2-smart-table": "^0.6.0-1",
    "ng2-table": "^1.3.2",
    "ng2-toasty": "2.5.0",
    "primeng": "^2.0.6",
    "primeui": "^3.0.2",
    "pusher-js": "^3.0.0",
    "reflect-metadata": "^0.1.10",
    "rxjs": "5.2.0",
    "script-ext-html-webpack-plugin": "^1.7.1",
    "turf": "3.0.14",
    "underscore": "1.8.3",
    "webpack-cleanup-plugin": "^0.5.1",
    "zone.js": "^0.7.2"
  },
  "devDependencies": {
    "@vimeo/player": "^2.0.1",
    "awesome-typescript-loader": "^3.1.3",
    "compression-webpack-plugin": "^0.4.0",
    "css-loader": "^0.27.3",
    "extract-text-webpack-plugin": "^2.1.0",
    "file-loader": "^0.10.1",
    "html-webpack-plugin": "^2.28.0",
    "json-loader": "^0.5.4",
    "optimize-js-plugin": "0.0.4",
    "postcss-loader": "^1.3.3",
    "raw-loader": "^0.5.1",
    "rollup": "^0.41.6",
    "rollup-plugin-commonjs": "^8.0.2",
    "rollup-plugin-node-globals": "^1.1.0",
    "rollup-plugin-node-resolve": "^3.0.0",
    "rollup-plugin-uglify": "^1.0.2",
    "style-loader": "^0.16.0",
    "stylus": "^0.54.5",
    "stylus-loader": "^3.0.1",
    "to-string-loader": "^1.1.5",
    "transform-loader": "^0.2.4",
    "ts-loader": "^2.0.3",
    "tslint": "^4.5.1",
    "tslint-loader": "^3.4.3",
    "typescript": "^2.2.1",
    "url-loader": "^0.5.8",
    "webpack": "^2.3.3",
    "webpack-dev-server": "^2.4.2",
    "webpack-sources": "^0.2.3",
    "webworkify-webpack": "^2.0.4"
  }
}

我们已经在所有浏览器上测试了我们的应用程序 -> Chrome 48、49、50+、Firefox 49、50+、Safari 10+、Opera、Edge 等。它们都运行良好,除了野生动物园 9.1.2。有什么建议吗?

编辑

逐行调试,这是控制台调试器显示的内容: 当打开 _reportError 我看到这个:

打开 _getDependenciesMetadata 看到这个:

打开 _getTypeMetadata 看到这个:

打开 _loadDirectiveMetadata 看到这个:

所以我重构了我的代码并意识到问题实际上在于包含循环依赖。我必须保持我的代码简洁明了,只在真正需要的地方注入 DI,并使用继承和全局注入等最佳实践