feat(lib): upgrade to Angular 9

BREAKING CHANGES: requires angular 9

This fixes #101, fixes #102, fixes #134

README.md

@@ -29,7 +29,8 @@ Install the [npm package](https://www.npmjs.com/package/ngx-sub-form): `ngx-sub-
 _Note about the versions:_
 
 Angular <= 7: `2.7.1`  
-Angular >= 8: Latest
+Angular 8.x : `4.x`  
+Angular >= 9: Latest
 
 ## Demo
 

angular.json

@@ -17,6 +17,7 @@
         "build": {
           "builder": "@angular-devkit/build-angular:browser",
           "options": {
+            "aot": true,
             "outputPath": "dist/ngx-sub-form-demo",
             "index": "src/index.html",
             "main": "src/main.ts",
@@ -48,6 +49,10 @@
                   "type": "initial",
                   "maximumWarning": "2mb",
                   "maximumError": "5mb"
+                },
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "6kb"
                 }
               ]
             }
@@ -102,6 +107,11 @@
           "options": {
             "tsConfig": "projects/ngx-sub-form/tsconfig.lib.json",
             "project": "projects/ngx-sub-form/ng-package.json"
+          },
+          "configurations": {
+            "production": {
+              "tsConfig": "projects/ngx-sub-form/tsconfig.lib.prod.json"
+            }
           }
         },
         "test": {

package.json

@@ -34,56 +34,55 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "8.2.14",
-    "@angular/cdk": "8.2.3",
-    "@angular/common": "8.2.14",
-    "@angular/compiler": "8.2.14",
-    "@angular/core": "8.2.14",
-    "@angular/forms": "8.2.14",
-    "@angular/http": "7.2.15",
-    "@angular/material": "8.2.3",
-    "@angular/platform-browser": "8.2.14",
-    "@angular/platform-browser-dynamic": "8.2.14",
-    "@angular/router": "8.2.14",
-    "@types/uuid": "3.4.4",
-    "commitizen": "3.1.1",
-    "core-js": "3.1.3",
-    "fast-deep-equal": "3.0.1",
-    "rxjs": "6.5.2",
-    "uuid": "3.3.2",
-    "zone.js": "0.9.1"
+    "@angular/animations": "9.0.0",
+    "@angular/cdk": "9.0.0",
+    "@angular/common": "9.0.0",
+    "@angular/compiler": "9.0.0",
+    "@angular/core": "9.0.0",
+    "@angular/forms": "9.0.0",
+    "@angular/http": "7.2.16",
+    "@angular/material": "9.0.0",
+    "@angular/platform-browser": "9.0.0",
+    "@angular/platform-browser-dynamic": "9.0.0",
+    "@angular/router": "9.0.0",
+    "@types/uuid": "3.4.7",
+    "commitizen": "4.0.3",
+    "core-js": "3.6.4",
+    "fast-deep-equal": "3.1.1",
+    "rxjs": "6.5.4",
+    "tslib": "1.10.0",
+    "uuid": "3.4.0",
+    "zone.js": "0.10.2"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "0.803.20",
-    "@angular-devkit/build-ng-packagr": "0.803.20",
-    "@angular/cli": "8.3.20",
-    "@angular/compiler-cli": "8.2.14",
-    "@angular/language-service": "8.2.14",
+    "@angular-devkit/build-angular": "0.900.1",
+    "@angular-devkit/build-ng-packagr": "0.900.1",
+    "@angular/cli": "9.0.1",
+    "@angular/compiler-cli": "9.0.0",
+    "@angular/language-service": "9.0.0",
     "@bahmutov/add-typescript-to-cypress": "2.1.2",
-    "@types/jasmine": "3.3.13",
-    "@types/jasminewd2": "2.0.6",
-    "@types/node": "12.0.7",
-    "codelyzer": "5.1.0",
-    "cypress": "3.2.0",
-    "cz-conventional-changelog": "2.1.0",
-    "embedme": "1.6.0",
+    "@types/jasmine": "3.5.3",
+    "@types/jasminewd2": "2.0.8",
+    "@types/node": "13.7.0",
+    "codelyzer": "5.2.1",
+    "cypress": "4.0.1",
+    "cz-conventional-changelog": "3.1.0",
+    "embedme": "1.19.0",
     "http-server-spa": "1.3.0",
-    "jasmine-core": "3.4.0",
+    "jasmine-core": "3.5.0",
     "jasmine-spec-reporter": "4.2.1",
-    "karma": "4.1.0",
-    "karma-chrome-launcher": "2.2.0",
-    "karma-coverage-istanbul-reporter": "2.0.5",
-    "karma-jasmine": "2.0.1",
-    "karma-jasmine-html-reporter": "1.4.2",
-    "ng-packagr": "5.7.1",
+    "karma": "4.4.1",
+    "karma-chrome-launcher": "3.1.0",
+    "karma-coverage-istanbul-reporter": "2.1.1",
+    "karma-jasmine": "3.1.0",
+    "karma-jasmine-html-reporter": "1.5.2",
+    "ng-packagr": "9.0.0",
     "prettier": "1.19.1",
-    "semantic-release": "15.13.12",
-    "ts-node": "8.2.0",
+    "semantic-release": "17.0.2",
+    "ts-node": "8.6.2",
     "tsconfig-paths-webpack-plugin": "3.2.0",
-    "tsickle": "0.35.0",
-    "tslib": "1.10.0",
-    "tslint": "5.17.0",
-    "typescript": "3.4.5"
+    "tslint": "6.0.0",
+    "typescript": "3.7.5"
   },
   "repository": {
     "type": "git",

projects/ngx-sub-form/package.json

@@ -6,8 +6,8 @@
     "fast-deep-equal": "^3.0.1"
   },
   "peerDependencies": {
-    "@angular/common": "^8.0.0",
-    "@angular/core": "^8.0.0"
+    "@angular/common": "^9.0.0",
+    "@angular/core": "^9.0.0"
   },
   "keywords": [
     "Angular",

projects/ngx-sub-form/src/lib/ngx-automatic-root-form.component.ts

@@ -1,6 +1,7 @@
-import { OnInit } from '@angular/core';
+import { OnInit, Directive } from '@angular/core';
 import { NgxRootFormComponent } from './ngx-root-form.component';
 
+@Directive()
 export abstract class NgxAutomaticRootFormComponent<ControlInterface, FormInterface = ControlInterface>
   extends NgxRootFormComponent<ControlInterface, FormInterface>
   implements OnInit {

projects/ngx-sub-form/src/lib/ngx-root-form.component.ts

@@ -1,10 +1,11 @@
-import { EventEmitter, OnInit, Input } from '@angular/core';
+import { EventEmitter, OnInit, Input, Component, Directive } from '@angular/core';
 import isEqual from 'fast-deep-equal';
 import { BehaviorSubject, Subject } from 'rxjs';
 import { filter, tap } from 'rxjs/operators';
 import { NgxSubFormRemapComponent } from './ngx-sub-form.component';
 import { takeUntilDestroyed, isNullOrUndefined } from './ngx-sub-form-utils';
 
+@Directive()
 export abstract class NgxRootFormComponent<ControlInterface, FormInterface = ControlInterface>
   extends NgxSubFormRemapComponent<ControlInterface, FormInterface>
   implements OnInit {

projects/ngx-sub-form/src/lib/ngx-sub-form.component.ts

@@ -1,4 +1,4 @@
-import { OnDestroy } from '@angular/core';
+import { OnDestroy, Directive, Component } from '@angular/core';
 import {
   AbstractControl,
   AbstractControlOptions,
@@ -31,6 +31,7 @@ type FilterControlFunction<FormInterface> = (
   isCtrlWithinFormArray: boolean,
 ) => boolean;
 
+@Directive()
 export abstract class NgxSubFormComponent<ControlInterface, FormInterface = ControlInterface>
   implements ControlValueAccessor, Validator, OnDestroy, OnFormUpdate<FormInterface> {
   public get formGroupControls(): ControlsType<FormInterface> {
@@ -420,6 +421,7 @@ export abstract class NgxSubFormComponent<ControlInterface, FormInterface = Cont
   }
 }
 
+@Directive()
 export abstract class NgxSubFormRemapComponent<ControlInterface, FormInterface> extends NgxSubFormComponent<
   ControlInterface,
   FormInterface

projects/ngx-sub-form/tsconfig.lib.json

@@ -15,7 +15,6 @@
     "lib": ["dom", "es2018"]
   },
   "angularCompilerOptions": {
-    "annotateForClosureCompiler": true,
     "skipTemplateCodegen": true,
     "strictMetadataEmit": true,
     "fullTemplateTypeCheck": true,

projects/ngx-sub-form/tsconfig.lib.prod.json

@@ -0,0 +1,6 @@
+{
+  "extends": "./tsconfig.lib.json",
+  "angularCompilerOptions": {
+    "enableIvy": false
+  }
+}

src/app/app.module.ts

@@ -2,18 +2,16 @@ import { LayoutModule } from '@angular/cdk/layout';
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { ReactiveFormsModule } from '@angular/forms';
-import {
-  MatButtonModule,
-  MatCardModule,
-  MatFormFieldModule,
-  MatIconModule,
-  MatInputModule,
-  MatListModule,
-  MatSelectModule,
-  MatSidenavModule,
-  MatSlideToggleModule,
-  MatToolbarModule,
-} from '@angular/material';
+import { MatButtonModule } from '@angular/material/button';
+import { MatCardModule } from '@angular/material/card';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatIconModule } from '@angular/material/icon';
+import { MatInputModule } from '@angular/material/input';
+import { MatListModule } from '@angular/material/list';
+import { MatSelectModule } from '@angular/material/select';
+import { MatSidenavModule } from '@angular/material/sidenav';
+import { MatSlideToggleModule } from '@angular/material/slide-toggle';
+import { MatToolbarModule } from '@angular/material/toolbar';
 import { BrowserModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { RouterModule } from '@angular/router';

src/tsconfig.app.json

@@ -4,5 +4,5 @@
     "outDir": "../out-tsc/app",
     "types": []
   },
-  "exclude": ["test.ts", "**/*.spec.ts", "**/*.e2e.ts"]
+  "files": ["main.ts", "polyfills.ts"]
 }

tsconfig.json

@@ -5,7 +5,7 @@
     "outDir": "./dist/out-tsc",
     "sourceMap": true,
     "declaration": false,
-    "module": "es2015",
+    "module": "esnext",
     "moduleResolution": "node",
     "emitDecoratorMetadata": true,
     "experimentalDecorators": true,