Angular 10 运行 ng serve 获取 webpack，内存错误

Posted 2023-03-07

技术标签:

【中文标题】Angular 10 运行 ng serve 获取 webpack，内存错误【英文标题】：Angular 10 run ng serve get webpack, memory errors 【发布时间】：2021-01-17 18:09:59 【问题描述】：

我只是尝试在我的 MacOS 机器上创建一个 Angular 应用程序。

 npm install -g @angular/cli
 ng new my-app
 cd my-app
 ng serve

我在这个项目中使用了nvm use 12（尽管我在全球范围内有 14 个）


     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/
    

Angular CLI: 10.1.4
Node: 12.16.3
OS: darwin x64

Angular: 
... 
Ivy Workspace: 

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.1001.4
@angular-devkit/core         10.1.4
@angular-devkit/schematics   10.1.4
@schematics/angular          10.1.4
@schematics/update           0.1001.4

package.json 文件


  "sideEffects": false,
  "name": "ng-satire-site",
  "version": "0.0.0",
  "scripts": 
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  ,
  "private": true,
  "dependencies": 
    "@angular/animations": "~10.1.4",
    "@angular/common": "~10.1.4",
    "@angular/compiler": "~10.1.4",
    "@angular/core": "~10.1.4",
    "@angular/forms": "~10.1.4",
    "@angular/platform-browser": "~10.1.4",
    "@angular/platform-browser-dynamic": "~10.1.4",
    "@angular/router": "~10.1.4",
    "rxjs": "~6.6.0",
    "tslib": "^2.0.0",
    "zone.js": "~0.10.2"
  ,
  "devDependencies": 
    "@angular-devkit/build-angular": "^0.1001.4",
    "@angular/cli": "~10.1.4",
    "@angular/compiler-cli": "~10.1.4",
    "@types/jasmine": "~3.5.0",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "^12.11.1",
    "codelyzer": "^6.0.0",
    "jasmine-core": "~3.6.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "~5.0.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage-istanbul-reporter": "~3.0.2",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "^1.5.0",
    "protractor": "~7.0.0",
    "ts-node": "~8.3.0",
    "tslint": "~6.1.0",
    "typescript": "~4.0.2"

当我执行ng serve 时，localhost:4200 将挂起，直到 1 分钟后它失败并出现以下错误

92% additional asset processing copy-webpack-plugin
<--- Last few GCs --->

[22997:0x102a7f000]    79239 ms: Mark-sweep 2031.0 (2063.4) -> 2027.7 (2063.9) MB, 1974.0 / 3.2 ms  (average mu = 0.135, current mu = 0.015) allocation failure scavenge might not succeed
[22997:0x102a7f000]    80618 ms: Mark-sweep 2033.6 (2063.9) -> 2027.6 (2081.7) MB, 1360.3 / 3.4 ms  (average mu = 0.084, current mu = 0.013) allocation failure scavenge might not succeed


<--- JS stacktrace --->

==== JS stack trace =========================================

    0: ExitFrame [pc: 0x10097cc39]
    1: StubFrame [pc: 0x10097dcd3]
