Loading [MathJax]/jax/output/CommonHTML/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >Angular-内存溢出的问题

Angular-内存溢出的问题

作者头像
jwangkun
发布于 2021-12-23 09:41:48
发布于 2021-12-23 09:41:48
2.7K00
代码可运行
举报
文章被收录于专栏:John Wong's BlogJohn Wong's Blog
运行总次数:0
代码可运行

本项目用的是angular6搭建,用动态组件的形式来显示页面,之前遇到过因为内存溢出而导致无法aot的问题,

Angular4以上的该方法都适用

解决方法:手动改写内存上限

修改目录: my-project/node_modules/.bin 找到 ng.cmd :

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
@IF EXIST "%~dp0\node.exe" (
  "%~dp0\node.exe" --max_old_space_size=8192 "%~dp0\..\@angular\cli\bin\ng" %*
) ELSE (
  @SETLOCAL
  @SET PATHEXT=%PATHEXT:;.JS;=;%
  node --max_old_space_size=8192  "%~dp0\..\@angular\cli\bin\ng" %*
)

修改目录: my-project/node_modules/.bin 找到 ngc.cmd :

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
@IF EXIST "%~dp0\node.exe" (
 "%~dp0\node.exe" --max_old_space_size=8192 "%~dp0\..\._@angular_compiler-cli@4.0.1@@angular\compiler-cli\src\main.js" %*
) ELSE (
 @SETLOCAL
 @SET PATHEXT=%PATHEXT:;.JS;=;%
 node --max_old_space_size=8192 "%~dp0\..\._@angular_compiler-cli@4.0.1@@angular\compiler-cli\src\main.js" %*
)

至于到底是什么原因导致的内存溢出,还不清楚,只是有如下猜测:

1)文件过多;

2)订阅数据没有销毁占用内存,(看了下订阅的数据很少,应该不是的);

3)因为所有的组件都在一个根目录下(上面说了,用的动态组件没用路由),导致需要编译的组件过多?

暂时还不清楚只能先用设置内存上限的方法来解决,有大神的话望不吝指教;

还有一个问题就是用动态组件的方式,组件都在根目录下,会导致首次加载的时间过长。有奇思妙想请告诉我,哈哈

同时package的时候也需要修改打包时候的内存

package.json

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
{
  "name": "pms",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve --host 0.0.0.0  ",
    "start-un-live": "ng serve --host 0.0.0.0 --port 4201 --live-reload false",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "build-prod": "node --max_old_space_size=8192 ./node_modules/@angular/cli/bin/ng build --prod --build--optimizer --base-href /pms/"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^6.1.0",
    "@angular/common": "^6.1.0",
    "@angular/compiler": "^6.1.0",
    "@angular/core": "^6.1.0",
    "@angular/forms": "^6.1.0",
    "@angular/http": "^6.1.0",
    "@angular/platform-browser": "^6.1.0",
    "@angular/platform-browser-dynamic": "^6.1.0",
    "@angular/router": "^6.1.0",
    "@fortawesome/angular-fontawesome": "^0.3.0",
    "@fortawesome/fontawesome-svg-core": "^1.2.8",
    "@fortawesome/free-brands-svg-icons": "^5.5.0",
    "@fortawesome/free-regular-svg-icons": "^5.5.0",
    "@fortawesome/free-solid-svg-icons": "^5.5.0",
    "@grapecity/spread-sheets": "^13.0.5",
    "@grapecity/spread-sheets-angular": "^13.0.5",
    "@grapecity/spread-sheets-resources-zh": "^13.0.5",
    "@ng-bootstrap/ng-bootstrap": "^3.3.1",
    "@ng-select/ng-select": "^2.12.1",
    "@types/mathjs": "^5.0.1",
    "@types/pako": "^1.0.1",
    "angular-progress-http": "^1.0.0",
    "angular-safeguard": "^2.0.1",
    "angular-sortablejs": "^2.7.0",
    "angular2-fontawesome": "^5.2.1",
    "babel-polyfill": "^6.26.0",
    "bootstrap": "^4.1.3",
    "classlist.js": "^1.1.20150312",
    "core-js": "^2.5.4",
    "echarts": "^4.2.0-rc.2",
    "echarts-gl": "^1.1.1",
    "essence-ng2-print": "^1.1.0",
    "file-saver": "^2.0.2",
    "font-awesome": "^4.7.0",
    "install": "^0.12.2",
    "mathjs": "^5.10.0",
    "ng-sidebar": "^8.0.0",
    "ng2-completer": "^2.0.8",
    "ng2-pdf-viewer": "^5.2.4",
    "ng2-smart-table": "^1.3.5",
    "ng2-tree": "^2.0.0-rc.11",
    "ngx-clipboard": "^12.1.2",
    "ngx-color-picker": "^7.1.0",
    "ngx-echarts": "^4.0.1",
    "ngx-print": "^1.2.0-beta.2",
    "ngx-quill": "^7.0.2",
    "ngx-toastr": "^10.0.4",
    "pako": "^1.0.10",
    "primeicons": "^1.0.0",
    "primeng": "^6.1.7",
    "print-js": "^1.0.61",
    "quill": "^1.3.6",
    "rxjs": "~6.2.0",
    "rxjs-compat": "^6.2.2",
    "sortablejs": "^1.8.4",
    "web-animations-js": "^2.3.1",
    "xlsx": "^0.15.2",
    "zone.js": "~0.8.26"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^0.8.9",
    "@angular/cli": "^6.2.7",
    "@angular/compiler-cli": "^6.1.0",
    "@angular/language-service": "^6.1.0",
    "@angularclass/hmr": "^2.1.3",
    "@types/echarts": "^4.1.3",
    "@types/file-saver": "^2.0.1",
    "@types/jasmine": "~2.8.8",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~8.9.4",
    "codelyzer": "~4.3.0",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~3.0.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~1.1.2",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.4.0",
    "ts-md5": "^1.2.4",
    "ts-node": "~7.0.0",
    "tslint": "~5.11.0",
    "typescript": "~2.9.2"
  }
}

