Upgrade to Narik6, Angular12 (#22)

* upgrade dependencies

* update tsconfig

* fix bug

* fix bug

* remove using pack

* add @directive()

* update tsconfig

* update dpendencies

* add custom-validators

* update peerDependencies

* update peerDependencies

* ad @directive() to base classes

* update version to 6.0.0

* update dependenciy version in cli

* add registerComponentType

* change cli templates

* use AngularCompilerPlugin.ivy.AngularWebpackPlugin

* use $id instead of id

* update version to 6.0.1

* fix cli bug

* use old toast syyle

Author: abadakhshan

README.md

@@ -3,7 +3,7 @@
 Narik is a framework that helps you create your angular application more creatively in less time. You will find Narik interesting in many different aspects, once you use it.  
 
 
-**Narik 5 is ready. Compatible with Angular 11.**
+**Narik 6 is ready. Compatible with Angular 12.**
 
 
 [Online Demo](http://narik.me/demo/app)

angular.json

@@ -602,6 +602,37 @@
           }
         }
       }
+    },
+    "narik-custom-validators": {
+      "projectType": "library",
+      "root": "projects/narik-custom-validators",
+      "sourceRoot": "projects/narik-custom-validators/src",
+      "prefix": "lib",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:ng-packagr",
+          "options": {
+            "project": "projects/narik-custom-validators/ng-package.json"
+          },
+          "configurations": {
+            "production": {
+              "tsConfig": "projects/narik-custom-validators/tsconfig.lib.prod.json"
+            },
+            "development": {
+              "tsConfig": "projects/narik-custom-validators/tsconfig.lib.json"
+            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "test": {
+          "builder": "@angular-devkit/build-angular:karma",
+          "options": {
+            "main": "projects/narik-custom-validators/src/test.ts",
+            "tsConfig": "projects/narik-custom-validators/tsconfig.spec.json",
+            "karmaConfig": "projects/narik-custom-validators/karma.conf.js"
+          }
+        }
+      }
     }
   }
 }

build-tools/version.js

@@ -1,5 +1,5 @@
 const fs = require('fs');
-const version = '5.3.0';
+const version = '6.0.1';
 const { lstatSync, readdirSync } = require('fs');
 const { join } = require('path');
 

package.json

@@ -8,6 +8,7 @@
         "e2e": "ng e2e",
         "doc": "compodoc -p projects/tsconfig.compodoc.json -s -o -w --theme  material  --disableRoutesGraph",
         "build:infrastructure": "ng build narik-infrastructure && node build-tools/copy.js readme.md dist/infrastructure",
+        "build:custom-validators": "ng build narik-custom-validators && node build-tools/copy.js readme.md dist/custom-validators",
         "build:common": "ng build narik-common && node build-tools/copy.js readme.md dist/common",
         "build:core": "ng build narik-core && node build-tools/copy.js readme.md dist/core",
         "build:ui-core": "ng build narik-ui-core && node build-tools/copy.js readme.md dist/ui-core",
@@ -25,76 +26,75 @@
         "build:client-storage": "ng build narik-client-storage && node build-tools/copy.js readme.md dist/client-storage",
         "build:firebase": "ng build narik-firebase && node build-tools/copy.js readme.md dist/firebase",
         "debug:cli": "node --inspect-brk ./node_modules/@angular/cli/bin/ng serve",
