feat:(upgrade) ngcli16 and ng2.1

Author: mashhoodr

.gitignore

@@ -10,6 +10,7 @@
 
 # IDEs and editors
 /.idea
+/.vscode
 .project
 .classpath
 *.launch

README.md

@@ -1,10 +1,10 @@
 # angular2-multi-component-dynamic-form
 
-A small playground using Angular2 RC1 which demonstrates a way to structure an application with a large dynamic form. There is routing so a form can be in multiple steps but the central form object in form of a service is persisted through the app. There are validations (default and custom) + additional customizations that might be needed and several other features.
+A small playground using Angular2 which demonstrates a way to structure an application with a large dynamic form. There is routing so a form can be in multiple steps but the central form object in form of a service is persisted through the app. There are validations (default and custom) + additional customizations that might be needed and several other features.
 
 ## Functionality
 
-- [x] **RC5 ready!** 
+- [x] **Angular 2.1 ready!** 
 - [x] Dynamic rendering and customising for form fields
 - [x] Support for Text, Select, Radio and Checkboxes
 - [x] Large form broken over multiple components
@@ -14,10 +14,11 @@ A small playground using Angular2 RC1 which demonstrates a way to structure an a
 - [x] Sidebar showing status of form in each component
 - [x] Field visibility dependant on service
 - [x] Control visibility using specific fields (via custom code in Compontent)
-- [x] IE9 Support (with some hacks) [pending testing post RC5 update]
+- [x] IE9 Support (with some hacks) [pending testing post 2.1 final update]
 - [x] Clicking on text fields should empty them, if empty on blur restore the value
 - [x] Tooltips on input fields
 - [x] Upgrade to new forms module (RC5)
+- [x] Upgrade to AngularCLI Webpack
 - [ ] Injecting custom html blocks (non-form related) into components (ads, widgets etc)
 - [ ] Highcharts integration
 - [ ] Testing large forms (adding as we go along)

angular-cli-build.js

@@ -1,32 +1,44 @@
 {
   "project": {
-    "version": "1.0.0-beta.10",
-    "name": "angular2-multicomponent-form"
+    "version": "1.0.0-beta.17",
+    "name": "component-migration"
   },
   "apps": [
     {
-      "main": "src/main.ts",
-      "tsconfig": "src/tsconfig.json",
-      "mobile": false
+      "root": "src",
+      "outDir": "dist",
+      "assets": "assets",
+      "index": "index.html",
+      "main": "main.ts",
+      "test": "test.ts",
+      "tsconfig": "tsconfig.json",
+      "prefix": "app",
+      "mobile": false,
+      "styles": [
+        "styles.css"
+      ],
+      "scripts": [],
+      "environments": {
+        "source": "environments/environment.ts",
+        "dev": "environments/environment.ts",
+        "prod": "environments/environment.prod.ts"
+      }
     }
   ],
   "addons": [],
   "packages": [],
   "e2e": {
     "protractor": {
-      "config": "config/protractor.conf.js"
+      "config": "./protractor.conf.js"
     }
   },
   "test": {
     "karma": {
-      "config": "config/karma.conf.js"
+      "config": "./karma.conf.js"
     }
   },
   "defaults": {
-    "prefix": "app",
-    "sourceDir": "src",
     "styleExt": "css",
-    "prefixInterfaces": false,
-    "lazyRoutePrefix": "+"
+    "prefixInterfaces": false
   }
 }

angular-cli.json

@@ -1,14 +1,14 @@
-import { AppPage } from './app.po';
+import { ComponentMigrationPage } from './app.po';
 
