feat: replace library builder from ngm to ng-packagr

angular.json

@@ -4,19 +4,32 @@
   "newProjectRoot": "projects",
   "projects": {
     "angular-froala-wysiwyg": {
-      "root": "demo",
-      "sourceRoot": "demo/src",
+      "root": "projects/library",
+      "projectType": "library",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:ng-packagr",
+          "options": {
+            "project": "projects/library/ng-package.json",
+            "tsConfig": "projects/library/tsconfig.json"
+          }
+        }
+      }
+    },
+    "angular-froala-wysiwyg-demo": {
+      "root": "projects/demo",
+      "sourceRoot": "projects/demo/src",
       "projectType": "application",
       "architect": {
         "build": {
           "builder": "@angular-devkit/build-angular:browser",
           "options": {
-            "outputPath": "demo/dist",
-            "index": "demo/src/index.html",
-            "main": "demo/src/main.ts",
-            "tsConfig": "demo/src/tsconfig.json",
+            "outputPath": "dist-demo",
+            "index": "projects/demo/src/index.html",
+            "main": "projects/demo/src/main.ts",
+            "tsConfig": "projects/demo/tsconfig.json",
             "assets": [
-              "demo/src/image.jpg"
+              "projects/demo/src/image.jpg"
             ],
             "styles": [
               "node_modules/froala-editor/css/froala_editor.pkgd.css"
@@ -25,10 +38,15 @@
           },
           "configurations": {
             "production": {
+              "budgets": [
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "6kb"
+                }
+              ],
               "optimization": false,
               "outputHashing": "all",
               "sourceMap": false,
-              "extractCss": false,
               "namedChunks": false,
               "aot": true,
               "extractLicenses": true,
@@ -40,14 +58,14 @@
         "serve": {
           "builder": "@angular-devkit/build-angular:dev-server",
           "options": {
-            "browserTarget": "angular-froala-wysiwyg:build"
+            "browserTarget": "angular-froala-wysiwyg-demo:build"
           },
           "configurations": {}
         },
         "extract-i18n": {
           "builder": "@angular-devkit/build-angular:extract-i18n",
           "options": {
-            "browserTarget": "angular-froala-wysiwyg:build"
+            "browserTarget": "angular-froala-wysiwyg-demo:build"
           }
         },
         "lint": {
@@ -59,13 +77,13 @@
         }
       }
     },
-    "angular-froala-wysiwyg-e2e": {
+    "angular-froala-wysiwyg-demo-e2e": {
       "root": "demo/e2e",
       "sourceRoot": "demo/e2e",
       "projectType": "application"
     }
   },
-  "defaultProject": "angular-froala-wysiwyg",
+  "defaultProject": "angular-froala-wysiwyg-demo",
   "schematics": {
     "@schematics/angular:component": {
       "prefix": "",

package.json

@@ -1,40 +1,39 @@
 {
   "name": "angular-froala-wysiwyg-base",
   "version": "3.2.6-1",
-  "description": "Angular 4, 5, 6, 7, 8, 9 and 10 bindings for Froala WYSIWYG HTML rich text editor",
+  "description": "Angular 4, 5, 6, 7, 8, 9, 10, 11 and 12 bindings for Froala WYSIWYG HTML rich text editor",
   "main": "bundles/angular-froala-wysiwyg.umd.js",
   "typings": "index.d.ts",
   "module": "index.js",
   "scripts": {
-    "lite-server": "lite-server -c demo/bs-config.json",
-    "demo.serve": "npm run -s build link demo.build lite-server",
-    "demo.build": "ng build --aot=false",
-    "build": "ngm build --prod src --clean",
-    "link": "ngm link -p src --here",
-    "build.watch": "ngm build -p src --watch --skip-bundles",
-    "start": "ng serve --aot=false --host 0.0.0.0"
+    "demo.serve": "ng serve angular-froala-wysiwyg-demo",
+    "demo.build": "ng build angular-froala-wysiwyg-demo",
+    "build": "ng build angular-froala-wysiwyg",
+    "start": "npm run demo.serve"
   },
   "repository": {
     "type": "git",
     "url": "https://github.com/froala/angular-froala-wysiwyg.git"
   },
   "keywords": [
-    "angular2",
     "angular4",
     "angular5",
     "angular6",
     "angular7",
     "angular8",
     "angular9",
     "angular10",
-    "ng2",
+    "angular11",
+    "angular12",
     "ng4",
     "ng5",
     "ng6",
     "ng7",
     "ng8",
     "ng9",
     "ng10",
+    "ng11",
+    "ng12",
     "froala",
     "html",
     "text",
@@ -53,33 +52,32 @@
   "dependencies": {
     "font-awesome": "^4.7.0",
     "froala-editor": "^3.2.6-1",
-    "tslib": "^1.9.0"
+    "tslib": "^2.0.0"
   },
   "peerDependencies": {},
   "devDependencies": {
-    "lite-server": "^2.5.4",
-    "@angular-devkit/build-angular": "^0.1000.7",
-    "@angular/cli": "^10.0.7",
-    "@angular/common": "^10.0.11",
-    "@angular/compiler": "^10.0.11",
-    "@angular/compiler-cli": "^10.0.11",
-    "@angular/core": "^10.0.11",
-    "@angular/forms": "^10.0.11",
-    "@angular/language-service": "^10.0.11",
-    "@angular/platform-browser": "^10.0.11",
-    "@angular/platform-browser-dynamic": "^10.0.11",
-    "@angular/router": "^10.0.11",
+    "@angular-devkit/build-angular": "^0.1102.12",
+    "@angular/cli": "^11.2.12",
+    "@angular/common": "^11.2.13",
+    "@angular/compiler": "^11.2.13",
+    "@angular/compiler-cli": "^11.2.13",
+    "@angular/core": "^11.2.13",
+    "@angular/forms": "^11.2.13",
+    "@angular/language-service": "^11.2.13",
+    "@angular/platform-browser": "^11.2.13",
+    "@angular/platform-browser-dynamic": "^11.2.13",
+    "@angular/router": "^11.2.13",
     "core-js": "^2.6.11",
     "@types/marked": "0.0.28",
     "@types/node": "7.0.0",
     "@types/tapable": "^1.0.4",
     "@types/webpack": "^4.39.5",
-    "classlist-polyfill": "1.0.3",
-    "ngm-cli": "^1.0.4",
-    "rxjs": "^6.3.3",
-    "rxjs-compat": "^6.3.2",
+    "classlist.js": "^1.1.20150312",
+    "ng-packagr": "^11.2.4",
+    "rxjs": "^6.5.3",
     "ts-helpers": "^1.1.1",
-    "typescript": "^3.9.7",
-    "zone.js": "~0.10.2"
+    "typescript": "4.0.5",
+    "zone.js": "~0.10.3",
+    "tsickle": "^0.39.1"
   }
 }

projects/demo/src/app.module.ts

@@ -0,0 +1,19 @@
+import 'froala-editor/js/plugins.pkgd.min.js';
+
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+
+import { AppComponent } from './app/app.component';
+import { BrowserModule } from '@angular/platform-browser';
+import { CommonModule } from '@angular/common';
+import { FroalaComponent } from "./app/froala.component";
+import { FroalaEditorModule } from 'angular-fraola-wysiwyg';
+import { FroalaViewModule } from 'angular-fraola-wysiwyg';
+import { NgModule } from '@angular/core';
+
+@NgModule({
+  declarations: [AppComponent, FroalaComponent],
+  imports: [BrowserModule, CommonModule, FormsModule, ReactiveFormsModule, FroalaEditorModule, FroalaViewModule],
+  bootstrap: [AppComponent]
+})
+export class AppModule {
+}

demo/src/app/app.component.ts → projects/demo/src/app/app.component.ts

@@ -66,7 +66,7 @@ import FroalaEditor from 'froala-editor';
       <form [formGroup]="form" (ngSubmit)="onSubmit()">
         <div *ngIf="formModel.invalid"> Name is too short. </div>
         <h3>Textarea with formControlName and froalaModel</h3>
-        <textarea  id="sample9-1" [froalaEditor] formControlName="formModel" [(froalaModel)]="form.formModel"></textarea>
+        <textarea id="sample9-1" [froalaEditor] formControlName="formModel" [(froalaModel)]="formControls.formModel"></textarea>
         <h4>Rendered Content:</h4>
         <div [froalaView]="form.value.formModel"></div>
         <h3>Textarea only with formControlName</h3>
@@ -174,17 +174,20 @@ export class AppComponent implements OnInit {
   };
 
   // Sample 8 model
-  public initializeLink = function(linkInitControls) {
+  linkInitControls;
+  initializeLink(linkInitControls) {
    this.linkInitControls = linkInitControls;
-  };
+  }
+
   public linkModel: Object = {
     href: 'https://www.froala.com/wysiwyg-editor'
   };
 
   // Sample 9
-  form = new FormGroup({
+  formControls = {
     formModel: new FormControl('Hello World', Validators.minLength(2)),
-  });
+  };
+  form = new FormGroup(this.formControls);
   get formModel(): any { return this.form.get('formModel'); }
   onSubmit(): void {
     console.log(this.form.value);

demo/src/app/froala.component.ts → projects/demo/src/app/froala.component.ts

@@ -1,4 +1,4 @@
-import { Component, Input, Output, forwardRef } from '@angular/core';
+import { Component, forwardRef } from '@angular/core';
 import {ControlValueAccessor, NG_VALUE_ACCESSOR} from "@angular/forms";
 
 @Component({

demo/src/index.html → projects/demo/src/index.html

@@ -1,11 +1,11 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-  <title>Angular2 Froala WYSIWYG</title>
+  <title>Angular Froala WYSIWYG</title>
 
   <meta charset="utf-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
-  <meta name="description" content="Angular2 Froala WYSIWYG">
+  <meta name="description" content="Angular Froala WYSIWYG">
   <meta name="viewport" content="width=device-width, initial-scale=1">
 </head>
 <body>

projects/demo/src/main.ts

@@ -0,0 +1,5 @@
+import './polyfills';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { AppModule } from './app.module';
+
+platformBrowserDynamic().bootstrapModule(AppModule);

demo/src/polyfills.ts → projects/demo/src/polyfills.ts

@@ -1,6 +1,5 @@
 // This file includes polyfills needed by Angular 2 and is loaded before
 // the app. You can add your own extra polyfills to this file.
-import 'ts-helpers';
 import 'core-js/es6/symbol';
 import 'core-js/es6/object';
 import 'core-js/es6/function';
@@ -17,4 +16,5 @@ import 'core-js/es6/set';
 import 'core-js/es6/reflect';
 import 'core-js/es7/reflect';
 import 'zone.js/dist/zone';
-import 'classlist-polyfill';
+
+import 'classlist.js';

projects/demo/tsconfig.json

@@ -0,0 +1,32 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "declaration": false,
+    "emitDecoratorMetadata": true,
+    "experimentalDecorators": true,
+    "noEmitHelpers" :true,
+    "lib": ["es6", "dom"],
+    "types": [
+      "webpack"
+    ],
+    "module": "esnext",
+    "moduleResolution": "node",
+    "target": "es2015",
+    "baseUrl": ".",
+    "sourceMap": true,
+    "typeRoots": [
+      "../../node_modules/@types"
+    ],
+    "paths": {
+      "angular-fraola-wysiwyg": [
+        "../library/src/index.ts"
+      ]
+    }
+  },
+  "files": [
+    "src/main.ts"
+  ],
+  "include": [
+    "**/*.d.ts"
+  ]
+}

projects/library/ng-package.json

@@ -0,0 +1,11 @@
+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist",
+  "deleteDestPath": true,
+  "whitelistedNonPeerDependencies": [
+    "froala-editor"
+  ],
+  "lib": {
+    "entryFile": "src/index.ts"
+  }
+}

src/package.json → projects/library/package.json

@@ -4,4 +4,4 @@
   "dependencies": {
     "froala-editor": "3.2.6-1"
   }
-}
+}