-        "build": "npm run build:infrastructure && npm run build:common && npm run build:core  && npm run build:ui-core &&    npm run build:app-core && npm run build:ui-material && npm run build:ui-ng-bootstrap && npm run build:ui-ngx-bootstrap && npm run build:ui-devextreme  && npm run build:ui-nebular && npm run build:ui-primeng && npm run build:ui-swimlane && npm run build:jwt && npm run build:client-storage && npm run build:signalr && npm run build:firebase &&  npm run build:cli",
+        "build": "npm run build:infrastructure && npm run build:custom-validators && npm run build:common && npm run build:core  && npm run build:ui-core &&    npm run build:app-core && npm run build:ui-material && npm run build:ui-ng-bootstrap && npm run build:ui-ngx-bootstrap && npm run build:ui-devextreme  && npm run build:ui-nebular && npm run build:ui-primeng && npm run build:ui-swimlane && npm run build:jwt && npm run build:client-storage && npm run build:signalr && npm run build:firebase &&  npm run build:cli",
         "version": "node build-tools/version.js",
         "publish": "node build-tools/publish.js"
     },
     "private": false,
     "dependencies": {
-        "@angular/animations": "~11.2.8",
-        "@angular/cdk": "~11.2.7",
-        "@angular/common": "~11.2.8",
-        "@angular/compiler": "~11.2.8",
-        "@angular/core": "~11.2.8",
-        "@angular/flex-layout": "^11.0.0-beta.33",
-        "@angular/forms": "~11.2.8",
-        "@angular/material": "~11.2.7",
-        "@angular/platform-browser": "~11.2.8",
-        "@angular/platform-browser-dynamic": "~11.2.8",
-        "@angular/router": "~11.2.8",
+        "@angular/animations": "~12.0.4",
+        "@angular/cdk": "~12.0.4",
+        "@angular/common": "~12.0.4",
+        "@angular/compiler": "~12.0.4",
+        "@angular/core": "~12.0.4",
+        "@angular/flex-layout": "^12.0.0-beta.34",
+        "@angular/forms": "~12.0.4",
+        "@angular/material": "~12.0.4",
+        "@angular/platform-browser": "~12.0.4",
+        "@angular/platform-browser-dynamic": "~12.0.4",
+        "@angular/router": "~12.0.4",
         "@aspnet/signalr": "^1.1.4",
-        "@angular/fire": "^6.1.4",
-        "firebase": "^8.3",
+        "@angular/fire": "^6.1.5",
+        "firebase": "^8.6",
         "@fortawesome/fontawesome-free": "^5.15.3",
         "@nebular/theme": "^7.0.0",
-        "@ng-bootstrap/ng-bootstrap": "^9.1.0",
+        "@ng-bootstrap/ng-bootstrap": "^9.1.2",
         "@ngx-translate/core": "^13.0.0",
         "@swimlane/ngx-datatable": "^19.0.0",
         "angular2-text-mask": "^9.0.0",
         "angular2-uuid": "^1.1.1",
-        "bootstrap": "^4.6.0",
+        "bootstrap": "^5.0.1",
         "class-validator": "^0.13.1",
-        "core-js": "^3.10.0",
+        "core-js": "^3.14.0",
         "data-adapter": "^0.2.3",
-        "devextreme": "^20.2.6",
-        "devextreme-angular": "^20.2.6",
+        "devextreme": "^21.1.3",
+        "devextreme-angular": "^21.1.3",
         "localforage": "^1.9.0",
-        "lodash": "^4.17.21",
+        "lodash-es": "^4.17.21",
         "ngforage": "^6.0.0",
         "ngx-bootstrap": "^6.2.0",
-        "ngx-custom-validators": "^11.0.1",
-        "ngx-toastr": "^13.2.1",
+        "ngx-toastr": "^14.0.0",
         "primeicons": "^4.1.0",
-        "primeng": "^11.3.1",
-        "rxjs": "~6.6.7",
+        "primeng": "^12.0.0-rc.1",
+        "rxjs": "~7.1.0",
+        "tslib": "^2.1.0",
         "zone.js": "~0.11.4"
     },
     "devDependencies": {
-        "@angular-devkit/build-angular": "~0.1102.7",
+        "@angular-devkit/build-angular": "~12.0.3",
         "@angular-devkit/build-ng-packagr": "~0.1002.0",
-        "@angular-devkit/schematics": "~11.2.7",
-        "@angular/cli": "~11.2.7",
-        "@angular/compiler-cli": "~11.2.8",
-        "@angular/language-service": "~11.2.8",
-        "@types/jasmine": "~3.6.9",
-        "@types/jasminewd2": "~2.0.8",
-        "@types/lodash": "~4.14.168",
-        "@types/node": "~14.14.37",
-        "codelyzer": "~6.0.1",
+        "@angular-devkit/schematics": "~12.0.3",
+        "@angular/cli": "~12.0.3",
+        "@angular/compiler-cli": "~12.0.4",
+        "@angular/language-service": "~12.0.4",
+        "@types/jasmine": "~3.7.7",
+        "@types/jasminewd2": "~2.0.9",
+        "@types/lodash-es": "~4.17.4",
+        "@types/node": "~15.12.2",
+        "codelyzer": "~6.0.2",
         "copy": "~0.3.2",
         "jasmine-core": "~3.7.1",
-        "jasmine-spec-reporter": "~6.0.0",
-        "karma": "~6.3.2",
+        "jasmine-spec-reporter": "~7.0.0",
+        "karma": "~6.3.3",
         "karma-chrome-launcher": "~3.1.0",
         "karma-coverage-istanbul-reporter": "~3.0.3",
         "karma-jasmine": "~4.0.1",
-        "karma-jasmine-html-reporter": "^1.5.4",
-        "ng-packagr": "^11.2.4",
+        "karma-jasmine-html-reporter": "^1.6.0",
+        "ng-packagr": "^12.0.5",
         "protractor": "~7.0.0",
-        "ts-node": "~9.1.1",
-        "tsickle": ">=0.39.1",
-        "tslib": "~2.1.0",
+        "ts-node": "~10.0.0",
+        "tsickle": ">=0.40.0",
         "tslint": "~6.1.3",
-        "typescript": "~4.1.5"
+        "typescript": "~4.2.3"
     }
 }

