时间戳

首页 > 解决方案 > 在 iPhone X safary 和 chrome 上基于 Angular 8 的应用程序中间歇性超出最大调用堆栈大小

angular - 在 iPhone X safary 和 chrome 上基于 Angular 8 的应用程序中间歇性超出最大调用堆栈大小

问题描述

我们在基于 Angular 8 的应用程序中间歇性地在基于 IOS 的移动设备（iPhone X）中遇到奇怪的错误。它并不总是发生。有时会抛出错误；有时没有错误。

应用程序在 android 手机、平板电脑、ipad 和其他桌面浏览器上运行良好。只有当用户在 chrome 或 safari 中浏览网站时，才会在 iPhone X 设备中出现此问题。

如果有人在 ios 设备上遇到过这种情况，请提供帮助。

Error: Uncaught (in promise):: Maximum call stack size exceeded.
forEach@[native code]

_forEach@https://sitedomain/dist/vendors.min.js?v=20200824145002:1:163151
check@https://sitedomain/dist/vendors.min.js?v=20200824145002:1:160993
diff@https://sitedomain/dist/vendors.min.js?v=20200824145002:1:160827
applyChanges@https://sitedomain/dist/vendors.min.js?v=20200824145002:1:402092
ngDoCheck@https://sitedomain/dist/vendors.min.js?v=20200824145002:1:405185
https://sitedomain/dist/vendors.min.js?v=20200824145002:1:270012
Wk@https://sitedomain/dist/vendors.min.js?v=20200824145002:1:279800
https://sitedomain/dist/app.min.js?v=20200824145002:1:767405
hk@https://sitedomain/dist/vendors.min.js?v=20200824145002:1:267946
wk@https://sitedomain/dist/vendors.min.js?v=20200824145002:1:274445
bk@https://sitedomain/dist/vendors.min.js?v=20200824145002:1:274108
hk@https://sitedomain/dist/vendors.min.js?v=20200824145002:1:267954
wk@https://sitedomain/dist/vendors.min.js?v=20200824145002:1:274445
bk@https://sitedomain/dist/vendors.min.js?v=20200824145002:1:274108
hk@https://sitedomain/dist/vendors.min.js?v=20200824145002:1:267954
wk@https://sitedomain/dist/vendors.min.js?v=20200824145002:1:274445
bk@https://sitedomain/dist/vendors.min.js?v=20200824145002:1:274108
hk@https://sitedomain/dist/vendors.min.js?v=20200824145002:1:267954
wk@https://sitedomain/dist/vendors.min.js?v=20200824145002:1:274445
bk@https://sitedomain/dist/vendors.min.js?v=20200824145002:1:274108
hk@https://sitedomain/dist/vendors.min.js?v=20200824145002:1:267954
wk@https://sitedomain/dist/vendors.min.js?v=20200824145002:1:274445
bk@https://sitedomain/dist/vendors.min.js?v=20200824145002:1:274108
hk@https://sitedomain/dist/vendors.min.js?v=20200824145002:1:267954
wk@https://sitedomain/dist/vendors.min.js?v=20200824145002:1:274445
bk@https://sitedomain/dist/vendors.min.js?v=20200824145002:1:274108
hk@https://sitedomain/dist/vendors.min.js?v=20200824145002:1:267954
wk@https://sitedomain/dist/vendors.min.js?v=20200824145002:1:274445
bk@https://sitedomain/dist/vendors.min.js?v=20200824145002:1:274108
hk@https://sitedomain/dist/vendors.min.js?v=20200824145002:1:267954
detectChanges@https://sitedomain/dist/vendors.min.js?v=20200824145002:1:178059
transform@https://sitedomain/dist/vendors.min.js?v=20200824145002:1:816759
https://sitedomain/dist/app.min.js?v=20200824145002:1:768159
hk@https://sitedomain/dist/vendors.min.js?v=20200824145002:1:267946
wk@https://sitedomain/dist/vendors.min.js?v=20200824145002:1:274445
bk@https://sitedomain/dist/vendors.min.js?v=20200824145002:1:274108
hk@https://sitedomain/dist/vendors.min.js?v=20200824145002:1:267954
wk@https://sitedomain/dist/vendors.min.js?v=20200824145002:1:274445
bk@https://sitedomain/dist/vendors.min.js?v=20200824145002:1:274108
hk@https://sitedomain/dist/vendors.min.js?v=20200824145002:1:267954
wk@https://sitedomain/dist/vendors.min.js?v=20200824145002:1:274445
bk@https://sitedomain/dist/vendors.min.js?v=20200824145002:1:274108
hk@https://sitedomain/dist/vendors.min.js?v=20200824145002:1:267954
wk@https://sitedomain/dist/vendors.min.js?v=20200824145002:1:274445
bk@https://sitedomain/dist/vendors.min.js?v=20200824145002:1:274108
hk@https://sitedomain/dist/vendors.min.js?v=20200824145002:1:267954
wk@https://sitedomain/dist/vendors.min.js?v=20200824145002:1:274445
bk@https://sitedomain/dist/vendors.min.js?v=20200824145002:1:274108
hk@https://sitedomain/dist/vendors.min.js?v=20200824145002:1:267954
wk@https://sitedomain/dist/vendors.min.js?v=20200824145002:1:274445
bk@https://sitedomain/dist/vendors.min.js?v=20200824145002:1:274108
hk@https://sitedomain/dist/vendors.min.js?v=20200824145002:1:267954
detectChanges@https://sitedomain/dist/vendors.min.js?v=20200824145002:1:178059
transform@https://sitedomain/dist/vendors.min.js?v=20200824145002:1:816759
https://sitedomain/dist/app.min.js?v=20200824145002:1:768159
hk@https://sitedomain/dist/vendors.min.js?v=20200824145002:1:267946
wk@https://sitedomain/dist/vendors.min.js?v=20200824145002:1:274445
bk@https://sitedomain/dist/vendors.min.js?v=20200824145002:1:274108
hk@https://sitedomain/dist/vendors.min.js?v=20200824145002:1:267954
wk@https://sitedomain/dist/vendors.min.js?v=20200824145002:1:27444`
bk@https://sitedomain/dist/vendors.min.js?v=20200824145002:1:274108
hk@https://sitedomain/dist/vendors.min.js?v=20200824145002:1:267954
wk@https://sitedomain/dist/vendors.min.js?v=20200824145002:1:274445
bk@https://sitedomain/dist/vendors.min.js?v=20200824145002:1:274108
hk@https://sitedomain/dist/vendors.min.js?v=20200824145002:1:267954
detectChanges@https://sitedomain/dist/vendors.min.js?v=20200824145002:1:178059
transform@https://sitedomain/dist/vendors.min.js?v=20200824145002:1:816759
https://sitedomain/dist/app.min.js?v=20200824145002:1:768159
hk@https://sitedomain/dist/vendors.min.js?v=20200824145002:1:267946
wk@https://sitedomain/dist/vendors.min.js?v=20200824145002:1:274445
bk@https://sitedomain/dist/vendors.min.js?v=20200824145002:1:274108
hk@https://sitedomain/dist/vendors.min.js?v=20200824145002:1:267954
wk@https://sitedomain/dist/vendors.min.js?v=20200824145002:1:274445
bk@https://sitedomain/dist/vendors.min.js?v=20200824145002:1:274108
hk@https://sitedomain/dist/vendors.min.js?v=20200824145002:1:267954
wk@https://sitedomain/dist/vendors.min.js?v=20200824145002:1:274445
bk@https://sitedomain/dist/vendors.min.js?v=20200824145002:1:274108
hk@https://sitedomain/dist/vendors.min.js?v=20200824145002:1:267954
wk@https://sitedomain/dist/vendors.min.js?v=20200824145002:1:274445
bk@https://sitedomain/dist/vendors.min.js?v=20200824145002:1:274108
hk@https://sitedomain/dist/vendors.min.js?v=20200824145002:1:267954
wk@https://sitedomain/dist/vendors.min.js?v=20200824145002:1:274445
bk@https://sitedomain/dist/vendors.min.js?v=20200824145002:1:274108
hk@https://sitedomain/dist/vendors.min.js?v=20200824145002:1:267954
wk@https://sitedomain/dist/vendors.min.js?v=20200824145002:1:274445
bk@https://sitedomain/dist/vendors.min.js?v=20200824145002:1:274108
hk@https://sitedomain/dist/vendors.min.js?v=20200824145002:1:267954
wk@https://sitedomain/dist/vendors.min.js?v=20200824145002:1:274445
bk@https://sitedomain/dist/vendors.min.js?v=20200824145002:1:274108
hk@https://sitedomain/dist/vendors.min.js?v=20200824145002:1:267954
wk@https://sitedomain/dist/vendors.min.js?v=20200824145002:1:274445
bk@https://sitedomain/dist/vendors.min.js?v=20200824145002:1:274108
hk@https://sitedomain/dist/vendors.min.js?v=20200824145002:1:267954
wk@https://sitedomain/dist/vendors.min.js?v=20200824145002:1:274445
bk@https://sitedomain/dist/vendors.min.js?v=20200824145002:1:274108
hk@https://sitedomain/dist/vendors.min.js?v=20200824145002:1:267954
detectChanges@https://sitedomain/dist/vendors.min.js?v=20200824145002:1:178059
transform@https://sitedomain/dist/vendors.min.js?v=20200824145002:1:816759
https://sitedomain/dist/app.min.js?v=20200824145002:1:768159runTask @ vendors.min.js?v=20200824145002:1invokeTask @ vendors.min.js?v=20200824145002:1n @ vendors.min.js?v=20200824145002:1


