Support angular 4

CHANGELOG.md

@@ -1,3 +1,9 @@
+## Unreleased
+
+### Features
+
+- Support for Angular 4 RC has been provided ([#386](https://github.com/DevExpress/devextreme-angular/issues/386)).
+
 ## 16.2.5
 
 ### Features

gulpfile.js

@@ -217,7 +217,7 @@ gulp.task('clean.tests', function () {
     return del([outputFolderPath]);
 });
 
-gulp.task('build.tests', ['build.components', 'clean.tests'], function() {
+gulp.task('build.tests', ['clean.tests'], function() {
     var config = buildConfig.components,
         testConfig = buildConfig.tests;
 
@@ -232,21 +232,21 @@ gulp.task('watch.spec', function() {
     gulp.watch(buildConfig.components.tsTestSrc, ['build.tests']);
 });
 
-gulp.task('test.components', ['build.tests'], function(done) {
+gulp.task('test.components', function(done) {
     new karmaServer({
         configFile: __dirname + '/karma.conf.js'
     }, done).start();
 });
 
-gulp.task('test.components.debug', ['build.tests'], function(done) {
+gulp.task('test.components.debug', function(done) {
     new karmaServer({
         configFile: __dirname + '/karma.conf.js',
         browsers: [ 'Chrome' ],
         singleRun: false
     }, done).start();
 });
 
-gulp.task('test.tools', ['build.tools'], function(done) {
+gulp.task('test.tools', function(done) {
     var config = buildConfig.tools.tests;
 
     return gulp.src(config.srcFilesPattern)
@@ -265,13 +265,19 @@ gulp.task('test.tools', ['build.tools'], function(done) {
         }));
 });
 
-gulp.task('test', function(done) {
+gulp.task('run.tests', function(done) {
     runSequence(
         ['test.tools', 'test.components'],
         'lint',
         done);
 });
 
+gulp.task('test', function(done) {
+    runSequence(
+        'build', 'build.tests', 'run.tests',
+        done);
+});
+
 gulp.task('watch.test', function(done) {
     new karmaServer({
         configFile: __dirname + '/karma.conf.js'

package.json

@@ -16,18 +16,17 @@
   "author": "Developer Express Inc.",
   "license": "MIT",
   "dependencies": {
-    "@types/jquery": "^2.0.0 || ^3.0.0",
-    "jquery": "^2.0.0 || ^3.0.0"
+    "@types/jquery": "2.0.0 - 3.1",
+    "jquery": "2.0.0 - 3.1"
   },
   "peerDependencies": {
     "devextreme": "~16.2.4",
-    "@angular/core": "^2.2.1",
-    "@angular/common": "^2.2.1",
-    "@angular/forms": "^2.2.1"
+    "@angular/core": "^2.2.1 || ^4.0.0-rc.1",
+    "@angular/common": "^2.2.1 || ^4.0.0-rc.1",
+    "@angular/forms": "^2.2.1 || ^4.0.0-rc.1"
   },
   "devDependencies": {
     "devextreme": "~16.2.4",
-    "jquery": "^2.0.0 || ^3.0.0",
     "zone.js": "^0.7.2",
     "@angular/core": "^2.2.1",
     "@angular/common": "^2.2.1",

shippable.yml

@@ -21,4 +21,6 @@ build:
 
   ci:
     - shippable_retry npm install --unsafe-perm
-    - gulp test
+    - gulp test
+    - shippable_retry npm install @angular/core@~4.0.0-0 @angular/common@~4.0.0-0 @angular/forms@~4.0.0-0 @angular/compiler@~4.0.0-0 @angular/platform-browser@~4.0.0-0 @angular/platform-browser-dynamic@~4.0.0-0 --unsafe-perm
+    - gulp run.tests

src/core/iterable-differ-helper.ts

@@ -1,10 +1,7 @@
 import {
     Injectable,
     SimpleChanges,
-    IterableDiffers,
-    IterableDiffer,
-    ChangeDetectorRef,
-    DefaultIterableDiffer
+    IterableDiffers
 } from '@angular/core';
 
 import {
@@ -15,9 +12,9 @@ import {
 export class IterableDifferHelper {
 
     private _host: DxComponent;
-    private _propertyDiffers: { [id: string]: IterableDiffer; } = {};
+    private _propertyDiffers: { [id: string]: any; } = {};
 
-    constructor(private _differs: IterableDiffers, private _cdr: ChangeDetectorRef) { }
+    constructor(private _differs: IterableDiffers) { }
 
     setHost(host: DxComponent) {
         this._host = host;
@@ -29,7 +26,7 @@ export class IterableDifferHelper {
             if (value && Array.isArray(value)) {
                 if (!this._propertyDiffers[prop]) {
                     try {
-                        this._propertyDiffers[prop] = this._differs.find(value).create(this._cdr, null);
+                        this._propertyDiffers[prop] = this._differs.find(value).create(null);
                     } catch (e) { }
                 }
             } else {
@@ -40,7 +37,7 @@ export class IterableDifferHelper {
 
     doCheck(prop: string) {
         if (this._propertyDiffers[prop]) {
-            const changes = <DefaultIterableDiffer>this._propertyDiffers[prop].diff(this._host[prop]);
+            const changes = this._propertyDiffers[prop].diff(this._host[prop]);
             if (changes && this._host.instance) {
                 this._host.instance.option(prop, this._host[prop]);
             }

src/tsconfig.json

@@ -11,7 +11,7 @@
         "declaration": true,
         "noUnusedParameters": true,
         "noUnusedLocals": true,
-        "lib": ["es2015", "dom"]
+        "lib": ["es2015", "es2015.iterable", "dom"]
     },
     "filesGlob": [
         "**/*.ts"

templates/component.tst

@@ -116,6 +116,12 @@ export class <#= it.className #>Component extends <#= baseClass #> <#? implement
     }
 
     protected _createInstance(element, options) {
+        // =========== WORKAROUND =============
+        // https://github.com/angular/angular/issues/15143
+        if (element.firstChild && element.firstChild.nodeType === Node.COMMENT_NODE) {
+            element.removeChild(element.firstChild);
+        }
+        // =========== /WORKAROUND =============
         <#? it.isEditor #>let widget = new <#= it.className #>(element, options);
         if (this.validator) {
             this.validator.createInstance(element);