【问题标题】:Angular build for production fails用于生产的 Angular 构建失败
【发布时间】:2019-06-22 08:20:33
【问题描述】:

当我尝试使用以下命令 ng build --prod --build-optimizer 为生产构建我的 Angular 应用程序时,我得到以下输出:

Date: 2019-01-29T08:39:12.193Z
Hash: 05648c76cf91b1245f68
Time: 27920ms
chunk {0} runtime.1eee2a92f0ed121267d0.js (runtime) 2.22 kB [entry] [rendered]
chunk {1} 1.71c6b320e46d84e7f880.js () 88.8 kB  [rendered]
chunk {2} main.058aa675d38205a01c2e.js (main) 1.65 MB [initial] [rendered]
chunk {3} polyfills.6226af78bf8dfb509e3e.js (polyfills) 61.7 kB [initial] [rendered]
chunk {4} styles.dec6a5db702d518085c9.css (styles) 61.2 kB [initial] [rendered]
chunk {5} 5.639dab8d0d9c763ecce1.js () 639 kB  [rendered]
chunk {6} 6.eeb0ec1b5f6ee2bc4225.js () 130 kB  [rendered]

ERROR in 5.639dab8d0d9c763ecce1.js from Terser
--> Unexpected token: punc ()) [5.639dab8d0d9c763ecce1.js:4086,34] <--
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! second-frontend@0.0.0 build_prod: `ng build --prod --build-optimizer`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the second-frontend@0.0.0 build_prod script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

为开发而构建并为应用程序服务工作正常,所以我怀疑它可能与 uglify 过程有关。生产的angular json配置如下:

"production": {
  "fileReplacements": [
    {
      "replace": "src/environments/environment.ts",
      "with": "src/environments/environment.prod.ts"
    }
  ],
  "optimization": true,
  "outputHashing": "all",
  "sourceMap": false,
  "extractCss": true,
  "namedChunks": false,
  "aot": true,
  "extractLicenses": true,
  "vendorChunk": false,
  "buildOptimizer": true
},

角度版本和包是:

Angular CLI: 7.2.3
Node: 11.1.0
OS: win32 x64
Angular: 7.2.0
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.12.1
@angular-devkit/build-angular     0.12.1
@angular-devkit/build-optimizer   0.12.1
@angular-devkit/build-webpack     0.12.1
@angular-devkit/core              7.2.1
@angular-devkit/schematics        7.2.3
@angular/cdk                      7.2.1
@angular/cli                      7.2.3
@angular/flex-layout              7.0.0-beta.23
@angular/material                 7.2.1
@ngtools/webpack                  7.2.1
@schematics/angular               7.2.3
@schematics/update                0.12.3
rxjs                              6.3.3
typescript                        3.2.2
webpack                           4.23.1

最后,tsconfig.json 文件的内容如下:

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
      "@app/*": ["src/app/*"],
      "@env/*": ["src/environments/*"]
    },
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es5",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2017",
      "dom"
    ]
  }
}

如果我将 angular.json "SourceMap" 选项从 false 更改为 true 并尝试执行它构建的生产构建而不抛出任何错误:

Date: 2019-01-29T08:47:50.705Z
Hash: 369c42b07abe57a96302
Time: 42331ms
chunk {0} runtime.90bf2a53d53699d5ef63.js, runtime.90bf2a53d53699d5ef63.js.map (runtime) 2.28 kB [entry] [rendered]
chunk {1} 1.9ac663afcd9a15f9ad98.js, 1.9ac663afcd9a15f9ad98.js.map () 88.9 kB  [rendered]
chunk {2} main.e3c4184e7cbc49903adc.js, main.e3c4184e7cbc49903adc.js.map (main) 1.65 MB [initial] [rendered]
chunk {3} polyfills.6c3e7ecffd41b4bb0d68.js, polyfills.6c3e7ecffd41b4bb0d68.js.map (polyfills) 61.7 kB [initial] [rendered]
chunk {4} styles.cb7c8ca5b54a30c69879.css, styles.cb7c8ca5b54a30c69879.css.map (styles) 61.2 kB [initial] [rendered]
chunk {5} 5.72034e2cb610bc9b5476.js, 5.72034e2cb610bc9b5476.js.map () 251 kB  [rendered]
chunk {6} 6.45111c2fd642148bbdd3.js, 6.45111c2fd642148bbdd3.js.map () 131 kB  [rendered]

Process finished with exit code 0

有什么建议吗?

编辑:
运行ng build --prod --optimization=false 完美编译

【问题讨论】:

  • 您在这方面取得了进展吗?我想我看到了同样的问题。
  • 实际上,我发现了 2 个可能的“解决方案”:第一个是将 --optimization 标志设置为 false。另一种是修改 angular.json 文件,将 sourceMap 选项设置为 true。我正在使用第二个,因为它优化了输出。根本不是最终解决方案,但它们确实有效。
  • 在我们的例子中,问题是 Angular 项目中的 .js 文件中的尾随逗号。但是我们是如何找到它的呢?我们在 Stack Overflow stackoverflow.com/questions/54380816/… 中找到了解决方案
  • 太棒了!问题是不是在我的代码中而是在我正在使用的 node_modules 库中的尾随昏迷。删除它可以消除故障

标签: angular angular-cli angular7 angular-cli-v7


【解决方案1】:

正如Anton Mitsev 所说,问题是尾随昏迷。删除尾随错误消失。

【讨论】:

  • 有同样的问题,但是,结尾的逗号属于第三方库,我无权访问它。对此还有其他解决方案吗?不使用优化标志不是一种选择,也许是某种不优化特定node_module 的方法?
  • 为什么不将它从 npm_modules 中的源代码中删除作为临时修复?
  • 这在持续集成环境中是行不通的,我需要真正的依赖关系,从它那里接收更新并优化构建
  • 那么我认为唯一的解决方案是创建一个要求兼容性的问题
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2017-10-22
  • 2018-10-13
  • 2018-02-11
  • 1970-01-01
  • 1970-01-01
  • 2020-10-20
  • 1970-01-01
相关资源
最近更新 更多