**package.json**

{
    "name": "bigred-cms-ui"`enter code here`,
    "version": "1.0.0",
    "Comments": [
        "IMPORTANT",
        "********************************************************************************************",
        "The following are under wwwroot/lib - see _Layout.cshtml for details:",
        "   jquery v3.1.1 ",`enter code here`
        "   bootstrap v3.3.7",
        "********************************************************************************************"
    ],
    "scripts": {
        "clean": "npm-clean",
        "start": "webpack --config webpack.dev.config.js --watch --debug --progress",
        "start:aot": "webpack --config webpack.config.js --watch --progress",
        "build-dev": "webpack --config webpack.dev.config.js --bail",
        "build": "webpack --config webpack.config.js --bail --env.prod",
        "compile:bootstrap": "node-sass ./wwwroot/lib/bootstrap-sass/assets/stylesheets/_bootstrap.scss ./wwwroot/lib/bootstrap-sass/assets/stylesheets/bootstrap.min.css --output-style compressed"
    },
    "license": "ISC",
    "dependencies": {
        "@angular/animations": "8.2.14",
        "@angular/cdk": "8.2.3",
        "@angular/common": "8.2.14",
        "@angular/compiler": "8.2.14",
        "@angular/compiler-cli": "8.2.14",
        "@angular/core": "8.2.14",
        "@angular/forms": "8.2.14",
        "@angular/material": "8.2.3",
        "@angular/material-moment-adapter": "8.2.3",
        "@angular/platform-browser": "8.2.14",
        "@angular/platform-browser-dynamic": "8.2.14",
        "@angular/router": "^8.2.14",
        "@fortawesome/angular-fontawesome": "0.5.0",
        "@fortawesome/fontawesome-svg-core": "1.2.25",
        "@fortawesome/free-brands-svg-icons": "5.11.2",
        "@fortawesome/free-solid-svg-icons": "5.11.2",
        "@ng-select/ng-select": "3.6.2",
        "@ngtools/webpack": "8.3.19",
        "@ngx-share/button": "7.1.4",
        "@ngx-share/buttons": "7.1.4",
        "@ngx-share/core": "7.1.4",
        "@ngx-translate/core": "10.0.2",
        "@tinymce/tinymce-angular": "^3.5.0",
        "@types/node": "12.12.12",
        "core-js": "2.5.7",
        "font-awesome": "4.7.0",
        "hammerjs": "2.0.8",
        "localize-router": "2.0.0",
        "lodash-es": "4.17.11",
        "moment": "2.20.1",
        "ng-lazyload-image": "7.0.103",
        "ng-recaptcha": "5.0.0",
        "ngx-cookie": "4.0.2",
        "ngx-pagination": "3.2.1",
        "reflect-metadata": "0.1.12",
        "rxjs": "6.5.3",
        "tslib": "1.9.3",
        "typescript": "3.4.5",
        "zone.js": "0.9.1"
    },
    "devDependencies": {
        "@types/hammerjs": "^2.0.36",
        "@types/lodash-es": "4.17.3",
        "angular2-template-loader": "0.6.2",
        "clean-webpack-plugin": "0.1.19",
        "css-loader": "2.1.0",
        "mini-css-extract-plugin": "0.5.0",
        "node-sass": "4.12.0",
        "npm-clean": "1.0.3",
        "optimize-css-assets-webpack-plugin": "5.0.1",
        "raw-loader": "^1.0.0",
        "sass-loader": "7.1.0",
        "style-loader": "0.23.1",
        "ts-loader": "4.2.0",
        "tslint": "5.11.0",
        "uglifyjs-webpack-plugin": "2.1.3",
        "webpack": "4.41.2",
        "webpack-bundle-analyzer": "3.3.2",
        "webpack-cli": "3.3.10",
        "webpack-livereload-plugin": "2.1.1"
    },
    "repository": {},
    "-vs-binding": {
        "ProjectOpened": [
            "start"
        ]
    }
}
**webpack.config.js**
const path = require("path");
const CleanWebpackPlugin = require("clean-webpack-plugin");
const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const AngularCompilerPlugin = require("@ngtools/webpack").AngularCompilerPlugin;
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');

