Upgrade to Angular 6

.angular-cli.json

@@ -1,60 +0,0 @@
-{
-  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
-  "project": {
-    "name": "ng-dynaform"
-  },
-  "apps": [
-    {
-      "root": "src",
-      "outDir": "dist",
-      "assets": [
-        "assets",
-        "favicon.ico"
-      ],
-      "index": "index.html",
-      "main": "main.ts",
-      "polyfills": "polyfills.ts",
-      "test": "test.ts",
-      "tsconfig": "tsconfig.app.json",
-      "testTsconfig": "tsconfig.spec.json",
-      "prefix": "app",
-      "styles": [
-        "styles.scss"
-      ],
-      "scripts": [],
-      "environmentSource": "environments/environment.ts",
-      "environments": {
-        "dev": "environments/environment.ts",
-        "prod": "environments/environment.prod.ts"
-      }
-    }
-  ],
-  "e2e": {
-    "protractor": {
-      "config": "./protractor.conf.js"
-    }
-  },
-  "lint": [
-    {
-      "project": "src/tsconfig.app.json",
-      "exclude": "**/node_modules/**"
-    },
-    {
-      "project": "src/tsconfig.spec.json",
-      "exclude": "**/node_modules/**"
-    },
-    {
-      "project": "e2e/tsconfig.e2e.json",
-      "exclude": "**/node_modules/**"
-    }
-  ],
-  "test": {
-    "karma": {
-      "config": "./karma.conf.js"
-    }
-  },
-  "defaults": {
-    "styleExt": "scss",
-    "component": {}
-  }
-}

angular.json

@@ -0,0 +1,132 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "newProjectRoot": "projects",
+  "projects": {
+    "ng-dynaform": {
+      "root": "",
+      "sourceRoot": "src",
+      "projectType": "application",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:browser",
+          "options": {
+            "outputPath": "dist",
+            "index": "src/index.html",
+            "main": "src/main.ts",
+            "tsConfig": "src/tsconfig.app.json",
+            "polyfills": "src/polyfills.ts",
+            "assets": [
+              "src/assets",
+              "src/favicon.ico"
+            ],
+            "styles": [
+              "src/styles.scss"
+            ],
+            "scripts": []
+          },
+          "configurations": {
+            "production": {
+              "optimization": true,
+              "outputHashing": "all",
+              "sourceMap": false,
+              "extractCss": true,
+              "namedChunks": false,
+              "aot": true,
+              "extractLicenses": true,
+              "vendorChunk": false,
+              "buildOptimizer": true,
+              "fileReplacements": [
+                {
+                  "replace": "src/environments/environment.ts",
+                  "with": "src/environments/environment.prod.ts"
+                }
+              ]
+            }
+          }
+        },
+        "serve": {
+          "builder": "@angular-devkit/build-angular:dev-server",
+          "options": {
+            "browserTarget": "ng-dynaform:build"
+          },
+          "configurations": {
+            "production": {
+              "browserTarget": "ng-dynaform:build:production"
+            }
+          }
+        },
+        "extract-i18n": {
+          "builder": "@angular-devkit/build-angular:extract-i18n",
+          "options": {
+            "browserTarget": "ng-dynaform:build"
+          }
+        },
+        "test": {
+          "builder": "@angular-devkit/build-angular:karma",
+          "options": {
+            "main": "src/test.ts",
+            "karmaConfig": "./karma.conf.js",
+            "polyfills": "src/polyfills.ts",
+            "tsConfig": "src/tsconfig.spec.json",
+            "scripts": [],
+            "styles": [
+              "src/styles.scss"
+            ],
+            "assets": [
+              "src/assets",
+              "src/favicon.ico"
+            ]
+          }
+        },
+        "lint": {
+          "builder": "@angular-devkit/build-angular:tslint",
+          "options": {
+            "tsConfig": [
+              "src/tsconfig.app.json",
+              "src/tsconfig.spec.json"
+            ],
+            "exclude": [
+              "**/node_modules/**"
+            ]
+          }
+        }
+      }
+    },
+    "ng-dynaform-e2e": {
+      "root": "e2e",
+      "sourceRoot": "e2e",
+      "projectType": "application",
+      "architect": {
+        "e2e": {
+          "builder": "@angular-devkit/build-angular:protractor",
+          "options": {
+            "protractorConfig": "./protractor.conf.js",
+            "devServerTarget": "ng-dynaform:serve"
+          }
+        },
+        "lint": {
+          "builder": "@angular-devkit/build-angular:tslint",
+          "options": {
+            "tsConfig": [
+              "e2e/tsconfig.e2e.json"
+            ],
+            "exclude": [
+              "**/node_modules/**"
+            ]
+          }
+        }
+      }
+    }
+  },
+  "defaultProject": "ng-dynaform",
+  "schematics": {
+    "@schematics/angular:component": {
+      "prefix": "app",
+      "styleext": "scss"
+    },
+    "@schematics/angular:directive": {
+      "prefix": "app"
+    }
+  }
+}