Security context: 0x2d29bc4408d1 <JSObject>
    2: normalize [0x2d29ac580511] [path.js:~1004] [pc=0x26c80fc5e45b](this=0x2d291c73fe89 <Object map = 0x2d29a4a2f7d9>,0x2d2931037269 <String[70]: /Users/da/Downloads/CIVIL WAR GENERALS 2/CWG2/CWG2/SCENARIO/WINC2H.MLB>)
    3: /* anonymous */ [0x2d293e871039] [/Users/da/*code*/ng-tests/ng-satire-app/node_modules/chokidar/lib/...

FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - javascript heap out of memory

Writing Node.js report to file: report.20201002.111236.22997.0.001.json
Node.js report completed
 1: 0x1010285f9 node::Abort() (.cold.1) [/Users/da/.nvm/versions/node/v12.16.3/bin/node]
 2: 0x10008634d node::FatalError(char const*, char const*) [/Users/da/.nvm/versions/node/v12.16.3/bin/node]
 3: 0x10008648e node::OnFatalError(char const*, char const*) [/Users/da/.nvm/versions/node/v12.16.3/bin/node]
 4: 0x100187c07 v8::Utils::ReportOOMFailure(v8::internal::Isolate*, char const*, bool) [/Users/da/.nvm/versions/node/v12.16.3/bin/node]
 5: 0x100187ba7 v8::internal::V8::FatalProcessOutOfMemory(v8::internal::Isolate*, char const*, bool) [/Users/da/.nvm/versions/node/v12.16.3/bin/node]
 6: 0x100315955 v8::internal::Heap::FatalProcessOutOfMemory(char const*) [/Users/da/.nvm/versions/node/v12.16.3/bin/node]
 7: 0x1003171ca v8::internal::Heap::RecomputeLimits(v8::internal::GarbageCollector) [/Users/da/.nvm/versions/node/v12.16.3/bin/node]
 8: 0x100313bfc v8::internal::Heap::PerformGarbageCollection(v8::internal::GarbageCollector, v8::GCCallbackFlags) [/Users/da/.nvm/versions/node/v12.16.3/bin/node]
 9: 0x1003119fe v8::internal::Heap::CollectGarbage(v8::internal::AllocationSpace, v8::internal::GarbageCollectionReason, v8::GCCallbackFlags) [/Users/da/.nvm/versions/node/v12.16.3/bin/node]
10: 0x10031d8ca v8::internal::Heap::AllocateRawWithLightRetry(int, v8::internal::AllocationType, v8::internal::AllocationOrigin, v8::internal::AllocationAlignment) [/Users/da/.nvm/versions/node/v12.16.3/bin/node]
11: 0x10031d951 v8::internal::Heap::AllocateRawWithRetryOrFail(int, v8::internal::AllocationType, v8::internal::AllocationOrigin, v8::internal::AllocationAlignment) [/Users/da/.nvm/versions/node/v12.16.3/bin/node]
12: 0x1002eb58a v8::internal::Factory::NewFillerObject(int, bool, v8::internal::AllocationType, v8::internal::AllocationOrigin) [/Users/da/.nvm/versions/node/v12.16.3/bin/node]
13: 0x10063e698 v8::internal::Runtime_AllocateInYoungGeneration(int, unsigned long*, v8::internal::Isolate*) [/Users/da/.nvm/versions/node/v12.16.3/bin/node]
14: 0x10097cc39 Builtins_CEntry_Return1_DontSaveFPRegs_ArgvOnStack_NoBuiltinExit [/Users/da/.nvm/versions/node/v12.16.3/bin/node]
15: 0x10097dcd3 Builtins_StringAdd_CheckNone [/Users/da/.nvm/versions/node/v12.16.3/bin/node]
16: 0x26c80fc5e45b 
17: 0x26c80fe6e097 
Abort trap: 6

我尝试从 github 克隆一个现有的 repo，但在此设备和我的工作计算机上存在相同的问题。工作计算机工作正常，而 MacOS 无法克隆相同的存储库。我曾尝试在此设备上克隆其他 Angular 应用程序，但最初遇到此错误

An unhandled exception occurred: Cannot find module '@angular-devkit/build-angular/package.json'
Require stack:
- /Users/da/*code*/ng-tests/node_modules/@angular-devkit/architect/node/node-modules-architect-host.js
- /Users/da/*code*/ng-tests/node_modules/@angular-devkit/architect/node/index.js
- /Users/da/*code*/ng-tests/node_modules/@angular/cli/models/architect-command.js
- /Users/da/*code*/ng-tests/node_modules/@angular/cli/commands/serve-impl.js
- /Users/da/*code*/ng-tests/node_modules/@angular-devkit/schematics/tools/export-ref.js
- /Users/da/*code*/ng-tests/node_modules/@angular-devkit/schematics/tools/index.js
- /Users/da/*code*/ng-tests/node_modules/@angular/cli/utilities/json-schema.js
- /Users/da/*code*/ng-tests/node_modules/@angular/cli/models/command-runner.js
- /Users/da/*code*/ng-tests/node_modules/@angular/cli/lib/cli/index.js
- /usr/local/lib/node_modules/@angular/cli/lib/init.js
- /usr/local/lib/node_modules/@angular/cli/bin/ng
See "/private/var/folders/f4/mlvzp1r55zs854sbj_bypf200000gn/T/ng-s5zwHm/angular-errors.log" for further details.

使用不同的存储库，我通过以下方式解决了这个问题

npm install --save-dev @angular-devkit/build-angular
npm install
ng serve -o

但是将该解决方案应用于我尝试访问的存储库，我得到了上面提到的初始 92% additional asset processing copy-webpack-plugin，然后我又回到了我开始的地方。

【问题讨论】：

如果有任何可用输入，仍在此处寻找解决方案 【参考方案1】：

节点 --max_old_space_size=16192 ./node_modules/@angular/cli/bin/ng 服务尝试给它更多内存

【讨论】：

以上是关于Angular 10 运行 ng serve 获取 webpack，内存错误的主要内容，如果未能解决你的问题，请参考以下文章

运行 ng serve 时找不到模块“@angular/compiler-cli/ngc”

构建 Angular 8 项目时出现空白页面，但使用“ng serve”可以完美运行

ng serve 命令需要在 Angular 项目中运行，但找不到项目定义

Angular CLI - ng serve - 来自节点进程的高 CPU 使用率

当同时运行 ng build --watch 和 ng serve 时，Angular 7 库 html-template 更改不会影响到应用程序

在 ng serve 命令上找不到构建器 @angular-devkit/build-angular:dev-server 的实现