代码之家 › 专栏 › 技术社区 › Routhinator

如何为prod模式正确构建Angular 8和ckeditor5 Angular?

ckeditor5 angular

Routhinator · 技术社区 · 5 年前

我遇到了一个奇怪的问题,涉及Angular 6到8(我从Angular 6开始,迁移到Angular 7,然后又迁移到Angular 8,我认为这可能在较新的库中得到了解决,发现我错了)以及 ckeditor5-angular 模块和ckeditor5经典构建编辑器的自定义构建。

唯一添加到自定义构建中的是对齐按钮的对齐插件。

一切都在开发模式下完美运行,没有任何错误。。这是我问题的根源。在一个 --prod build我得到了这个我在开发模式下无法复制的无法识别的堆栈跟踪:

zl/i<@https://v5.staging.amateurwriting.net/main-es2015.c0032bd3a584c0b5d808.js:1:342042
zl@https://v5.staging.amateurwriting.net/main-es2015.c0032bd3a584c0b5d808.js:1:342142
Vl@https://v5.staging.amateurwriting.net/main-es2015.c0032bd3a584c0b5d808.js:1:341944
jl/<@https://v5.staging.amateurwriting.net/main-es2015.c0032bd3a584c0b5d808.js:1:341872
change@https://v5.staging.amateurwriting.net/main-es2015.c0032bd3a584c0b5d808.js:1:201004
jl@https://v5.staging.amateurwriting.net/main-es2015.c0032bd3a584c0b5d808.js:1:341862
_initPlaceholder@https://v5.staging.amateurwriting.net/main-es2015.c0032bd3a584c0b5d808.js:1:344731
init@https://v5.staging.amateurwriting.net/main-es2015.c0032bd3a584c0b5d808.js:1:343575
create/</<@https://v5.staging.amateurwriting.net/main-es2015.c0032bd3a584c0b5d808.js:1:361312
invoke@https://v5.staging.amateurwriting.net/polyfills-es2015.5cb7d8167823e5b15eaf.js:1:43382
run@https://v5.staging.amateurwriting.net/polyfills-es2015.5cb7d8167823e5b15eaf.js:1:38884
A/<@https://v5.staging.amateurwriting.net/polyfills-es2015.5cb7d8167823e5b15eaf.js:1:49712
invokeTask@https://v5.staging.amateurwriting.net/polyfills-es2015.5cb7d8167823e5b15eaf.js:1:44000
runTask@https://v5.staging.amateurwriting.net/polyfills-es2015.5cb7d8167823e5b15eaf.js:1:39499
y@https://v5.staging.amateurwriting.net/polyfills-es2015.5cb7d8167823e5b15eaf.js:1:45945
invokeTask@https://v5.staging.amateurwriting.net/polyfills-es2015.5cb7d8167823e5b15eaf.js:1:45030
v@https://v5.staging.amateurwriting.net/polyfills-es2015.5cb7d8167823e5b15eaf.js:1:56978
b@https://v5.staging.amateurwriting.net/polyfills-es2015.5cb7d8167823e5b15eaf.js:1:57299
main-es2015.c0032bd3a584c0b5d808.js:1:968675
    createEditor https://v5.staging.amateurwriting.net/main-es2015.c0032bd3a584c0b5d808.js:1
    invoke https://v5.staging.amateurwriting.net/polyfills-es2015.5cb7d8167823e5b15eaf.js:1
    run https://v5.staging.amateurwriting.net/polyfills-es2015.5cb7d8167823e5b15eaf.js:1
    A https://v5.staging.amateurwriting.net/polyfills-es2015.5cb7d8167823e5b15eaf.js:1
    invokeTask https://v5.staging.amateurwriting.net/polyfills-es2015.5cb7d8167823e5b15eaf.js:1
    runTask https://v5.staging.amateurwriting.net/polyfills-es2015.5cb7d8167823e5b15eaf.js:1
    y https://v5.staging.amateurwriting.net/polyfills-es2015.5cb7d8167823e5b15eaf.js:1
    invokeTask https://v5.staging.amateurwriting.net/polyfills-es2015.5cb7d8167823e5b15eaf.js:1
    v https://v5.staging.amateurwriting.net/polyfills-es2015.5cb7d8167823e5b15eaf.js:1
    b https://v5.staging.amateurwriting.net/polyfills-es2015.5cb7d8167823e5b15eaf.js:1

