Merge pull request #6 from hamzahamidi/aot

Enable AOT R2

README.md

@@ -1,4 +1,3 @@
-
 # Angular v6 for [Angular2-json-schema-form](https://github.com/dschnelldavis/angular2-json-schema-form)
 
 [![Build Status](https://travis-ci.org/hamzahamidi/Angular6-json-schema-form.svg?branch=master)](https://travis-ci.org/hamzahamidi/Angular6-json-schema-form)
@@ -24,13 +23,13 @@ This example playground features over 70 different JSON Schemas for you to try (
 
 ### To install from GitHub
 
-To install [the library and the example playground from GitHub](https://github.com/hamzahamidi/angular6-json-schema-form), clone `https://github.com/hamzahamidi/angular6-json-schema-form.git` with your favorite git program. Or, assuming you have [git](https://git-scm.com/book/en/v2/Getting-Started-Installing-Git) and [Node/NPM](https://nodejs.org/en/download/) installed, enter the following in your terminal:
+To install [the library and the example playground from GitHub](https://github.com/hamzahamidi/angular6-json-schema-form), clone `https://github.com/hamzahamidi/angular6-json-schema-form.git` with your favorite git program. Or, assuming you have [git](https://git-scm.com/book/en/v2/Getting-Started-Installing-Git) and [Node/YARN](https://nodejs.org/en/download/) installed, enter the following in your terminal:
 
 ```shell
 git clone https://github.com/hamzahamidi/angular6-json-schema-form.git angular6-json-schema-form
 cd angular6-json-schema-form
-npm install
-npm start
+yarn install
+yarn start
 ```
 
 This should start a server with the example playground, which you can view in your browser at `http://localhost:4200`
@@ -46,43 +45,39 @@ The source code is composed as the following:
 
 If you want detailed documentation describing the individual functions used in this library, run `npm run docs` to generate TypeDoc documentation, and then look in the generated `/docs/api` folder. (Angular JSON Schema Form is still a work in progress, so right now this documentation varies from highly detailed to completely missing.)
 
-### To install from NPM and use in your own project
+### To install from NPM/YARN and use in your own project
 
 If, after playing with the examples, you decide this library is functional enough to use in your own project, you can [install it from NPM](https://www.npmjs.com/package/angular6-json-schema-form) using either [NPM](https://www.npmjs.com) or [Yarn](https://yarnpkg.com). To install with NPM, run the following from your terminal:
 
 ```shell
 npm install angular6-json-schema-form
 ```
+With YARN, run the following:
+```shell
+yarn add angular6-json-schema-form
+```
 
-Then import JsonSchemaFormModule in your main application module, like this:
+Then import `MaterialDesignFrameworkModule` in your main application module if you want to use `material-angular` UI, like this:
 
 ```javascript
 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
 
-import {
-  JsonSchemaFormModule, MaterialDesignFrameworkModule
-} from 'angular6-json-schema-form';
+import { MaterialDesignFrameworkModule } from 'angular6-json-schema-form';
 
 import { AppComponent } from './app.component';
 
 @NgModule({
   declarations: [ AppComponent ],
   imports: [
-    BrowserModule, MaterialDesignFrameworkModule,
-    JsonSchemaFormModule.forRoot(MaterialDesignFrameworkModule)
+    MaterialDesignFrameworkModule
   ],
   providers: [],
   bootstrap: [ AppComponent ]
 })
 export class AppModule { }
 ```
-
-Note that you have to import both the main JsonSchemaFormModule and a separate framework module (in this example, MaterialDesignFrameworkModule).
-
-The framework module is listed in your imports section twice, once by itself (to load the framework's components) and again in the JsonSchemaFormModule.forRoot() function (to load the framework's service and tell Angular JSON Schema Form to use it).
-
-Four framework modules are currently included:
+Four framework modules are currently included, the import is the same as above :
 
 * MaterialDesignFrameworkModule — Material Design
 * Bootstrap3FrameworkModule — Bootstrap 3
@@ -91,20 +86,6 @@ Four framework modules are currently included:
 
 It is also possible to load multiple frameworks and switch between them at runtime, like the example playground on GitHub. But most typical sites will just load one framework.
 
-#### Seed Application Examples
-
-For complete examples of how to install and configure Angular JSON Schema Form to work with each included display framework, check out the following seed applications:
-
-* [Angular JSON Schema Form Material Design Seed App](https://github.com/dschnelldavis/ng-jsf-material-design-seed)
-* [Angular JSON Schema Form Bootstrap 3 Seed App](https://github.com/dschnelldavis/ng-jsf-bootstrap3-seed)
-* [Angular JSON Schema Form Bootstrap 4 Seed App](https://github.com/dschnelldavis/ng-jsf-bootstrap4-seed)
-
-#### Additional notes for Angular CLI
-
-Make sure you are running a recent version of Angular CLI.
-
-Very old versions of Angular CLI (e.g. 1.0.1) may fail with the error `Critical dependency: the request of a dependency is an expression` while trying to compile ajv (Another JSON Schema Validator). But this error has been fixed in newer versions. So if you receive that error, upgrade your Angular CLI.
-
 ## Using Angular JSON Schema Form
 
 ### Basic use
@@ -216,7 +197,7 @@ If you use this syntax, make sure to include the nested quotes (`"'` and `'"`) a
 You may also combine all your inputs into one compound object and include it as a `form` input, like so:
 
 ```javascript
-let yourCompoundInputObject = {
+const yourCompoundInputObject = {
   schema:    { ... },  // REQUIRED
   layout:    [ ... ],  // optional
   data:      { ... },  // optional
@@ -309,7 +290,7 @@ You can easily add your own custom input validation error messages, either for i
 To set messages for individual form controls, add them to that control's node in the form layout, like this:
 
 ```javascript
-let yourFormLayout = [
+const yourFormLayout = [
   { key: 'name',
     title: 'Enter your name',
     validationMessages: {
@@ -323,7 +304,7 @@ let yourFormLayout = [
 To set messages for the entire form, add them to the form options, inside the defautWidgetOptions validationMessages object, like this:
 
 ```javascript
-let yourFormOptions = {
+const yourFormOptions = {
   defautWidgetOptions: {
     validationMessages: {
       // Put your error messages for the entire form here
@@ -405,7 +386,7 @@ Example:
 import { YourInputWidgetComponent } from './your-input-widget.component';
 import { YourCustomWidgetComponent } from './your-custom-widget.component';
 ...
-let yourNewWidgets = {
+const yourNewWidgets = {
   input: YourInputWidgetComponent,          // Replace existing 'input' widget
   custom-control: YourCustomWidgetComponent // Add new 'custom-control' widget
 }
@@ -439,7 +420,7 @@ To change the active framework, either use the `framework` input of the `<json-s
 import { YourFrameworkComponent } from './your-framework.component';
 import { YourWidgetComponent } from './your-widget.component';
 ...
-let yourCustomFramework = {
+const yourCustomFramework = {
   framework: YourFrameworkComponent,                                // required
   widgets:     { 'your-widget-name': YourWidgetComponent,   ... },  // optional
   stylesheets: [ '//url-to-framework-external-style-sheet', ... ],  // optional
@@ -480,4 +461,4 @@ However, if you are creating a production site you should load these assets sepa
 
 # License
 
-[MIT](/LICENSE)
+[MIT](/LICENSE)

angular.json

@@ -122,38 +122,38 @@
         }
       }
     },
-    "json-schema-form": {
-      "root": "projects/json-schema-form",
-      "sourceRoot": "projects/json-schema-form/src",
+    "angular6-json-schema-form": {
+      "root": "projects/angular6-json-schema-form",
+      "sourceRoot": "projects/angular6-json-schema-form/src",
       "projectType": "library",
       "prefix": "",
       "architect": {
         "build": {
           "builder": "@angular-devkit/build-ng-packagr:build",
           "options": {
-            "tsConfig": "projects/json-schema-form/tsconfig.lib.json",
-            "project": "projects/json-schema-form/ng-package.json"
+            "tsConfig": "projects/angular6-json-schema-form/tsconfig.lib.json",
+            "project": "projects/angular6-json-schema-form/ng-package.json"
           },
           "configurations": {
             "production": {
-              "project": "projects/json-schema-form/ng-package.prod.json"
+              "project": "projects/angular6-json-schema-form/ng-package.prod.json"
             }
           }
         },
         "test": {
           "builder": "@angular-devkit/build-angular:karma",
           "options": {
-            "main": "projects/json-schema-form/src/test.ts",
-            "tsConfig": "projects/json-schema-form/tsconfig.spec.json",
-            "karmaConfig": "projects/json-schema-form/karma.conf.js"
+            "main": "projects/angular6-json-schema-form/src/test.ts",
+            "tsConfig": "projects/angular6-json-schema-form/tsconfig.spec.json",
+            "karmaConfig": "projects/angular6-json-schema-form/karma.conf.js"
           }
         },
         "lint": {
           "builder": "@angular-devkit/build-angular:tslint",
           "options": {
             "tsConfig": [
-              "projects/json-schema-form/tsconfig.lib.json",
-              "projects/json-schema-form/tsconfig.spec.json"
+              "projects/angular6-json-schema-form/tsconfig.lib.json",
+              "projects/angular6-json-schema-form/tsconfig.spec.json"
             ],
             "exclude": [
               "**/node_modules/**"

package.json

@@ -32,65 +32,65 @@
     "start": "ng serve",
     "start-prod": "ng serve --prod",
     "build": "ng build --prod --base-href ./",
-    "buildlib": "ng build json-schema-form --prod",
-    "postbuildlib": "cp  README.md LICENSE  dist/json-schema-form/",
+    "buildlib": "ng build angular6-json-schema-form --prod",
+    "postbuildlib": "cp  README.md LICENSE  dist/angular6-json-schema-form/",
     "test": "ng test",
     "lint": "ng lint",
     "e2e": "ng e2e"
   },
   "dependencies": {},
   "devDependencies": {
+    "@angular-devkit/build-angular": "~0.6.8",
+    "@angular-devkit/build-ng-packagr": "~0.6.8",
     "@angular/animations": "^6.0.3",
     "@angular/cdk": "^6.3.2",
+    "@angular/cli": "~6.0.8",
     "@angular/common": "^6.0.3",
     "@angular/compiler": "^6.0.3",
+    "@angular/compiler-cli": "^6.0.3",
     "@angular/core": "^6.0.3",
     "@angular/flex-layout": "^6.0.0-beta.16",
     "@angular/forms": "^6.0.3",
     "@angular/http": "^6.0.3",
+    "@angular/language-service": "^6.0.3",
     "@angular/material": "^6.3.2",
     "@angular/platform-browser": "^6.0.3",
     "@angular/platform-browser-dynamic": "^6.0.3",
     "@angular/router": "^6.0.3",
-    "core-js": "^2.5.4",
-    "rxjs": "^6.0.0",
-    "zone.js": "^0.8.26",
-    "@angular/compiler-cli": "^6.0.3",
-    "@angular-devkit/build-ng-packagr": "~0.6.8",
-    "@angular-devkit/build-angular": "~0.6.8",
-    "ng-packagr": "^3.0.3",
-    "tsickle": ">=0.25.5",
-    "tslib": "^1.7.1",
-    "typescript": "~2.7.2",
-    "@angular/cli": "~6.0.8",
-    "@angular/language-service": "^6.0.3",
     "@types/jasmine": "~2.8.6",
     "@types/jasminewd2": "~2.0.3",
-    "@types/node": "~8.9.4",
     "@types/lodash": "^4.14.110",
+    "@types/node": "~8.9.4",
+    "brace": "^0.11.1",
+    "camelcase": "^4.1.0",
     "codelyzer": "~4.2.1",
+    "concurrently": "^3.5.1",
+    "core-js": "^2.5.4",
+    "glob": "^7.1.2",
+    "hammerjs": "2.x",
     "jasmine-core": "~2.99.1",
     "jasmine-spec-reporter": "~4.2.1",
     "karma": "~1.7.1",
     "karma-chrome-launcher": "~2.2.0",
+    "karma-cli": "^1.0.1",
     "karma-coverage-istanbul-reporter": "~2.0.0",
     "karma-jasmine": "~1.1.1",
     "karma-jasmine-html-reporter": "^0.2.2",
+    "ng-packagr": "^3.0.3",
     "protractor": "~5.3.0",
-    "ts-node": "~5.0.1",
-    "tslint": "~5.9.1",
-    "brace": "^0.11.1",
-    "camelcase": "^4.1.0",
-    "concurrently": "^3.5.1",
-    "glob": "^7.1.2",
-    "hammerjs": "2.x",
-    "karma-cli": "^1.0.1",
     "rimraf": "^2.6.2",
     "rollup": "^0.55.0",
     "rollup-plugin-commonjs": "^8.2.6",
     "rollup-plugin-node-resolve-angular": "^2.0.3",
     "rollup-plugin-sourcemaps": "^0.4.2",
     "rollup-plugin-uglify": "^3.0.0",
-    "typedoc": "^0.9.0"
+    "rxjs": "^6.0.0",
+    "ts-node": "~5.0.1",
+    "tsickle": ">=0.25.5",
+    "tslib": "^1.7.1",
+    "tslint": "~5.9.1",
+    "typedoc": "^0.9.0",
+    "typescript": "~2.7.2",
+    "zone.js": "^0.8.26"
   }
 }

projects/json-schema-form/ng-package.json → projects/angular6-json-schema-form/ng-package.json

@@ -1,6 +1,6 @@
 {
   "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
-  "dest": "../../dist/json-schema-form",
+  "dest": "../../dist/angular6-json-schema-form",
   "deleteDestPath": false,
   "lib": {
     "entryFile": "src/public_api.ts"

projects/json-schema-form/ng-package.prod.json → projects/angular6-json-schema-form/ng-package.prod.json

@@ -1,6 +1,6 @@
 {
   "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
-  "dest": "../../dist/json-schema-form",
+  "dest": "../../dist/angular6-json-schema-form",
   "lib": {
     "entryFile": "src/public_api.ts"
   }

projects/json-schema-form/package.json → projects/angular6-json-schema-form/package.json

@@ -2,7 +2,7 @@
   "name": "angular6-json-schema-form",
   "version": "1.0.2",
   "description": "Angular JSON Schema Form builder",
-  "author":"https://github.com/hamzahamidi/Angular6-json-schema-form/graphs/contributors",
+  "author": "https://github.com/hamzahamidi/Angular6-json-schema-form/graphs/contributors",
   "keywords": [
     "Angular",
     "ng",
@@ -27,8 +27,12 @@
     "@angular/common": "^6.0.0",
     "@angular/core": "^6.0.0",
     "@angular/forms": "^6.0.0",
-    "ajv": "^6.0.1",
-    "lodash": "^4.17.4",
+    "@angular/platform-browser": "^6.0.0",
+    "@angular/flex-layout": "^6.0.0-beta.16",
     "rxjs": "^6.0.0"
+  },
+  "devDependencies": {
+    "ajv": "^6.0.1",
+    "lodash": "^4.17.4"
   }
 }

projects/json-schema-form/src/lib/framework-library/bootstrap-3-framework/bootstrap-3-framework.component.ts → projects/angular6-json-schema-form/src/lib/framework-library/bootstrap-3-framework/bootstrap-3-framework.component.ts

@@ -3,9 +3,7 @@ import { ChangeDetectorRef, Component, Input, OnChanges, OnInit } from '@angular
 import * as _ from 'lodash';
 
 import { JsonSchemaFormService } from '../../json-schema-form.service';
-import {
-  addClasses, hasOwn, inArray, isArray, JsonPointer, toTitleCase
-} from '../../shared';
+import { addClasses, inArray } from '../../shared';
 
 /**
  * Bootstrap 3 framework for Angular JSON Schema Form.
@@ -260,7 +258,7 @@ export class Bootstrap3FrameworkComponent implements OnInit, OnChanges {
         this.formControl.statusChanges.subscribe(status => this.updateHelpBlock(status));
 
         if (this.options.debug) {
-          let vars: any[] = [];
+          const vars: any[] = [];
           this.debugOutput = _.map(vars, thisVar => JSON.stringify(thisVar, null, 2)).join('\n');
         }
       }

projects/angular6-json-schema-form/src/lib/framework-library/bootstrap-3-framework/bootstrap-3-framework.module.ts

@@ -0,0 +1,24 @@
+import { NgModule, ModuleWithProviders } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { WidgetLibraryModule } from '../../widget-library/widget-library.module';
+import { Framework } from '../framework';
+import { Bootstrap3FrameworkComponent } from './bootstrap-3-framework.component';
+import { Bootstrap3Framework } from './bootstrap-3.framework';
+
+import { WidgetLibraryService } from '../../widget-library/widget-library.service';
+import { JsonSchemaFormModule } from '../../json-schema-form.module';
+import { JsonSchemaFormService } from '../../json-schema-form.service';
+import { FrameworkLibraryService } from '../framework-library.service';
+
+
+@NgModule({
+  imports: [JsonSchemaFormModule, CommonModule, WidgetLibraryModule],
+  declarations: [Bootstrap3FrameworkComponent],
+  exports: [JsonSchemaFormModule, Bootstrap3FrameworkComponent],
+  providers: [JsonSchemaFormService, FrameworkLibraryService, WidgetLibraryService,
+    { provide: Framework, useClass: Bootstrap3Framework, multi: true }
+  ],
+  entryComponents: [Bootstrap3FrameworkComponent]
+})
+export class Bootstrap3FrameworkModule { }

projects/angular6-json-schema-form/src/lib/framework-library/bootstrap-4-framework/bootstrap-4-framework.module.ts

@@ -0,0 +1,22 @@
+import { NgModule, ModuleWithProviders } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { WidgetLibraryModule } from '../../widget-library/widget-library.module';
+import { Framework } from '../framework';
+import { Bootstrap4FrameworkComponent } from './bootstrap-4-framework.component';
+import { Bootstrap4Framework } from './bootstrap-4.framework';
+import { WidgetLibraryService } from '../../widget-library/widget-library.service';
+import { JsonSchemaFormModule } from '../../json-schema-form.module';
+import { JsonSchemaFormService } from '../../json-schema-form.service';
+import { FrameworkLibraryService } from '../framework-library.service';
+
+@NgModule({
+  imports: [JsonSchemaFormModule, CommonModule, WidgetLibraryModule],
+  declarations: [Bootstrap4FrameworkComponent],
+  exports: [JsonSchemaFormModule, Bootstrap4FrameworkComponent],
+  providers: [JsonSchemaFormService, FrameworkLibraryService, WidgetLibraryService,
+    { provide: Framework, useClass: Bootstrap4Framework, multi: true }
+  ],
+  entryComponents: [Bootstrap4FrameworkComponent]
+})
+export class Bootstrap4FrameworkModule { }