如何为生产模式正确构建 Angular 8 和 ckeditor5-angular?
How to properly build Angular 8 and ckeditor5-angular for prod mode?
我一直被困在一个涉及 Angular 6 到 8 的奇怪问题上(我从 Angular 6 开始迁移到 7,然后迁移到 8,我认为这可能已经通过更新的库解决了,并发现我错了)结合 ckeditor5-angular
模块和 ckeditor5-classic-build 编辑器的自定义构建。
自定义构建中唯一添加的是对齐按钮的对齐插件。
一切都在开发模式下完美运行,没有任何错误..这是我问题的根源。在 --prod
构建中,我得到了无法在开发模式下重现的难以辨认的堆栈跟踪:
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 上遇到过很多不同的问题,这些问题看起来可能是相关的,但是 none 中的解决方案是有效的。我已将我的 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
重新运行构建以尝试查看实际错误是什么,它消失了..所以这似乎与 uglifyjs 有关,但不确定如何。
找到CKEditor5在产品中不工作的原因:
在angular.json中你必须设置:
...
"optimization: true",
"buildOptimizer": false,
...
buildOptimizer 重命名破坏 CKEditor5 的函数,通过禁用它它在 Angular 6,7,8 中工作。我猜 CKEditor 正在使用命名函数查找,编译过程中缺少 UglifyJS。 Angular 已决定默认启用此选项。
但是警告,这使我的 es2015 prod 构建的大小增加了 270kb。
我已经测试并发现它可以工作并解决 Angular 6、7 和 8 中的问题。
相关的 Angular 问题在这里:https://github.com/angular/angular-cli/issues/11439
我一直被困在一个涉及 Angular 6 到 8 的奇怪问题上(我从 Angular 6 开始迁移到 7,然后迁移到 8,我认为这可能已经通过更新的库解决了,并发现我错了)结合 ckeditor5-angular
模块和 ckeditor5-classic-build 编辑器的自定义构建。
自定义构建中唯一添加的是对齐按钮的对齐插件。
一切都在开发模式下完美运行,没有任何错误..这是我问题的根源。在 --prod
构建中,我得到了无法在开发模式下重现的难以辨认的堆栈跟踪:
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 上遇到过很多不同的问题,这些问题看起来可能是相关的,但是 none 中的解决方案是有效的。我已将我的 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
重新运行构建以尝试查看实际错误是什么,它消失了..所以这似乎与 uglifyjs 有关,但不确定如何。
找到CKEditor5在产品中不工作的原因:
在angular.json中你必须设置:
...
"optimization: true",
"buildOptimizer": false,
...
buildOptimizer 重命名破坏 CKEditor5 的函数,通过禁用它它在 Angular 6,7,8 中工作。我猜 CKEditor 正在使用命名函数查找,编译过程中缺少 UglifyJS。 Angular 已决定默认启用此选项。
但是警告,这使我的 es2015 prod 构建的大小增加了 270kb。
我已经测试并发现它可以工作并解决 Angular 6、7 和 8 中的问题。
相关的 Angular 问题在这里:https://github.com/angular/angular-cli/issues/11439