Update ng-packagr to ^5.5.0

[mgechev]

We've been following ng2-ckeditor and its compatibility with Ivy.

The build with our compatibility compiler was failing for the past few weeks. Noticed that bumping up the ng-packagr version fixes the problem.

[kzimny]

Updated ng-packagr to ^5.5.0 doesn't change anything. The issue with IVY persists, the error message is the same as before. Here is my package.json configuration:

{
  "name": "ng2-ckeditor",
  "version": "1.2.5",
  "description": "Angular CKEditor component",
  "main": "lib/bundles/ng2-ckeditor.umd.min.js",
  "typings": "lib/ng2-ckeditor.d.ts",
  "scripts": {
    "prepublishOnly": "npm run build",
    "build": "ng-packagr -p package.json",
    "lint": "tslint -p tsconfig.json -c tslint.json",
    "prettier": "prettier --ignore-path .gitignore --write ./**/*.ts",
    "precommit": "npm run prettier && npm run lint"
  },
  "keywords": [
    "angular",
    "angular2",
    "component",
    "ckeditor",
    "wysiwyg"
  ],
  "author": "Simon Babay",
  "license": "MIT",
  "repository": {
    "type": "git",
    "url": "git+https://github.com/chymz/ng2-ckeditor.git"
  },
  "bugs": {
    "url": "https://github.com/chymz/ng2-ckeditor/issues"
  },
  "homepage": "https://github.com/chymz/ng2-ckeditor#readme",
  "devDependencies": {
    "@angular/animations": "^8.2.2",
    "@angular/common": "^8.2.2",
    "@angular/compiler": "^8.2.2",
    "@angular/compiler-cli": "^8.2.2",
    "@angular/core": "^8.2.2",
    "@angular/forms": "^8.2.2",
    "@angular/platform-browser": "^8.2.2",
    "@angular/platform-server": "^8.2.2",
    "@types/ckeditor": "4.9.8",
    "@types/core-js": "^2.5.2",
    "@types/node": "^12.7.2",
    "ng-packagr": "^5.5.0",
    "prettier": "^1.18.2",
    "rxjs": "^6.5.2",
    "tslint": "^5.18.0",
    "typescript": "3.5.3",
    "zone.js": "^0.10.2"
  },
  "peerDependencies": {
    "@angular/core": "^8.2.2",
    "@angular/forms": "^8.2.2",
    "@angular/common": "^8.2.2"
  },
  "dependencies": {},
  "ngPackage": {
    "lib": {
      "entryFile": "./src/index.ts",
      "languageLevel": [
        "dom",
        "es2017"
      ]
    },
    "dest": "lib"
  }
}

I have no idea how to fix this problem.

[mgechev]

Once I build the library with ng-packagr@^5.5.0 and replace node_modules/ng2-ckeditor with the produced assets in lib the build seems to be passing for me.

Would you double check? If the failure persists, maybe the problem is related to the distribution of the library?

[kzimny]

I tried with new version ng-packagr@^5.5.0 again, replaced the node_modules/ng2-ckeditor with the attached new files. The error is the same as before.

ng2-ckeditor-1.2.5.zip

Could you please try to compile with my files? The problem can not relate to the distribution as I work locally. Could you please attach the package.json file with the configuration of your final project (not ng2-ckeditor project)? Thank you.

[kzimny]

@mgechev: any suggestions?

[p3t3r5]

If you put your compiled files from the ng2-ckeditor/lib directly into node_modules/ng2-ckeditor, then it works. We are waiting for the fix.

[kzimny]

@p3t3r5 new version 1.2.5 of ng2-ckeditor is available, but the error above is still the same. Any idea?

[p3t3r5]

I do not know. If I install ngx-cookie or ngx-pipes, then I have only build files in module folder, without src files. The content node_modules/ng2-ckeditor should also contain only build (lib) files after install.

[kzimny]

I think you are right. I requested the new package version that should be published using npm publish lib command.

[kzimny]

Thanks for bringing me to the right direction @p3t3r5. The issue should be solved now. Try with new version 1.2.6.

[p3t3r5]

Nice. But with version 5.5.1 of ng-packagr i have "error TS8001: 'ckeditor' is not a valid HTML element".
Build with version 5.5.0 works without errors.

---

Angular CLI: 9.0.0-next.5
Node: 10.15.1
OS: win32 x64
Angular: 9.0.0-next.7
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... platform-server, router, service-worker

Package Version

@angular-devkit/architect 0.900.0-next.5
@angular-devkit/build-angular 0.900.0-next.5
@angular-devkit/build-optimizer 0.900.0-next.5
@angular-devkit/build-webpack 0.900.0-next.5
@angular-devkit/core 9.0.0-next.5
@angular-devkit/schematics 9.0.0-next.5
@angular/cdk 8.2.0
@angular/cli 9.0.0-next.5
@angular/material 8.2.0
@angular/pwa 0.900.0-next.5
@ngtools/webpack 9.0.0-next.5
@nguniversal/express-engine 8.1.1
@schematics/angular 9.0.0-next.5
@schematics/update 0.900.0-next.5
rxjs 6.5.3
typescript 3.5.3
webpack 4.40.2

