Angular 5 compatibility (wip)

.angular-cli.json

@@ -38,13 +38,16 @@
     },
     "lint": [
         {
-            "project": "src/tsconfig.app.json"
+            "project": "src/tsconfig.app.json",
+            "exclude": "**/node_modules/**"
         },
         {
-            "project": "src/tsconfig.spec.json"
+            "project": "src/tsconfig.spec.json",
+            "exclude": "**/node_modules/**"
         },
         {
-            "project": "e2e/tsconfig.e2e.json"
+            "project": "e2e/tsconfig.e2e.json",
+            "exclude": "**/node_modules/**"
         }
     ],
     "test": {

e2e/app.e2e-spec.ts

@@ -1,14 +1,14 @@
-import { Fuse2Page } from './app.po';
+import { AppPage } from './app.po';
 
-describe('fuse2 App', () => {
+describe('angular5 App', () => {
-  let page: Fuse2Page;
+    let page: AppPage;
 
-  beforeEach(() => {
+    beforeEach(() => {
-    page = new Fuse2Page();
+        page = new AppPage();
-  });
+    });
 
-  it('should display welcome message', () => {
+    it('should display welcome message', () => {
-    page.navigateTo();
+        page.navigateTo();
-    expect(page.getParagraphText()).toEqual('Welcome to app!!');
+        expect(page.getParagraphText()).toEqual('Welcome to app!');
-  });
+    });
 });

e2e/app.po.ts

@@ -1,11 +1,14 @@
-import { browser, by, element } from 'protractor';
+import { AppPage } from './app.po';
 
-export class Fuse2Page {
+describe('Fuse App', () => {
-  navigateTo() {
+    let page: AppPage;
-    return browser.get('/');
-  }
 
-  getParagraphText() {
+    beforeEach(() => {
-    return element(by.css('app-root h1')).getText();
+        page = new AppPage();
-  }
+    });
-}
+
+    it('should display welcome message', () => {
+        page.navigateTo();
+        expect(page.getParagraphText()).toEqual('Welcome to app!');
+    });
+});

e2e/tsconfig.e2e.json

@@ -2,10 +2,12 @@
   "extends": "../tsconfig.json",
   "compilerOptions": {
     "outDir": "../out-tsc/e2e",
+    "baseUrl": "./",
     "module": "commonjs",
     "target": "es5",
     "types": [
       "jasmine",
+      "jasminewd2",
       "node"
     ]
   }

karma.conf.js

@@ -1,33 +1,33 @@
 // Karma configuration file, see link for more information
-// https://karma-runner.github.io/0.13/config/configuration-file.html
+// https://karma-runner.github.io/1.0/config/configuration-file.html
 
 module.exports = function (config) {
-  config.set({
+    config.set({
-    basePath: '',
+        basePath: '',
-    frameworks: ['jasmine', '@angular/cli'],
+        frameworks: ['jasmine', '@angular/cli'],
-    plugins: [
+        plugins: [
-      require('karma-jasmine'),
+            require('karma-jasmine'),
-      require('karma-chrome-launcher'),
+            require('karma-chrome-launcher'),
-      require('karma-jasmine-html-reporter'),
+            require('karma-jasmine-html-reporter'),
-      require('karma-coverage-istanbul-reporter'),
+            require('karma-coverage-istanbul-reporter'),
-      require('@angular/cli/plugins/karma')
+            require('@angular/cli/plugins/karma')
-    ],
+        ],
-    client:{
+        client:{
-      clearContext: false // leave Jasmine Spec Runner output visible in browser
+            clearContext: false // leave Jasmine Spec Runner output visible in browser
-    },
+        },
-    coverageIstanbulReporter: {
+        coverageIstanbulReporter: {
-      reports: [ 'html', 'lcovonly' ],
+            reports: [ 'html', 'lcovonly' ],
-      fixWebpackSourcePaths: true
+            fixWebpackSourcePaths: true
-    },
+        },
-    angularCli: {
+        angularCli: {
-      environment: 'dev'
+            environment: 'dev'
-    },
+        },
-    reporters: ['progress', 'kjhtml'],
+        reporters: ['progress', 'kjhtml'],
-    port: 9876,
+        port: 9876,
-    colors: true,
+        colors: true,
-    logLevel: config.LOG_INFO,
+        logLevel: config.LOG_INFO,
-    autoWatch: true,
+        autoWatch: true,
-    browsers: ['Chrome'],
+        browsers: ['Chrome'],
-    singleRun: false
+        singleRun: false
-  });
+    });
 };

package.json

@@ -15,29 +15,29 @@
   },
   "private": true,
   "dependencies": {
-    "@agm/core": "1.0.0-beta.1",
+    "@agm/core": "1.0.0-beta.2",
-    "@angular/animations": "4.4.6",
+    "@angular/animations": "5.0.0",
     "@angular/cdk": "2.0.0-beta.12",
-    "@angular/common": "4.4.6",
+    "@angular/common": "5.0.0",
-    "@angular/compiler": "4.4.6",
+    "@angular/compiler": "5.0.0",
-    "@angular/core": "4.4.6",
+    "@angular/core": "5.0.0",
-    "@angular/flex-layout": "2.0.0-beta.9",
+    "@angular/flex-layout": "2.0.0-beta.10",
-    "@angular/forms": "4.4.6",
+    "@angular/forms": "5.0.0",
-    "@angular/http": "4.4.6",
+    "@angular/http": "5.0.0",
     "@angular/material": "2.0.0-beta.12",
-    "@angular/platform-browser": "4.4.6",
+    "@angular/platform-browser": "5.0.0",
-    "@angular/platform-browser-dynamic": "4.4.6",
+    "@angular/platform-browser-dynamic": "5.0.0",
-    "@angular/router": "4.4.6",
+    "@angular/router": "5.0.0",
     "@ngx-translate/core": "8.0.0",
-    "@swimlane/ngx-charts": "6.0.2",
+    "@swimlane/ngx-charts": "6.1.0",
-    "@swimlane/ngx-datatable": "9.3.1",
+    "@swimlane/ngx-datatable": "10.4.0",
     "@swimlane/ngx-dnd": "3.0.0",
-    "angular-calendar": "0.21.2",
+    "angular-calendar": "0.21.3",
-    "angular-in-memory-web-api": "0.5.0",
+    "angular-in-memory-web-api": "0.5.1",
     "angular2-markdown": "1.6.0",
     "classlist.js": "1.1.20150312",
     "core-js": "2.5.1",
-    "d3": "4.10.0",
+    "d3": "4.11.0",
     "hammerjs": "2.0.8",
     "highlight.js": "9.12.0",
     "intl": "1.2.5",
@@ -45,30 +45,30 @@
     "ngx-color-picker": "4.4.0",
     "ngx-cookie-service": "1.0.9",
     "perfect-scrollbar": "1.0.3",
-    "rxjs": "5.4.3",
+    "rxjs": "5.5.2",
     "web-animations-js": "2.3.1",
     "zone.js": "0.8.18"
   },
   "devDependencies": {
-    "@angular/cli": "1.4.7",
+    "@angular/cli": "1.5.0",
-    "@angular/compiler-cli": "4.4.6",
+    "@angular/compiler-cli": "5.0.0",
-    "@angular/language-service": "4.4.6",
+    "@angular/language-service": "5.0.0",
     "@angularclass/hmr": "2.1.3",
-    "@types/jasmine": "2.6.0",
+    "@types/jasmine": "2.5.54",
-    "@types/jasminewd2": "2.0.2",
+    "@types/jasminewd2": "2.0.3",
-    "@types/node": "6.0.88",
+    "@types/node": "6.0.90",
-    "codelyzer": "3.2.0",
+    "codelyzer": "3.2.2",
-    "jasmine-core": "2.6.2",
+    "jasmine-core": "2.6.4",
-    "jasmine-spec-reporter": "4.1.0",
+    "jasmine-spec-reporter": "4.1.1",
     "karma": "1.7.1",
     "karma-chrome-launcher": "2.1.1",
     "karma-cli": "1.0.1",
-    "karma-coverage-istanbul-reporter": "1.2.1",
+    "karma-coverage-istanbul-reporter": "1.3.0",
     "karma-jasmine": "1.1.0",
     "karma-jasmine-html-reporter": "0.2.2",
     "protractor": "5.1.2",
-    "ts-node": "3.2.0",
+    "ts-node": "3.2.2",
     "tslint": "5.7.0",
-    "typescript": "2.3.3"
+    "typescript": "2.4.2"
   }
 }

protractor.conf.js

@@ -4,25 +4,25 @@
 const { SpecReporter } = require('jasmine-spec-reporter');
 
 exports.config = {
-  allScriptsTimeout: 11000,
+    allScriptsTimeout: 11000,
-  specs: [
+    specs: [
-    './e2e/**/*.e2e-spec.ts'
+        './e2e/**/*.e2e-spec.ts'
-  ],
+    ],
-  capabilities: {
+    capabilities: {
-    'browserName': 'chrome'
+        'browserName': 'chrome'
-  },
+    },
-  directConnect: true,
+    directConnect: true,
-  baseUrl: 'http://localhost:4200/',
+    baseUrl: 'http://localhost:4200/',
-  framework: 'jasmine',
+    framework: 'jasmine',
-  jasmineNodeOpts: {
+    jasmineNodeOpts: {
-    showColors: true,
+        showColors: true,
-    defaultTimeoutInterval: 30000,
+        defaultTimeoutInterval: 30000,
-    print: function() {}
+        print: function() {}
-  },
+    },
-  onPrepare() {
+    onPrepare() {
-    require('ts-node').register({
+        require('ts-node').register({
-      project: 'e2e/tsconfig.e2e.json'
+            project: 'e2e/tsconfig.e2e.json'
-    });
+        });
-    jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } }));
+        jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } }));
-  }
+    }
 };