projects/narik-app-core/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@narik/app-core",
-  "version": "5.3.0",
+  "version": "6.0.1",
   "peerDependencies": {
-    "@angular/common": "~11.0.2",
-    "@angular/core": "~11.0.2",
-    "lodash": "^4.17.20",
+    "@angular/common": "^12.0.3",
+    "@angular/core": "^12.0.3",
+    "lodash-es": "^4.17.21",
     "data-adapter": "^0.2.3",
-    "class-validator": "^0.12.2"
+    "class-validator": "^0.13.1"
   },
   "dependencies": {},
   "repository": {

projects/narik-app-core/src/lib/base/narik-edit-form.ts

@@ -1,4 +1,4 @@
-import { ElementRef, Injector, OnInit, ViewChild } from '@angular/core';
+import { Directive, ElementRef, Injector, OnInit, ViewChild } from '@angular/core';
 import {
     FormGroup,
     FormBuilder,
@@ -44,6 +44,7 @@ import { NarikGeneralForm } from './narik-general-form';
 /**
  * Narik edit form
  */
+@Directive()
 export abstract class NarikEditForm<TE extends NarikEntity>
     extends NarikGeneralForm<TE>
     implements OnInit {

projects/narik-app-core/src/lib/base/narik-general-form.ts

@@ -22,6 +22,7 @@ import {
     SimpleChanges,
     ViewChild,
     Type,
+    Directive,
 } from '@angular/core';
 
 import { PARAMETER_RESOLVER } from '../injectionTokens';
@@ -33,10 +34,11 @@ import { QUERY_SERVICE_TYPE } from '../internal-injectionTokens';
 /**
  * Narik general form
  */
+@Directive()
 export class NarikGeneralForm<TE extends NarikEntity>
     extends NarikComponent
     implements CommandHost, OnChanges {
-    private changeSubject = new ReplaySubject(1);
+    private changeSubject = new ReplaySubject<void>(1);
 
     change$: Observable<any>;
 

projects/narik-app-core/src/lib/base/narik-list-form.ts

@@ -19,7 +19,7 @@ import {
 import { DynamicFormService } from '@narik/ui-core';
 import { takeWhile, filter, finalize } from 'rxjs/operators';
 
-import { Injector, OnInit } from '@angular/core';
+import { Directive, Injector, OnInit } from '@angular/core';
 import { ActivatedRoute, Route } from '@angular/router';
 
 import {
@@ -38,6 +38,7 @@ import { NarikGeneralForm } from './narik-general-form';
 /**
  * Narik list form
  */
+ @Directive()
 export abstract class NarikListForm<TE extends NarikEntity>
     extends NarikGeneralForm<TE>
     implements OnInit {

projects/narik-app-core/src/lib/services/narik-meta-data.service.ts

@@ -7,7 +7,7 @@ import {
     DataInfo,
     DefaultMetaDataKeys,
 } from '@narik/infrastructure';
-import { cloneDeep } from 'lodash';
+import { cloneDeep } from 'lodash-es';
 
 import { isArray, isObject } from '@narik/common';
 

projects/narik-app-core/tsconfig.lib.json

@@ -1,33 +1,29 @@
 {
-  "extends": "../../tsconfig.json",
-  "compilerOptions": {
-    "outDir": "../../out-tsc/lib",
-    "target": "es2015",
-    "module": "es2015",
-    "moduleResolution": "node",
-    "declaration": true,
-    "sourceMap": true,
-    "inlineSources": true,
-    "emitDecoratorMetadata": true,
-    "experimentalDecorators": true,
-    "importHelpers": true,
-    "types": [],
-    "lib": [
-      "dom",
-      "es2018"
-    ]
-  },
-  "angularCompilerOptions": {
-    "annotateForClosureCompiler": true,
-    "skipTemplateCodegen": true,
-    "strictMetadataEmit": true,
-    "fullTemplateTypeCheck": true,
-    "strictInjectionParameters": true,
-    "enableResourceInlining": true,
-    "enableIvy":false
-  },
-  "exclude": [
-    "src/test.ts",
-    "**/*.spec.ts"
-  ]
+    "extends": "../../tsconfig.json",
+    "compilerOptions": {
+        "outDir": "../../out-tsc/lib",
+        "target": "es2015",
+        "module": "es2015",
+        "moduleResolution": "node",
+        "declaration": true,
+        "sourceMap": true,
+        "inlineSources": true,
+        "emitDecoratorMetadata": true,
+        "experimentalDecorators": true,
+        "importHelpers": true,
+        "declarationMap": false,
+        "types": [],
+        "lib": ["dom", "es2018"]
+    },
+    "angularCompilerOptions": {
+        "annotateForClosureCompiler": true,
+        "skipTemplateCodegen": true,
+        "strictMetadataEmit": true,
+        "fullTemplateTypeCheck": true,
+        "strictInjectionParameters": true,
+        "enableResourceInlining": true,
+        "enableIvy": true,
+        "compilationMode": "partial"
+    },
+    "exclude": ["src/test.ts", "**/*.spec.ts"]
 }