-describe('angular2-multicomponent-form App Tests: ', function() {
-  let page: AppPage;
+describe('component-migration App', function() {
+  let page: ComponentMigrationPage;
 
   beforeEach(() => {
-    page = new AppPage();
+    page = new ComponentMigrationPage();
   });
 
-  it('should display message saying \'Angular2 Multi Component Dynamic Form demo\'', () => {
+  it('should display message saying app works', () => {
     page.navigateTo();
-    expect(page.getParagraphText()).toEqual('Angular2 Multi Component Dynamic Form demo');
+    expect(page.getParagraphText()).toEqual('app works!');
   });
 });

config/environment.js

@@ -1,22 +1,11 @@
-export class AppPage {
-  waitTime: number = 3000;
+import { browser, element, by } from 'protractor';
 
-  navigateTo(route: string = '/#/') {
-    browser.get(route);
-    this.waitForPageToLoad();
-    return;
+export class ComponentMigrationPage {
+  navigateTo() {
+    return browser.get('/');
   }
 
   getParagraphText() {
-    return element(by.css('app-root h3')).getText();
+    return element(by.css('app-root h1')).getText();
   }
-
-  waitForPageToLoad() {
-    browser.wait(() => {
-      return element(by.css('app-root')).getText().then((text) => {
-        return text !== 'Loading...';
-      });
-    }, this.waitTime);
-  }
-
 }

config/karma-test-shim.js

@@ -0,0 +1,14 @@
+import { AppPage } from './app.po';
+
+describe('angular2-multicomponent-form App Tests: ', function() {
+  let page: AppPage;
+
+  beforeEach(() => {
+    page = new AppPage();
+  });
+
+  it('should display message saying \'Angular2 Multi Component Dynamic Form demo\'', () => {
+    page.navigateTo();
+    expect(page.getParagraphText()).toEqual('Angular2 Multi Component Dynamic Form demo');
+  });
+});

config/karma.conf.js

@@ -0,0 +1,22 @@
+export class AppPage {
+  waitTime: number = 3000;
+
+  navigateTo(route: string = '/#/') {
+    browser.get(route);
+    this.waitForPageToLoad();
+    return;
+  }
+
+  getParagraphText() {
+    return element(by.css('app-root h3')).getText();
+  }
+
+  waitForPageToLoad() {
+    browser.wait(() => {
+      return element(by.css('app-root')).getText().then((text) => {
+        return text !== 'Loading...';
+      });
+    }, this.waitTime);
+  }
+
+}

e2e/app.e2e-spec.ts

@@ -0,0 +1,17 @@
+{
+  "compileOnSave": false,
+  "compilerOptions": {
+    "declaration": false,
+    "emitDecoratorMetadata": true,
+    "experimentalDecorators": true,
+    "mapRoot": "",
+    "module": "commonjs",
+    "moduleResolution": "node",
+    "noEmitOnError": true,
+    "noImplicitAny": false,
+    "rootDir": ".",
+    "sourceMap": true,
+    "sourceRoot": "/",
+    "target": "es5"
+  }
+}

e2e/app.po.ts

@@ -4,14 +4,13 @@
     "declaration": false,
     "emitDecoratorMetadata": true,
     "experimentalDecorators": true,
-    "mapRoot": "",
     "module": "commonjs",
     "moduleResolution": "node",
-    "noEmitOnError": true,
-    "noImplicitAny": false,
-    "rootDir": ".",
+    "outDir": "../dist/out-tsc-e2e",
     "sourceMap": true,
-    "sourceRoot": "/",
-    "target": "es5"
+    "target": "es5",
+    "typeRoots": [
+      "../node_modules/@types"
+    ]
   }
 }

e2e/e2e/app.e2e-spec.ts

@@ -0,0 +1,38 @@
+// Karma configuration file, see link for more information
+// https://karma-runner.github.io/0.13/config/configuration-file.html
+
+module.exports = function (config) {
+  config.set({
+    basePath: '',
+    frameworks: ['jasmine', 'angular-cli'],
+    plugins: [
+      require('karma-jasmine'),
+      require('karma-chrome-launcher'),
+      require('karma-remap-istanbul'),
+      require('angular-cli/plugins/karma')
+    ],
+    files: [
+      { pattern: './src/test.ts', watched: false }
+    ],
+    preprocessors: {
+      './src/test.ts': ['angular-cli']
+    },
+    remapIstanbulReporter: {
+      reports: {
+        html: 'coverage',
+        lcovonly: './coverage/coverage.lcov'
+      }
+    },
+    angularCli: {
+      config: './angular-cli.json',
+      environment: 'dev'
+    },
+    reporters: ['progress', 'karma-remap-istanbul'],
+    port: 9876,
+    colors: true,
+    logLevel: config.LOG_INFO,
+    autoWatch: true,
+    browsers: ['Chrome'],
+    singleRun: false
+  });
+};