src/polyfills.ts

@@ -39,14 +39,17 @@ import 'core-js/es7/array';
 /** IE10 and IE11 requires the following for NgClass support on SVG elements */
 import 'classlist.js';  // Run `npm install --save classlist.js`.
 
-/** IE10 and IE11 requires the following to support `@angular/animation`. */
+/** IE10 and IE11 requires the following for the Reflect API. */
-import 'web-animations-js';  // Run `npm install --save web-animations-js`.
+import 'core-js/es6/reflect';
 
 /** Evergreen browsers require these. **/
-import 'core-js/es6/reflect';
+// Used for reflect-metadata in JIT. If you use AOT (and only Angular decorators), you can remove.
 import 'core-js/es7/reflect';
 
-/** ALL Firefox browsers require the following to support `@angular/animation`. **/
+/**
+ * Required to support Web Animations `@angular/platform-browser/animations`.
+ * Needed for: All but Chrome, Firefox and Opera. http://caniuse.com/#feat=web-animation
+ **/
 import 'web-animations-js';  // Run `npm install --save web-animations-js`.
 
 /***************************************************************************************************

src/test.ts

@@ -17,8 +17,7 @@ declare const __karma__: any;
 declare const require: any;
 
 // Prevent Karma from running prematurely.
-__karma__.loaded = function () {
+__karma__.loaded = function () {};
-};
 
 // First, initialize the Angular testing environment.
 getTestBed().initTestEnvironment(

src/tsconfig.app.json

@@ -2,8 +2,8 @@
     "extends": "../tsconfig.json",
     "compilerOptions": {
         "outDir": "../out-tsc/app",
+        "baseUrl": "./",
         "module": "es2015",
-        "baseUrl": "",
         "types": []
     },
     "exclude": [

src/tsconfig.spec.json

@@ -2,9 +2,9 @@
     "extends": "../tsconfig.json",
     "compilerOptions": {
         "outDir": "../out-tsc/spec",
+        "baseUrl": "./",
         "module": "commonjs",
         "target": "es5",
-        "baseUrl": "",
         "types": [
             "jasmine",
             "node"

src/typings.d.ts

@@ -1,7 +1,5 @@
 /* SystemJS module definition */
 declare var module: NodeModule;
-
+interface NodeModule {
-interface NodeModule
-{
     id: string;
 }