WIP feat: update to angular 5

.gitignore

@@ -6,7 +6,6 @@
 node_modules/
 coverage/
 dist/
-aot/
 tmp/
 
 # error

e2e/src/check-elements/e2e-check-elements.components.spec.ts

@@ -8,7 +8,7 @@ chai.should();
 
 describe('The checkElements setting', () => {
   describe('"None"', () => {
-    beforeEach(async () => await browser.get('/check-no-elements'));
+    beforeEach(async () => browser.get('/check-no-elements'));
 
     it('should render the empty item included in the array', async () => {
       (await displayedPersons()).should.eql([...persons, emptyPerson]);
@@ -46,7 +46,7 @@ describe('The checkElements setting', () => {
   });
 
   describe('"New"', () => {
-    beforeEach(async () => await browser.get('/check-new-elements'));
+    beforeEach(async () => browser.get('/check-new-elements'));
 
     it('should not render the empty item included in the array', async () => {
       (await displayedPersons()).should.eql([
@@ -94,7 +94,7 @@ describe('The checkElements setting', () => {
   });
 
   describe('"All"', () => {
-    beforeEach(async () => await browser.get('/check-all-elements'));
+    beforeEach(async () => browser.get('/check-all-elements'));
 
     it('should not render the empty item included in the array', async () => {
       (await displayedPersons()).should.eql([

e2e/src/custom-empty/e2e-custom-empty.component.spec.ts

@@ -5,7 +5,7 @@ import { $, $$, browser, Key } from 'protractor';
 chai.should();
 
 describe('The custom emptiness config', () => {
-  beforeEach(async () => await browser.get('/custom-empty'));
+  beforeEach(async () => browser.get('/custom-empty'));
 
   it('is used to generate a fresh item every time', async () => {
     await (await $$('input[name="product"]'))[1].sendKeys('456');

e2e/src/form/e2e-form.component.spec.ts

@@ -5,7 +5,7 @@ import { $, $$, browser, Key } from 'protractor';
 chai.should();
 
 describe('The directives used for a form with text inputs', () => {
-  beforeEach(async () => await browser.get('/form'));
+  beforeEach(async () => browser.get('/form'));
   it('should render one initial empty input', async () => {
     const inputValues = await $$('input').map((input: any) =>
       input.getAttribute('value'),
@@ -17,7 +17,7 @@ describe('The directives used for a form with text inputs', () => {
   it('should allow entering multiple items in a row', async () => {
     Array(4)
       .fill(0)
-      .map(async (_, i) => await $('input:last-child').sendKeys(i, Key.TAB));
+      .map(async (_, i) => $('input:last-child').sendKeys(i, Key.TAB));
 
     JSON.parse(await $('#customers').getText()).should.eql(
       Array(4)
@@ -29,7 +29,7 @@ describe('The directives used for a form with text inputs', () => {
   it('should allow removing intermediate items', async () => {
     Array(4)
       .fill(0)
-      .map(async (_, i) => await $('input:last-child').sendKeys(i, Key.TAB));
+      .map(async (_, i) => $('input:last-child').sendKeys(i, Key.TAB));
     await $('input:nth-child(3)').sendKeys(
       Key.CONTROL,
       'a',

e2e/src/nested/e2e-nested.component.spec.ts

@@ -5,7 +5,7 @@ import { $, $$, browser, Key } from 'protractor';
 chai.should();
 
 describe('Nested ngxInputFlow', () => {
-  beforeEach(async () => await browser.get('/nested'));
+  beforeEach(async () => browser.get('/nested'));
 
   it('renders an initial empty item for both the inner and the outer array', async () => {
     (await $$('.name').count()).should.equal(1);

e2e/src/no-model-binding/e2e-no-model-binding.component.spec.ts

@@ -7,7 +7,7 @@ import { emptyPerson, persons } from '../data/persons';
 chai.should();
 
 describe('The directives used without a ngxInputFlowModel binding', () => {
-  beforeEach(async () => await browser.get('/no-model-binding'));
+  beforeEach(async () => browser.get('/no-model-binding'));
 
   it('render given array with an additional flow item', async () => {
     (await displayedPersons()).should.eql([...persons, emptyPerson]);

e2e/src/other-inputs/e2e-other-inputs.component.spec.ts

@@ -5,7 +5,7 @@ import { $, $$, browser } from 'protractor';
 chai.should();
 
 describe('The directives used with input type', () => {
-  beforeEach(async () => await browser.get('/other-inputs'));
+  beforeEach(async () => browser.get('/other-inputs'));
 
   describe('select', () => {
     it('allow entering multiple items in a row', async () => {

e2e/src/replacement/e2e-replacement.component.spec.ts

@@ -7,7 +7,7 @@ import { emptyPerson } from '../data/persons';
 chai.should();
 
 describe('A complete replacement of the array', () => {
-  beforeEach(async () => await browser.get('/replacement'));
+  beforeEach(async () => browser.get('/replacement'));
 
   it('results in the new array being displayed', async () => {
     (await $$('input[name="name"]'))[0].click();

e2e/src/simple/e2e-simple.component.spec.ts

@@ -14,7 +14,7 @@ testComponent('/outer', 'ngx-input-flow-e2e-inner');
 
 function testComponent(route: string, repeaterType: string) {
   describe('The directives used for a simple table on ' + route, () => {
-    beforeEach(async () => await browser.get(route));
+    beforeEach(async () => browser.get(route));
 
     it('render given array with an additional flow item', async () => {
       (await displayedPersons()).should.eql([...persons, emptyPerson]);

package.json

@@ -25,11 +25,11 @@
   "typings": "index.d.ts",
   "scripts": {
     "all": "run-s fix clean build e2e.update e2e",
-    "clean": "rimraf aot coverage dist tmp",
+    "clean": "rimraf coverage dist tmp",
     "prefix": "prettier --write --single-quote --trailing-comma all 'src/**/*.{ts,js}' 'e2e/src/**/*.{ts,js}' '*.{ts,js}'",
-    "fix": "tslint --fix --type-check --project tsconfig.json 'src/**/*.ts' 'e2e/src/**/*.ts' '*.ts'",
+    "fix": "tslint --fix --project tsconfig.json 'src/**/*.ts' 'e2e/src/**/*.ts' '*.ts'",
     "prelint": "prettier -l --single-quote --trailing-comma all 'src/**/*.{ts,js}' 'e2e/src/**/*.{ts,js}' '*.{ts,js}'",
-    "lint": "tslint --type-check --project tsconfig.json 'src/**/*.ts' 'e2e/src/**/*.ts' '*.ts'",
+    "lint": "tslint --project tsconfig.json 'src/**/*.ts' 'e2e/src/**/*.ts' '*.ts'",
     "test": "karma start",
     "t": "karma start --no-single-run",
     "compile": "run-s compile.ngc compile.bundle",
@@ -52,18 +52,18 @@
     "e2e.edge.protractor": "protractor tmp/protractor-edge.conf.js"
   },
   "peerDependencies": {
-    "@angular/core": "^4.0.0",
+    "@angular/core": "^5.0.0",
     "rxjs": "^5.1.0"
   },
   "devDependencies": {
-    "@angular/common": "^4.2.3",
-    "@angular/compiler": "^4.2.3",
-    "@angular/compiler-cli": "^4.2.3",
-    "@angular/core": "^4.2.3",
-    "@angular/forms": "^4.2.3",
-    "@angular/platform-browser": "^4.2.3",
-    "@angular/platform-browser-dynamic": "^4.2.3",
-    "@angular/router": "^4.2.3",
+    "@angular/common": "^5.0.0",
+    "@angular/compiler": "^5.0.0",
+    "@angular/compiler-cli": "^5.0.0",
+    "@angular/core": "^5.0.0",
+    "@angular/forms": "^5.0.0",
+    "@angular/platform-browser": "^5.0.0",
+    "@angular/platform-browser-dynamic": "^5.0.0",
+    "@angular/router": "^5.0.0",
     "@ngtools/webpack": "^1.3.3",
     "@types/chai": "^4.0.0",
     "@types/chai-as-promised": "^7.1.0",
@@ -74,7 +74,7 @@
     "@types/webpack": "^3.0.3",
     "@types/webpack-dev-server": "^2.4.0",
     "chai": "^4.0.2",
-    "codelyzer": "^3.1.1",
+    "codelyzer": "^4.0.0",
     "copyfiles": "^1.0.0",
     "html-webpack-plugin": "^2.28.0",
     "karma": "^1.7.0",
@@ -97,7 +97,7 @@
     "tslint": "^5.3.2",
     "tslint-microsoft-contrib": "^5.0.0",
     "tsutils": "^2.4.0",
-    "typescript": "^2.3.3",
+    "typescript": "~2.4.2",
     "wait-on": "^2.0.2",
     "webpack": "^3.0.0",
     "webpack-dev-server": "^2.4.2",

rollup.config.js

@@ -10,7 +10,16 @@ export default {
     '@angular/core': 'ng.core',
     'rxjs/Observable': 'Rx',
     'rxjs/Subject': 'Rx',
-    'rxjs/observable/merge': 'Rx',
-    'rxjs/observable/timer': 'Rx',
+    'rxjs/observable/merge': 'Rx.Observable',
+    'rxjs/observable/timer': 'Rx.Observable',
+    'rxjs/operators/debounce': 'Rx.operators',
+    'rxjs/operators/distinct': 'Rx.operators',
+    'rxjs/operators/map': 'Rx.operators',
+    'rxjs/operators/mapTo': 'Rx.operators',
+    'rxjs/operators/merge': 'Rx.operators',
+    'rxjs/operators/mergeMap': 'Rx.operators',
+    'rxjs/operators/toArray': 'Rx.operators',
+    'rxjs/operators/window': 'Rx.operators',
+    'rxjs/operators/withLatestFrom': 'Rx.operators',
   },
 };

src/service/focus-tracker.ts

@@ -1,16 +1,16 @@
 import { Injectable } from '@angular/core';
-import 'rxjs/add/operator/debounce';
-import 'rxjs/add/operator/distinct';
-import 'rxjs/add/operator/map';
-import 'rxjs/add/operator/mapTo';
-import 'rxjs/add/operator/merge';
-import 'rxjs/add/operator/mergeAll';
-import 'rxjs/add/operator/toArray';
-import 'rxjs/add/operator/window';
-import 'rxjs/add/operator/withLatestFrom';
 import { Observable } from 'rxjs/Observable';
-import { merge } from 'rxjs/observable/merge';
+import { merge as mergeObservables } from 'rxjs/observable/merge';
 import { timer } from 'rxjs/observable/timer';
+import { debounce } from 'rxjs/operators/debounce';
+import { distinct } from 'rxjs/operators/distinct';
+import { map } from 'rxjs/operators/map';
+import { mapTo } from 'rxjs/operators/mapTo';
+import { merge } from 'rxjs/operators/merge';
+import { mergeMap } from 'rxjs/operators/mergeMap';
+import { toArray } from 'rxjs/operators/toArray';
+import { window } from 'rxjs/operators/window';
+import { withLatestFrom } from 'rxjs/operators/withLatestFrom';
 import { Subject } from 'rxjs/Subject';
 import { ArrayManager } from '../service/array-manager';
 
@@ -23,20 +23,23 @@ export class FocusTracker<T> {
   public focusout$: Subject<FocusEvent<T>> = new Subject();
 
   constructor(private manager: ArrayManager<T>) {
-    const currentlyFocused$: Observable<T | null> = this.focusin$
-      .map(e => e.element)
-      .merge(this.focusout$.mapTo(null));
+    const currentlyFocused$: Observable<T | null> = this.focusin$.pipe(
+      map(e => e.element),
+      merge(this.focusout$.pipe(mapTo(null))),
+    );
 
-    const check$: Observable<T[]> = this.focusout$
-      .map(e => e.element)
-      .window(
-        merge(this.focusin$, this.focusout$).debounce(e => timer(e.debounce)),
-      )
-      .map(win => win.distinct().toArray())
-      .mergeAll()
-      .withLatestFrom(currentlyFocused$, (arr: T[], curr: T) =>
+    const check$: Observable<T[]> = this.focusout$.pipe(
+      map(e => e.element),
+      window(
+        mergeObservables(this.focusin$, this.focusout$).pipe(
+          debounce(e => timer(e.debounce)),
+        ),
+      ),
+      mergeMap(win => win.pipe(distinct(), toArray())),
+      withLatestFrom(currentlyFocused$, (arr: T[], curr: T) =>
         arr.filter(elem => elem !== curr),
-      );
+      ),
+    );
 
     check$.subscribe(elems => this.manager.checkItems(elems));
   }

tsconfig.json

@@ -14,17 +14,6 @@
     "sourceMap": true,
     "outDir": "tmp"
   },
-  "include": [
-    "**/*.ts"
-  ],
-  "exclude": [
-    "aot",
-    "dist",
-    "node_modules",
-    "tmp"
-  ],
-  "angularCompilerOptions": {
-    "skipMetadataEmit": false,
-    "skipTemplateCodegen": true
-  }
+  "include": ["**/*.ts"],
+  "exclude": ["dist", "node_modules", "tmp"]
 }

tsconfig.prod.json

@@ -7,6 +7,7 @@
   "include": [],
   "files": ["src/index.ts"],
   "angularCompilerOptions": {
-    "genDir": "aot"
+    "skipMetadataEmit": false,
+    "skipTemplateCodegen": true
   }
 }

tslint.json

@@ -7,6 +7,7 @@
   "extends": "tslint:latest",
   "typeCheck": true,
   "rules": {
+    "no-implicit-dependencies": false,
     // codelyzer rules
 
     // The rule have the following arguments:
@@ -42,9 +43,7 @@
       true,
       "Directive"
     ],
-    "templates-use-public": true,
     "no-access-missing-member": false,
-    "invoke-injectable": true,
     // tslint ms contrib settings
     /**
     * Security Rules. The following rules should be turned on because they find security issues

webpack.config.e2e.ts

@@ -5,7 +5,7 @@ const path = require('path');
 const resolvePath = path.resolve.bind(path, __dirname);
 
 const HtmlWebpackPlugin = require('html-webpack-plugin');
-const { AotPlugin } = require('@ngtools/webpack');
+const { AngularCompilerPlugin } = require('@ngtools/webpack');
 
 const config: webpack.Configuration = {
   context: resolvePath(),
@@ -21,7 +21,7 @@ const config: webpack.Configuration = {
     new HtmlWebpackPlugin({
       template: resolvePath('e2e/src/index.html'),
     }),
-    new AotPlugin({
+    new AngularCompilerPlugin({
       tsConfigPath: resolvePath('tsconfig.json'),
       mainPath: resolvePath('e2e/src/e2e-main.ts'),
     }),
@@ -34,7 +34,7 @@ const config: webpack.Configuration = {
   module: {
     rules: [
       {
-        test: /\.ts$/,
+        test: /(?:\.ngfactory\.js|\.ngstyle\.js|\.ts)$/,
         loader: '@ngtools/webpack',
       },
     ],