Good starting point

src/app/app.component.ts

@@ -93,6 +93,7 @@ export class AppComponent implements OnInit {
 	}
 
 	ngOnInit() {
+		/*
 		this.form = this.fb.group({
 			testVal: '%lovely%',
 			testCheckbutton: true,
@@ -103,6 +104,7 @@ export class AppComponent implements OnInit {
 			}),
 			dynaformtest: this.fb.group(extractFormGroupData(formMetaDataObj))
 		});
+		*/
 	}
 }
 

src/app/app.module.ts

@@ -1,5 +1,6 @@
 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 
 
 import { AppComponent } from './app.component';
@@ -10,7 +11,9 @@ import { AppComponent } from './app.component';
     AppComponent
   ],
   imports: [
-    BrowserModule
+	BrowserModule,
+	FormsModule,
+	ReactiveFormsModule
   ],
   providers: [],
   bootstrap: [AppComponent]

src/app/dynaform/components/layout/dynarow/dynarow.component.ts

@@ -5,10 +5,10 @@ import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { ComponentHostDirective } from '@directives/component-host.directive';
 
 // Group into barrel: https://basarat.gitbooks.io/typescript/docs/tips/barrel.html
-import { BasicinputComponent } from '@components/basicinput/basicinput.component';
-import { DropdownModifiedInputComponent } from '@components/dropdown-modified-input/dropdown-modified-input.component';
-import { CheckbuttonComponent } from '@components/checkbutton/checkbutton.component';
-import { CheckbuttonGroupComponent } from '@components/checkbutton-group/checkbutton-group.component';
+import { BasicinputComponent } from './../../fields/basicinput/basicinput.component';
+import { DropdownModifiedInputComponent } from './../../fields/dropdown-modified-input/dropdown-modified-input.component';
+import { CheckbuttonComponent } from './../../fields/checkbutton/checkbutton.component';
+import { CheckbuttonGroupComponent } from './../../fields/checkbutton-group/checkbutton-group.component';
 
 const validComponentsArray = [ BasicinputComponent, DropdownModifiedInputComponent, CheckbuttonComponent, CheckbuttonGroupComponent ];
 const validComponents = validComponentsArray.reduce((acc, component) => Object.assign(acc, { [component.name]: component}), {});

src/app/dynaform/models/index.ts

@@ -5,7 +5,7 @@
  ********************************************************************************************************************* */
 
 import { ValidatorFn, AsyncValidatorFn } from '@angular/forms';
-import { ValueTransformer } from 'dynaform/components/fields/dropdown-modified-input/dropdown-modified-input.component';
+import { ValueTransformer } from './../components/fields/dropdown-modified-input/dropdown-modified-input.component';
 
 // ---------------------------------------------------------------------------------------------------------------------
 // Types & Interfaces
@@ -127,12 +127,12 @@ for (field in model) {
 	if (field in overrides) {
 		Object.assign(modeledMeta, FieldFactory(model, overrides[field])); // FieldFactory returns a new field model of the specified type
 	} else {
-		Object.assign(modeledMeta, new BasicField(field)); // Defauls to basic text field
+		Object.assign(modeledMeta, new BasicField(field)); // Defaults to basic text field
 	}
  }
  
 
- (2) Apprach 2: Meta-data fully specified (not lazily-generated), so loop through metadata genetating field models
+ (2) Apprach 2: Meta-data fully specified (not lazily-generated), so loop through metadata genetating field models.
      metaspec may be hard-coded (for now) or loaded from server and cached, as part of app boostraping
 
  metaspac = {

src/app/pipes/keys.pipe.ts

@@ -0,0 +1,15 @@
+// Take an object and return an array containing the names of its keys
+// e.g. { a: 1, b: 2, c: 3 } => ['a', 'b', 'c']
+
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+	name: 'keys'
+})
+export class KeysPipe implements PipeTransform {
+
+	transform(value: object): Array<string> {
+		return Object.keys(value);
+	}
+
+}

src/typings.d.ts

@@ -1,5 +1,11 @@
 /* SystemJS module definition */
 declare var module: NodeModule;
 interface NodeModule {
-  id: string;
 }
+
+declare module "*.json" {
+    const value: any;
+    export default value;
+}
+
+interface StringMap { [s: string]: any; }

tsconfig.json

@@ -16,5 +16,10 @@
 			"dom"
 		],
 		"baseUrl": "./src/",
+		"paths": {
+			"@directives/*": ["app/directives/*"],
+			"@pipes/*": ["app/pipes/*"],
+			"@mock/*": ["app/_mock/*"]
+		}
 	}
 }

yarn.lock

@@ -204,6 +204,10 @@
   dependencies:
     "@types/jasmine" "*"
 
+"@types/lodash@^4.14.109":
+  version "4.14.109"
+  resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.109.tgz#b1c4442239730bf35cabaf493c772b18c045886d"
+
 "@types/node@^6.0.46", "@types/node@~6.0.60":
   version "6.0.112"
   resolved "https://registry.yarnpkg.com/@types/node/-/node-6.0.112.tgz#0f37473b1d1ecd30c8bf57215ef4fb558f99cc86"
@@ -3416,6 +3420,10 @@ jsesc@~0.5.0:
   version "0.5.0"
   resolved "https://registry.yarnpkg.com/jsesc/-/jsesc-0.5.0.tgz#e7dee66e35d6fc16f710fe91d5cf69f70f08911d"
 
+json-formatter-js@^2.2.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/json-formatter-js/-/json-formatter-js-2.2.0.tgz#1ed987223ef2f1d945304597faae78b580a8212b"
+
 json-loader@^0.5.4:
   version "0.5.7"
   resolved "https://registry.yarnpkg.com/json-loader/-/json-loader-0.5.7.tgz#dca14a70235ff82f0ac9a3abeb60d337a365185d"