module.exports = {
    mode: "production",
    entry: {
        app: ["./wwwroot/ClientApp/app/main.ts"],
        polyfills: "./wwwroot/ClientApp/app/polyfills.ts"
    },
    optimization: {
        minimizer: [
            new UglifyJsPlugin({
                uglifyOptions: {
                    output: {
                        comments: false
                    },
                    cache: true,
                    parallel: true
                }

            }),
            new OptimizeCssAssetsPlugin({
                cssProcessorOptions: { 
                    safe: true,
                    discardComments: { removeAll: true } 
                },
                canPrint: true
            })
        ],
        splitChunks: {
            cacheGroups: {
                vendors: {
                    test: /[\\/]node_modules[\\/]/,
                    chunks: "initial",
                    priority: 1,
                    name: 'vendors'
                }
            }
        }
    },
    module: {
        rules: [
            {
                test: /(?:\.ngfactory\.js|\.ngstyle\.js|\.ts)$/,
                loader: '@ngtools/webpack'
            },
            {
                test: /\.html$/,
                use: "raw-loader",
            },
            {
                test: /\.css$/,
                include: path.resolve(__dirname, "wwwroot/ClientApp"),
                use: "raw-loader"
            },
            {
                test: /\.css$/,
                exclude: path.resolve(__dirname, "wwwroot/ClientApp"),
                use: [MiniCssExtractPlugin.loader, "css-loader"]
            },
            {
                test: /\.scss$/,
                include: path.resolve(__dirname, "wwwroot/ClientApp"),
                use: ["raw-loader", {
                    loader: "sass-loader", options: {
                        includePaths: [path.resolve(__dirname, "wwwroot/styles")]
                    }
                }]
            },
            {
                test: /\.scss$/,
                exclude: path.resolve(__dirname, "wwwroot/ClientApp"),
                use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"]
            }
        ]
    },
    resolve: {
        extensions: [".tsx", ".ts", ".js"]
    },
    plugins: [
        new AngularCompilerPlugin({
            tsConfigPath: 'wwwroot/ClientApp/tsconfig.json',
            entryModule: 'wwwroot/ClientApp/app/app.module#AppModule',
            sourceMap: false
        }),
        new CleanWebpackPlugin(["dist/*.js"], { verbose: true }),
        new MiniCssExtractPlugin({
            filename: "[name].css",
            chunkFilename: "[id].css"
        }),
        //new BundleAnalyzerPlugin()
    ],
    output: {
        path: path.resolve(__dirname, "wwwroot/dist"),
        filename: "[name].min.js"
    },
};

标签： angularangular8

解决方案

我浏览了代码。我们在ipad2
上 遇到了同样的问题，这是一台速度慢得多的机器。 您需要创建一个AOT构建，以便在较小的设备中顺利运行它。 目前 vendor.js 拥有整个Angular库。 简而言之，您需要优化您的生产构建。 如果问题仍然存在，请开始模块化您的应用程序。 这对性能有很大帮助。




参考this在webpack中启用aot编译。

https://dzone.com/articles/aot-compilation-with-bundling-in-angular

推荐阅读