ckeditor5-angular
ckeditor5-angular copied to clipboard
ckeditor
Missing Ivy distribution
When Angular v13 is used with the Ivy renderer enabled, the bundle generation phase shows the following warning due to a deprecated feature (legacy "View Engine"):
- Generating browser application bundles (phase: setup)...
Processing legacy "View Engine" libraries:
- @ckeditor/ckeditor5-angular [es2015/esm2015] (https://github.com/ckeditor/ckeditor5-angular.git)
Encourage the library authors to publish an Ivy distribution.
? Browser application bundle generation complete.
Could this be somehow related to #181 and get fixed by publishing an Ivy distribution?
1- Check Angular Version
$> ng version
_ _ ____ _ ___
/ \ _ __ __ _ _ _| | __ _ _ __ / ___| | |_ _|
/ △ \ | '_ \ / _` | | | | |/ _` | '__| | | | | | |
/ ___ \| | | | (_| | |_| | | (_| | | | |___| |___ | |
/_/ \_\_| |_|\__, |\__,_|_|\__,_|_| \____|_____|___|
|___/
Angular CLI: 14.0.0
Node: 16.14.2
Package Manager: npm 8.5.0
OS: linux x64
Angular:
...
Package Version
------------------------------------------------------
@angular-devkit/architect 0.1400.0 (cli-only)
@angular-devkit/core 14.0.0 (cli-only)
@angular-devkit/schematics 14.0.0 (cli-only)
@schematics/angular 14.0.0 (cli-only)
2 - Generate npm project
$> npm init -y
Wrote to /home/jtorres/experiments/demo-no-ivy/package.json:
{
"name": "demo-no-ivy",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC"
}
3 - Generate Angular App
$> ng new my-app
? Would you like to add Angular routing? No
? Which stylesheet format would you like to use? CSS
CREATE my-app/README.md (1059 bytes)
CREATE my-app/.editorconfig (274 bytes)
CREATE my-app/.gitignore (548 bytes)
CREATE my-app/angular.json (3009 bytes)
CREATE my-app/package.json (1037 bytes)
CREATE my-app/tsconfig.json (863 bytes)
CREATE my-app/.browserslistrc (600 bytes)
CREATE my-app/karma.conf.js (1423 bytes)
CREATE my-app/tsconfig.app.json (287 bytes)
CREATE my-app/tsconfig.spec.json (333 bytes)
CREATE my-app/.vscode/extensions.json (130 bytes)
CREATE my-app/.vscode/launch.json (474 bytes)
CREATE my-app/.vscode/tasks.json (938 bytes)
CREATE my-app/src/favicon.ico (948 bytes)
CREATE my-app/src/index.html (291 bytes)
CREATE my-app/src/main.ts (372 bytes)
CREATE my-app/src/polyfills.ts (2338 bytes)
CREATE my-app/src/styles.css (80 bytes)
CREATE my-app/src/test.ts (749 bytes)
CREATE my-app/src/assets/.gitkeep (0 bytes)
CREATE my-app/src/environments/environment.prod.ts (51 bytes)
CREATE my-app/src/environments/environment.ts (658 bytes)
CREATE my-app/src/app/app.module.ts (314 bytes)
CREATE my-app/src/app/app.component.css (0 bytes)
CREATE my-app/src/app/app.component.html (23332 bytes)
CREATE my-app/src/app/app.component.spec.ts (956 bytes)
CREATE my-app/src/app/app.component.ts (210 bytes)
✔ Packages installed successfully.
Successfully initialized git.
4 - Install @ckeditor/ckeditor5-angular
$> npm install --save @ckeditor/ckeditor5-angular
added 4 packages, removed 1 package, changed 6 packages, and audited 11 packages in 5s
found 0 vulnerabilities
$> npm install --save @ckeditor/ckeditor5-build-classic
added 31 packages, and audited 42 packages in 8s
found 0 vulnerabilities
5 - Follow Quick Start Documentation
app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { CKEditorModule } from '@ckeditor/ckeditor5-angular';
import { AppComponent } from './app.component';
@NgModule({
declarations: [AppComponent],
imports: [BrowserModule, CKEditorModule],
providers: [],
bootstrap: [AppComponent],
})
export class AppModule {}
// app.component.html
<div class="content">
<ckeditor [editor]="Editor" data="<p>Hello, world!</p>"></ckeditor>
</div>
//typings.d.ts
// You should specify the CKEditor 5 build you use here:
declare module '@ckeditor/ckeditor5-build-classic' {
const ClassicEditorBuild: any;
export = ClassicEditorBuild;
}
6 - Build Angular App
$> ng build
⠙ Generating browser application bundles (phase: setup)...Warning: Entry point '@ckeditor/ckeditor5-angular' contains deep imports into '/home/jtorres/experiments/demo-no-ivy/my-app/node_modules/@ckeditor/ckeditor5-watchdog/src/editorwatchdog'. This is probably not a problem, but may cause the compilation of entry points to be out of order.
Processing legacy "View Engine" libraries:
- @ckeditor/ckeditor5-angular [es2015/esm2015] (https://github.com/ckeditor/ckeditor5-angular.git)
Encourage the library authors to publish an Ivy distribution.
✔ Browser application bundle generation complete.
✔ Copying assets complete.
✔ Index html generation complete.
Initial Chunk Files | Names | Raw Size | Estimated Transfer Size
main.877351e21058bb3c.js | main | 844.37 kB | 184.94 kB
polyfills.e9d7fa7bfa9afaf3.js | polyfills | 32.96 kB | 10.60 kB
runtime.397c3874548e84cd.js | runtime | 1.04 kB | 589 bytes
styles.ef46db3751d8e999.css | styles | 0 bytes | -
| Initial Total | 878.37 kB | 196.12 kB
Build at: 2022-06-02T20:08:03.938Z - Hash: 2b54911e51c846c3 - Time: 21450ms
Warning: bundle initial exceeded maximum budget. Budget 500.00 kB was not met by 378.37 kB with a total of 878.37 kB.
TL;DR: The issue is fixed with the fifth version of the component. Please, upgrade the integration to ^5.0.0.
Thanks for the detailed instructions. I had two example applications already created, so I upgraded to the latest CKEditor 5 Angular integration version and executed ng build.
Angular 13
yarn ng build
yarn run v1.22.18
$ ng build
✔ Browser application bundle generation complete.
Initial Chunk Files | Names | Raw Size | Estimated Transfer Size
main.430c4226d9789fb4.js | main | 1.09 MB | 234.89 kB
polyfills.329e5023c15889de.js | polyfills | 33.14 kB | 10.64 kB
runtime.aa4b2df0c0cac2de.js | runtime | 1.13 kB | 631 bytes
styles.ef46db3751d8e999.css | styles | 0 bytes | -
| Initial Total | 1.12 MB | 246.14 kB
Build at: 2023-02-16T12:27:29.381Z - Hash: 0b5af3771ffcab47 - Time: 33682ms
Warning: bundle initial exceeded maximum budget. Budget 500.00 kB was not met by 651.28 kB with a total of 1.12 MB.
Error: bundle initial exceeded maximum budget. Budget 1.00 MB was not met by 127.28 kB with a total of 1.12 MB.
Angular 15
yarn ng build
yarn run v1.22.18
$ ng build
✔ Browser application bundle generation complete.
Initial Chunk Files | Names | Raw Size | Estimated Transfer Size
main.89d60325b2ade6ab.js | main | 1.10 MB | 236.18 kB
polyfills.e0ca7450e06c8f43.js | polyfills | 33.07 kB | 10.67 kB
runtime.8fa642cb59cb4c55.js | runtime | 987 bytes | 550 bytes
styles.ef46db3751d8e999.css | styles | 0 bytes | -
| Initial Total | 1.13 MB | 247.39 kB
Build at: 2023-02-16T12:30:40.738Z - Hash: 36cfbb21a5983b9d - Time: 39179ms
Warning: /Users/pomek/Projects/tmp/angular-project-15/src/app/app.component.ts depends on '@ckeditor/ckeditor5-build-classic'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies
Warning: bundle initial exceeded maximum budget. Budget 500.00 kB was not met by 656.36 kB with a total of 1.13 MB.
Error: bundle initial exceeded maximum budget. Budget 1.00 MB was not met by 132.36 kB with a total of 1.13 MB.
It works as expected. To confirm it, I downgraded the component to version ^4.0.0. ng build reports the mentioned warning.
yarn why @ckeditor/ckeditor5-angular
yarn why v1.22.18
[1/4] 🤔 Why do we have the module "@ckeditor/ckeditor5-angular"...?
[2/4] 🚚 Initialising dependency graph...
[3/4] 🔍 Finding dependency...
[4/4] 🚡 Calculating file sizes...
=> Found "@ckeditor/[email protected]"
✨ Done in 0.42s.
yarn run v1.22.18
$ ng build
⠙ Generating browser application bundles (phase: setup)...Warning: Entry point '@ckeditor/ckeditor5-angular' contains deep imports into '/Users/pomek/Projects/tmp/angular-project-15/node_modules/@ckeditor/ckeditor5-watchdog/src/editorwatchdog'. This is probably not a problem, but may cause the compilation of entry points to be out of order.
Processing legacy "View Engine" libraries:
- @ckeditor/ckeditor5-angular [es2015/esm2015] (https://github.com/ckeditor/ckeditor5-angular.git)
Encourage the library authors to publish an Ivy distribution.
✔ Browser application bundle generation complete.