[kzimny]

Just tested with the version 1.2.6 and ng-packagr 5.5.1 as currently compiled. There are no problems on my side. Tested with:

ng new my-ckeditor --enable-ivy
cd my-ckeditor
npm install ng2-ckeditor
npm serve --open
and
npm build --prod

with the following code:
app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

import { CKEditorModule } from 'ng2-ckeditor';
import { FormsModule } from '@angular/forms';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    CKEditorModule,
    FormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.component.ts

import { Component, ViewChild, OnInit } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  title = 'my-ckeditor';
  ckeConfig: any;
  mycontent: string;
  @ViewChild('myckeditor', { static: false }) ckeditor: any;

  constructor() {
    this.mycontent = `<p>My html content</p>`;
  }

  ngOnInit() {
    this.ckeConfig = {
      allowedContent: false
    };
  }
}

app.template.html:

<div style="text-align:center">
  <h1>
    Welcome to {{ title }}!
  </h1>
</div>
<ckeditor [(ngModel)]="mycontent" 
  #myckeditor="ngModel"
  name="myckeditor"
  required
  [config]="ckeConfig" 
  debounce="500">
</ckeditor>

index.html:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>MyCkeditor</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <script src="https://cdn.ckeditor.com/4.10.1/full/ckeditor.js"></script>
</head>
<body>
  <app-root></app-root>
</body>
</html>

tsconfig.json:

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

package.json:

{
  "name": "my-ckeditor",
  "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": "~8.2.0",
    "@angular/common": "~8.2.0",
    "@angular/compiler": "~8.2.0",
    "@angular/core": "~8.2.0",
    "@angular/forms": "~8.2.0",
    "@angular/platform-browser": "~8.2.0",
    "@angular/platform-browser-dynamic": "~8.2.0",
    "@angular/router": "~8.2.0",
    "ng2-ckeditor": "^1.2.6",
    "rxjs": "~6.4.0",
    "tslib": "^1.10.0",
    "zone.js": "~0.9.1"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.802.2",
    "@angular/cli": "~8.2.2",
    "@angular/compiler-cli": "~8.2.0",
    "@angular/language-service": "~8.2.0",
    "@types/node": "~8.9.4",
    "@types/jasmine": "~3.3.8",
    "@types/jasminewd2": "~2.0.3",
    "codelyzer": "^5.0.0",
    "jasmine-core": "~3.4.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.1.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~2.0.1",
    "karma-jasmine-html-reporter": "^1.4.0",
    "protractor": "~5.4.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.15.0",
    "typescript": "~3.5.3"
  }
}

Also tested without --enable-ivy :

ng new my-ckeditor
cd my-ckeditor
npm install ng2-ckeditor
npm serve --open
and
npm build --prod

tsconfig.json:

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

package.json:

{
  "name": "my-ckeditor2",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "postinstall": "ivy-ngcc"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~8.2.0",
    "@angular/common": "~8.2.0",
    "@angular/compiler": "~8.2.0",
    "@angular/core": "~8.2.0",
    "@angular/forms": "~8.2.0",
    "@angular/platform-browser": "~8.2.0",
    "@angular/platform-browser-dynamic": "~8.2.0",
    "@angular/router": "~8.2.0",
    "ng2-ckeditor": "^1.2.6",
    "ngx-pipes": "^2.5.6",
    "rxjs": "~6.4.0",
    "tslib": "^1.10.0",
    "zone.js": "~0.9.1"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.802.2",
    "@angular/cli": "~8.2.2",
    "@angular/compiler-cli": "~8.2.0",
    "@angular/language-service": "~8.2.0",
    "@types/node": "~8.9.4",
    "@types/jasmine": "~3.3.8",
    "@types/jasminewd2": "~2.0.3",
    "codelyzer": "^5.0.0",
    "jasmine-core": "~3.4.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.1.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~2.0.1",
    "karma-jasmine-html-reporter": "^1.4.0",
    "protractor": "~5.4.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.15.0",
    "typescript": "~3.5.3"
  }
}

There are no problems on my side. Everything works without errors. If you try the experimental angular version: 9.0.0-next.7 report the problem to ng-packagr. I have not tested the next angular release. No time to work for community.

[p3t3r5]

After update today it works properly with next version to:

Angular CLI: 9.0.0-next.8
Node: 10.15.1
OS: win32 x64
Angular: 9.0.0-next.9
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... platform-server, router, service-worker

Package Version

@angular-devkit/architect 0.900.0-next.8
@angular-devkit/build-angular 0.900.0-next.8
@angular-devkit/build-optimizer 0.900.0-next.8
@angular-devkit/build-webpack 0.900.0-next.8
@angular-devkit/core 9.0.0-next.8
@angular-devkit/schematics 9.0.0-next.8
@angular/cdk 9.0.0-next.0
@angular/cli 9.0.0-next.8
@angular/material 9.0.0-next.0
@angular/pwa 0.900.0-next.8
@ngtools/webpack 9.0.0-next.8
@nguniversal/express-engine 8.1.1
@schematics/angular 9.0.0-next.8
@schematics/update 0.900.0-next.8
rxjs 6.5.3
typescript 3.5.3
webpack 4.41.0