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,并使用继承和全局注入等最佳实践
我在 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,并使用继承和全局注入等最佳实践