下一篇: Docker 安装运行 Jenkines →

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2020-11-27,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
VUE 导入Echarts 雨量流量关系图引发的内存溢出问题
在项目中本来打算今天写雨量流量关系图的,但是在引入Echart官网的代码后直接报错,内存溢出了,直接项目就挂了,我...
彼岸舞
2021/12/28
8240
VUE 导入Echarts 雨量流量关系图引发的内存溢出问题
关于ng build编译报错
1.在项目 myProject\node_modules\.bin 文件夹下面找到ng.cmd 和 ngc.cmd 文件添加配置信息
用户1437675
2018/08/20
1K0
手工将项目升级至 Angular 9 记录
Angular 最近发布了 9.0 版本, 需要先将一个模板项目升级至新版本。 虽然它提供了 ng update 命令来升级, 但是这个命令会自动调整 package.json 文件依赖项的顺序, 导致向其它项目合并时产生不必要的冲突。 为了不打乱现有的依赖项的顺序, 容易向其它派生项目进行合并, 同时也能明确知道究竟那些文件需要修改, 因此采用手工升级的办法。
beginor
2020/08/10
2K0
angular打包报错内存溢出 nodejs 执行失败报错 “JavaScript heap out of memory” 的解决办法
报错信息很直观地指出是内存溢出了。是什么导致了内存溢出呢?其根本原因在于 nodejs 默认限制了最大可使用的内存大小。
用户1437675
2019/03/06
6.2K0
关于node项目打包内存溢出JS stacktrace
问题 <--- Last few GCs ---> 58003 ms: Mark-sweep 1350.6 (1434.6) -> 1350.5 (1434.6) MB, 753.0 / 0.0 ms [allocation failure] [GC in old space requested]. 58751 ms: Mark-sweep 1350.5 (1434.6) -> 1350.5 (1434.6) MB, 747.6 / 0.0 ms [allocation failure] [G
用户1437675
2022/03/24
3K0
关于node项目打包内存溢出JS stacktrace
解决Cannot find module '@angular/compiler-cli'
今天clone之前做的一个angular项目,使用ng serve一直提示An unhandled exception occurred: Cannot find module '@angular/compiler-cli'。首先有这个提示的异常我们可以知道这其实就是我们项目中的相关依赖没有安装好的额原因,在node_modules文件夹中找不到。首先检查一下自己电脑上的npm环境是否安装好了,然后再检查下Angular CLI是否安装好,假如都按照好的话就可能是由于npm相关依赖包网络缓慢安装失败的原因,你可以切换成淘宝镜像然后重新安装一次依赖,不过先要把之前的node_modules文件夹删了在安装。
追逐时光者
2021/01/21
1.1K0
angular聊天IM实例|仿微信angular版|NG2案例
运用angular+@angular/cli+@angular/router+@ngrx/store等技术实现开发的移动端聊天室angular版,实现了下拉刷新、长按右键菜单、发送消息、表情(动图),图片、视频预览,打赏、红包等功能。
andy2018
2019/07/16
3.8K0
angular聊天IM实例|仿微信angular版|NG2案例
如何管理云原生应用程序的依赖关系
作者 | Guy Bar-Gil 译者 | Sambodhi 策划 | 褚杏娟 许多企业正在将他们的业务转移到云端,这使得他们能够更灵活、更迅速地响应市场的变化,并且更易于拓展自己的业务。但由于要进行大量的规划和实施,所以向云端迁移可能也是一项非常艰巨的任务。术语“云原生”是一种利用云计算交付范式的优势进行开发和运行应用程序的方式。 “云原生”意味着什么? 应用程序在哪里被托管并不重要,重要的是如何开发和部署它们。云原生开发既可以使用公共云,也可以使用私有云。任何云存储都具有存储功能并支持来自
深度学习与Python
2023/03/29
2K0
如何管理云原生应用程序的依赖关系
vue源码解析入口文件
为了加深对vue的理解,之前我们实现了一版mini-vue现在我们来看真正的vue源码来看下到底vue是如何实现的.
玖柒的小窝
2021/11/03
9440
package.json——从vue的package.json来详细说明package.json内容
Vue2.7.14源码阅读的补充内容,~c package.json c~ 文件是项目的清单。 它可以做很多完全互不相关的事情。 例如,它是用于工具的配置中心。 它也是 npm 和 yarn 存储所有已安装软件包的名称和版本的地方;
思索
2024/08/15
2320
Angular 实现类似微服务的效果
世间万物皆对象
2024/03/20
2110
Angular2入门体验
好的工具往往使得开发应用更快更简单,而不是任何模块都手动开发。angualr cli就是一个支持 创建工程,添加文件,对各种任务如测试、打包、部署等迭代。 本文的目的就是基于TypeScript开发构建一个angualr应用,使用angualr cli可以选择工程的风格。 在本章的 末尾,你可以理解CLI的开发以及开发完整应用的样例。 也可以通过这个链接直接下载源码。 第一步,配置环境变量 在开始开发前,需要安装nodejs。 点击这个网址,Nodejs安装文件下载 在命令行中,执行: sudo npm i
用户1154259
2018/04/17
1.9K0
Top 10 Features of Angular 8
In the first quarter of 2019, Google launched Angular 8 which was much awaited by the community, the expectations were really high for Angular 8 as it was initially said that Angular 10 will be the final version of the framework. The skyrocketed hype demands huge performance improvements in Angular 8 which was quite matched with mainly focusing on the toolchain and also making Angular easier for users to create different types of application along with other performance improvements.
用户4822892
2019/08/22
7420
Top 10 Features of Angular 8
使用CircleCI2.0持续集成Angular项目
这种事情完全可以交给CircleCI来处理。 CircleCI的好处(截止当前的政策2019.2):
mafeifan
2019/03/11
9050
使用CircleCI2.0持续集成Angular项目
用Angule Cli创建Angular项目
okaychen
2018/01/05
1.6K0
用Angule Cli创建Angular项目
关于package.json 的script标签使用以及和npm的关系
上面代码是package.json文件,里面的scripts字段是一个对象。它的每一个属性,对应一段脚本或者一个指令。
用户1437675
2018/08/20
8500
angular入门教程_初学者织围巾简单教程慢动作
本课程是一个系列基础教程,目标是带领读者上手实战,课程以新版本 Angular 的 3 个核心概念作为主线:组件、路由、模块,加上业务开发过程中必须用到的特性:工具、指令、表单、RxJS、i18n、测试,一共分为 9 部分,34 篇文章。
全栈程序员站长
2022/11/01
3.7K0
angular入门教程_初学者织围巾简单教程慢动作
看看Angular有啥新玩法!手把手教你在Angular15中集成Excel报表插件
Angular框架(以下简称“Angular”)作为一款由谷歌开发的Web应用程序框架,其强大的依赖注入系统、可重复使用的模块化开发理念和响应式编程模式等特点让Angular一问世便取得了巨大的关注和流量。 截止目前为止,Angular已经迭代了15个版本,而Angular15又有哪些新的亮眼表现呢?小编为大家简单介绍几个Angular15的新特性(以下特性源于Angular官网):
葡萄城控件
2023/10/11
7920
看看Angular有啥新玩法!手把手教你在Angular15中集成Excel报表插件
相关推荐
VUE 导入Echarts 雨量流量关系图引发的内存溢出问题
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验