karma.conf.js

@@ -4,24 +4,22 @@
 module.exports = function (config) {
   config.set({
     basePath: '',
-    frameworks: ['jasmine', '@angular/cli'],
+    frameworks: ['jasmine', '@angular-devkit/build-angular'],
     plugins: [
       require('karma-jasmine'),
       require('karma-chrome-launcher'),
       require('karma-jasmine-html-reporter'),
       require('karma-coverage-istanbul-reporter'),
-      require('@angular/cli/plugins/karma')
+      require('@angular-devkit/build-angular/plugins/karma')
     ],
     client:{
       clearContext: false // leave Jasmine Spec Runner output visible in browser
     },
     coverageIstanbulReporter: {
-      reports: [ 'html', 'lcovonly' ],
+      dir: require('path').join(__dirname, 'coverage'), reports: [ 'html', 'lcovonly' ],
       fixWebpackSourcePaths: true
     },
-    angularCli: {
-      environment: 'dev'
-    },
+    
     reporters: ['progress', 'kjhtml'],
     port: 9876,
     colors: true,

package.json

@@ -12,46 +12,49 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^5.2.0",
-    "@angular/common": "^5.2.0",
-    "@angular/compiler": "^5.2.0",
-    "@angular/core": "^5.2.0",
-    "@angular/forms": "^5.2.0",
-    "@angular/http": "^5.2.0",
-    "@angular/platform-browser": "^5.2.0",
-    "@angular/platform-browser-dynamic": "^5.2.0",
-    "@angular/router": "^5.2.0",
-    "@ng-bootstrap/ng-bootstrap": "^2.0.0",
-    "@progress/kendo-angular-dateinputs": "^3.4.1",
-    "@progress/kendo-angular-intl": "^1.4.1",
+    "@angular/animations": "^6.1.7",
+    "@angular/common": "^6.1.7",
+    "@angular/compiler": "^6.1.7",
+    "@angular/core": "^6.1.7",
+    "@angular/forms": "^6.1.7",
+    "@angular/http": "^6.1.7",
+    "@angular/platform-browser": "^6.1.7",
+    "@angular/platform-browser-dynamic": "^6.1.7",
+    "@angular/router": "^6.1.7",
+    "@ng-bootstrap/ng-bootstrap": "^3.2.0",
+    "@progress/kendo-angular-dateinputs": "^3.4.4",
+    "@progress/kendo-angular-intl": "^1.5.0",
     "@progress/kendo-angular-l10n": "^1.2.0",
-    "@progress/kendo-theme-bootstrap": "^2.13.5",
+    "@progress/kendo-theme-bootstrap": "^2.14.0",
     "angular-super-validator": "^2.0.0",
-    "core-js": "^2.4.1",
-    "json-formatter-js": "^2.2.0",
-    "lodash": "^4.17.10",
-    "rxjs": "^5.5.6",
-    "zone.js": "^0.8.19"
+    "core-js": "^2.5.7",
+    "json-formatter-js": "^2.2.1",
+    "lodash": "^4.17.11",
+    "rxjs": "^6.3.2",
+    "rxjs-compat": "^6.3.2",
+    "zone.js": "^0.8.26"
   },
   "devDependencies": {
-    "@angular/cli": "~1.7.3",
-    "@angular/compiler-cli": "^5.2.0",
-    "@angular/language-service": "^5.2.0",
-    "@types/jasmine": "~2.8.3",
-    "@types/jasminewd2": "~2.0.2",
-    "@types/lodash": "^4.14.109",
-    "@types/node": "~6.0.60",
-    "codelyzer": "^4.0.1",
-    "jasmine-core": "~2.8.0",
+    "@angular-devkit/build-angular": "~0.8.2",
+    "@angular/cli": "~6.2.2",
+    "@angular/compiler-cli": "^6.1.7",
+    "@angular/language-service": "^6.1.7",
+    "@types/jasmine": "~2.8.8",
+    "@types/jasminewd2": "~2.0.3",
+    "@types/lodash": "^4.14.116",
+    "@types/node": "~10.10.1",
+    "codelyzer": "^4.4.4",
+    "jasmine-core": "~3.2.1",
     "jasmine-spec-reporter": "~4.2.1",
-    "karma": "~2.0.0",
+    "karma": "~3.0.0",
     "karma-chrome-launcher": "~2.2.0",
-    "karma-coverage-istanbul-reporter": "^1.2.1",
-    "karma-jasmine": "~1.1.0",
-    "karma-jasmine-html-reporter": "^0.2.2",
-    "protractor": "^5.3.2",
-    "ts-node": "~4.1.0",
-    "tslint": "~5.9.1",
-    "typescript": "~2.5.3"
+    "karma-coverage-istanbul-reporter": "^2.0.4",
+    "karma-jasmine": "~1.1.2",
+    "karma-jasmine-html-reporter": "^1.3.1",
+    "protractor": "^5.4.1",
+    "rxjs-tslint": "^0.1.5",
+    "ts-node": "~7.0.1",
+    "tslint": "~5.11.0",
+    "typescript": "~2.9.2"
   }
 }

src/app/_mock/testfields.v7.ts

@@ -3,16 +3,14 @@
 import { FormControl, Validators, ValidationErrors } from '@angular/forms';
 
 // For the simple async validator
-import { Observable } from 'rxjs/Observable';
-import 'rxjs/add/observable/of';
-import 'rxjs/add/operator/delay';
-import 'rxjs/add/operator/map';
+import { Observable, of } from 'rxjs';
+import { delay, map } from 'rxjs/internal/operators';
 
 const testAsyncValidator = (fc: FormControl): Observable<ValidationErrors> => {
-	return Observable.of(fc).delay(2000).map(fc => {
-		console.log('Async validator got', fc.value);
-		return { is42: fc.value === '42' };
-	});
+	return of(fc).pipe(delay(2000)).pipe(map(_fc => {
+		console.log('Async validator got', _fc.value);
+		return { is42: _fc.value === '42' };
+	}));
 };
 
 const model = {

src/app/_mock/testfields.v9.ts

@@ -3,20 +3,17 @@
 import { FormControl, Validators, ValidationErrors } from '@angular/forms';
 
 // For the simple async validator
-import { Observable } from 'rxjs/Observable';
-import 'rxjs/add/observable/of';
-import 'rxjs/add/operator/delay';
-import 'rxjs/add/operator/map';
+import { Observable, of } from 'rxjs';
+import { delay, map } from 'rxjs/internal/operators';
 
 const testAsyncValidator = (fc: FormControl): Observable<ValidationErrors> => {
-	return Observable.of(fc).delay(5000).map(fc => {
-		console.log('Async validator got', fc.value);
-		return fc.value === '4200' ? null : { is4200: false };
-	});
+	return of(fc).pipe(delay(5000)).pipe(map(_fc => {
+		console.log('Async validator got', _fc.value);
+		return _fc.value === '4200' ? null : { is4200: false };
+	}));
 };
 
 
-
 const model = {
 	// field: '',
 	// field2: '',

src/app/dynaform/components/custom/multiline/multiline.component.ts

@@ -1,6 +1,6 @@
 import { Component, forwardRef } from '@angular/core';
 import { FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
-import { CustomInputComponent } from '@modules/dynaform/components/_abstract/custom-input.component';
+import { CustomInputComponent } from './../../_abstract/custom-input.component';
 
 @Component({
 	selector: 'app-multiline',
@@ -29,7 +29,7 @@ export class MultilineComponent extends CustomInputComponent {
 		this.value = this.recombineLines(this.linesArr);
 		this.propagateChange(this.value);
 	}
-	
+
 	private splitIntoLines(value: string, numLines: number): void {
 		this.linesArr = this.control.value.split(/\n/);
 		if (this.linesArr.length < numLines) {
@@ -39,9 +39,9 @@ export class MultilineComponent extends CustomInputComponent {
 			this.linesArr = this.linesArr.slice(0, numLines);
 		}
 	}
-	
+
 	private recombineLines = (linesArr: string[]): string => {
-		return linesArr.join("\n");
+		return linesArr.join('\n');
 	}
 
 	private trackByFn(index: any, item: any) {

src/app/dynaform/components/index.ts

@@ -2,17 +2,17 @@
 // See https://basarat.gitbooks.io/typescript/docs/tips/barrel.html
 
 // export { DynaformComponent } from './../dynaform.component';
-export { TextComponent } from '@modules/dynaform/components/native/text/text.component';
-export { TextareaComponent } from '@modules/dynaform/components/native/textarea/textarea.component';
-export { PasswordComponent } from '@modules/dynaform/components/native/password/password.component';
-export { SelectComponent } from '@modules/dynaform/components/native/select/select.component';
-export { RadioComponent } from '@modules/dynaform/components/native/radio/radio.component';
-export { HiddenComponent } from '@modules/dynaform/components/native/hidden/hidden.component';
-export { CheckbuttonComponent } from '@modules/dynaform/components/custom/checkbutton/checkbutton.component';
-export { DropdownModifiedInputComponent } from '@modules/dynaform/components/custom/dropdown-modified-input/dropdown-modified-input.component';
-export { MultilineComponent } from '@modules/dynaform/components/custom/multiline/multiline.component';
-export { CheckbuttonGroupComponent } from '@modules/dynaform/components/group/checkbutton-group/checkbutton-group.component';
-export { TimepickerComponent } from '@modules/dynaform/components/kendo/timepicker/timepicker.component';
-export { DatepickerComponent } from '@modules/dynaform/components/kendo/datepicker/datepicker.component';
-export { ButtonGroupComponent } from '@modules/dynaform/components/nocontrol/button-group/button-group.component';
-export { HeadingComponent } from '@modules/dynaform/components/nocontrol/heading/heading.component';
+export { TextComponent } from './native/text/text.component';
+export { TextareaComponent } from './native/textarea/textarea.component';
+export { PasswordComponent } from './native/password/password.component';
+export { SelectComponent } from './native/select/select.component';
+export { RadioComponent } from './native/radio/radio.component';
+export { HiddenComponent } from './native/hidden/hidden.component';
+export { CheckbuttonComponent } from './custom/checkbutton/checkbutton.component';
+export { DropdownModifiedInputComponent } from './custom/dropdown-modified-input/dropdown-modified-input.component';
+export { MultilineComponent } from './custom/multiline/multiline.component';
+export { CheckbuttonGroupComponent } from './group/checkbutton-group/checkbutton-group.component';
+export { TimepickerComponent } from './kendo/timepicker/timepicker.component';
+export { DatepickerComponent } from './kendo/datepicker/datepicker.component';
+export { ButtonGroupComponent } from './nocontrol/button-group/button-group.component';
+export { HeadingComponent } from './nocontrol/heading/heading.component';

src/app/dynaform/dynaform.module.ts

@@ -5,12 +5,12 @@ import { RouterModule } from '@angular/router';
 
 import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
 
-import { DynaformComponent } from '@modules/dynaform/dynaform.component';
-import { DynafieldDirective } from '@modules/dynaform/directives/dynafield.directive';
-import { DynaformService } from '@modules/dynaform/services/dynaform.service';
-import { ModelMapperService } from '@modules/dynaform/services/model-mapper.service';
+import { DynaformComponent } from './dynaform.component';
+import { DynafieldDirective } from './directives/dynafield.directive';
+import { DynaformService } from './services/dynaform.service';
+import { ModelMapperService } from './services/model-mapper.service';
 
-import * as formFieldComponents from '@modules/dynaform/components';
+import * as formFieldComponents from './components';
 const ffcArr = Object.values(formFieldComponents); // Array of all the Form Field Components
 
 import { DateInputsModule } from '@progress/kendo-angular-dateinputs';

src/app/dynaform/models/field.model.ts

@@ -4,10 +4,10 @@
  * Keep in one file for now, but maybe split if this grows too large
  ******************************************************************************************************************** */
 
-import { TemplateRef } from '@angular/core'; 
+import { TemplateRef } from '@angular/core';
 import { ValidatorFn, AsyncValidatorFn } from '@angular/forms';
-import { ValueTransformer } from '@modules/dynaform/interfaces';
-import { standardModifiers, standardTransformer } from '@modules/dynaform/utils';
+import { ValueTransformer } from './../interfaces';
+import { standardModifiers, standardTransformer } from './../utils';
 
 interface SimpleFieldMetaData {
 	name: string; 							// The FormControl name

src/app/dynaform/services/dynaform.service.ts

@@ -1,11 +1,11 @@
 /* *********************************************************************************************************************
  * Dynaform Service
  * *********************************************************************************************************************
- * 
+ *
  * BUILD
  * -----
  * This is the main method you'll use to build forms from models and metadata:
- * 
+ *
  * build(model, meta = {}, createFromMeta = false)
  *
  * Takes a model and (lazy)metadata and returns an object containing a FormGroup and Modeled MetaData :
@@ -33,23 +33,23 @@
  *
  * BUILD STRATEGYS
  * ---------------
- * 
+ *
  * MODELFIRST - The model determinies the shape of the form
  * METAFIRST  - The metadata determines the shape of the form
- * 
+ *
  * Set the build strategy using the setBuildStrategy method e.g.
- * 
+ *
  * setBuildStrategy('MODELFIRST') - the default
  * setBuildStrategy('NETAFIRST')
- * 
+ *
  * then use the build function in the normal way
  *
  *
  * REGISTER
  * --------
  * Registers callbacks attached to the form (e.g. to buttons), identified by strings.
- * 
- * register({ 
+ *
+ * register({
  *             'SAYHELLO': () => { alert('HELLO') },
  *             'SEARCH': execSearch,
  *             'NEW': addNew,
@@ -57,8 +57,8 @@
  *
  * If varToBind is supplied it is bound as 'this' to the functions.
  * Typically you'd supply the component class instance, so that 'this' used in callbacks refers to the host component.
- * 
- * 
+ *
+ *
  * LOWER-LEVEL METHODS
  * -------------------
  *
@@ -92,7 +92,7 @@ import { ModelMapperService } from './model-mapper.service';
 import {
 	autoMeta, combineModelWithMeta, combineExtraMeta, execMetaReorderingInstructions,
 	buildFieldSpecificMeta, extractFieldMappings, buildFormGroupFunctionFactory, generateNewModel
-} from '@modules/dynaform/services/_formdata-utils';
+} from './_formdata-utils';
 
 export interface FormAndMeta {
 	form: FormGroup;

src/tsconfig.spec.json

@@ -10,7 +10,8 @@
     ]
   },
   "files": [
-    "test.ts"
+    "test.ts",
+    "polyfills.ts"
   ],
   "include": [
     "**/*.spec.ts",

tsconfig.json

@@ -1,25 +1,32 @@
 {
-	"compileOnSave": false,
-	"compilerOptions": {
-		"outDir": "./dist/out-tsc",
-		"sourceMap": true,
-		"declaration": false,
-		"moduleResolution": "node",
-		"emitDecoratorMetadata": true,
-		"experimentalDecorators": true,
-		"target": "es5",
-		"typeRoots": [
-			"node_modules/@types"
-		],
-		"lib": [
-			"esnext",
-			"dom"
-		],
-		"baseUrl": "./src/",
-		"paths": {
-			"@directives/*": ["app/directives/*"],
-			"@pipes/*": ["app/pipes/*"],
-			"@mock/*": ["app/_mock/*"]
-		}
-	}
-}
+  "compileOnSave": false,
+  "compilerOptions": {
+    "outDir": "./dist/out-tsc",
+    "sourceMap": true,
+    "declaration": false,
+    "moduleResolution": "node",
+    "emitDecoratorMetadata": true,
+    "experimentalDecorators": true,
+    "target": "es5",
+    "typeRoots": [
+      "node_modules/@types"
+    ],
+    "lib": [
+      "esnext",
+      "dom"
+    ],
+    "baseUrl": "./src/",
+    "paths": {
+      "@directives/*": [
+        "app/directives/*"
+      ],
+      "@pipes/*": [
+        "app/pipes/*"
+      ],
+      "@mock/*": [
+        "app/_mock/*"
+      ]
+    },
+    "module": "es2015"
+  }
+}

tslint.json

@@ -18,7 +18,6 @@
     "forin": true,
     "import-blacklist": [
       true,
-      "rxjs",
       "rxjs/Rx"
     ],
     "import-spacing": true,