我在Github上遇到了很多不同的问题,似乎它们可能是相关的,但其中没有一个解决方案是有效的。我已经设置好我的tsconfig。json使用es6/es2015(ckeditor5不支持es5,我同意,我也不想支持它),并添加了 allowJs: true 选项,正如在ckeditor5的问题中提到的,但是这个堆栈跟踪永远不会改变,而且我永远无法在开发模式下重现它。

我该怎么做才能找到问题的根源?有人看到了吗?当我指定es6构建目标时,如何阻止Angular生成es5工件?它还在建造。。不过,它们似乎没有加载到Firefox中,所以我很确定它们没有造成我看到的问题,但我也很确定它们不会工作,因为ckeditor5仅限于es6+。

tsconfig。json:

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "downlevelIteration": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "module": "esnext",
    "moduleResolution": "node",
    "importHelpers": true,
    "target": "es2015",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2018",
      "dom"
    ]
  }
}

polyfills。ts:

/**
 * This file includes polyfills needed by Angular and is loaded before the app.
 * You can add your own extra polyfills to this file.
 *
 * This file is divided into 2 sections:
 *   1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
 *   2. Application imports. Files imported after ZoneJS that should be loaded before your main
 *      file.
 *
 * The current setup is for so-called "evergreen" browsers; the last versions of browsers that
 * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
 * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
 *
 * Learn more in https://angular.io/guide/browser-support
 */

/***************************************************************************************************
 * BROWSER POLYFILLS
 */

/** IE10 and IE11 requires the following for NgClass support on SVG elements */
// import 'classlist.js';  // Run `npm install --save classlist.js`.

/**
 * Web Animations `@angular/platform-browser/animations`
 * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari.
 * Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0).
 */
// import 'web-animations-js';  // Run `npm install --save web-animations-js`.

/**
 * By default, zone.js will patch all possible macroTask and DomEvents
 * user can disable parts of macroTask/DomEvents patch by setting following flags
 * because those flags need to be set before `zone.js` being loaded, and webpack
 * will put import in the top of bundle, so user need to create a separate file
 * in this directory (for example: zone-flags.ts), and put the following flags
 * into that file, and then add the following code before importing zone.js.
 * import './zone-flags.ts';
 *
 * The flags allowed in zone-flags.ts are listed here.
 *
 * The following flags will work for all browsers.
 *
 * (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
 * (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
 * (window as any).__zone_symbol__UNPATCHED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
 *
 *  in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
 *  with the following flag, it will bypass `zone.js` patch for IE/Edge
 *
 *  (window as any).__Zone_enable_cross_context_check = true;
 *
 */

/***************************************************************************************************
 * Zone JS is required by default for Angular itself.
 */
import 'zone.js/dist/zone.js';  // Included with Angular CLI.
(window as any).__Zone_disable_toString = true; // Zone will not patch Function.prototype.toString

/***************************************************************************************************
 * APPLICATION IMPORTS
 */

更新:

我用 --optimization=false 试着看看错误到底是什么然后它就消失了。。所以这似乎与丑陋有关,但不确定如何。

0 回复 | 直到 5 年前

Routhinator 5 年前

发现CKEditor5无法在产品中工作的原因:

在角度上。您必须设置:

...
"optimization: true",
"buildOptimizer": false,
...

buildOptimizer通过禁用CKEditor5来重命名中断CKEditor5的函数,它在Angular 6,7,8中工作。我猜CKEditor使用的是命名函数查找,而UglifyJS在编译过程中缺少这种功能。Angular已决定默认启用此选项。

不过,这将我的es2015 prod build的大小增加了270kb。

我已经测试并发现它可以解决Angular 6、7和8中的问题。

相关的角度问题如下: https://github.com/angular/angular-cli/issues/11439