chore(package): upgrade to @angular/cli beta.31 (#38)

* chore(package): upgrade to @angular/cli beta.31

* refactor(form): remove deprecated lazy loading prefix

* build(cli): use CLI e2e and lint tasks

 - linting globs are now defined in angular-cli.json

Author: joshwiens

.editorconfig

@@ -1,13 +1,13 @@
-# editorconfig.org
+# Editor configuration, see http://editorconfig.org
 root = true
 
 [*]
+charset = utf-8
 indent_style = space
 indent_size = 2
-end_of_line = lf
-charset = utf-8
-trim_trailing_whitespace = true
 insert_final_newline = true
+trim_trailing_whitespace = true
 
 [*.md]
-trim_trailing_whitespace = false
+max_line_length = off
+trim_trailing_whitespace = false

.gitignore

@@ -7,11 +7,21 @@
 
 # dependencies
 /node_modules
-/bower_components
 
 # IDEs and editors
 /.idea
-/.vscode
+.project
+.classpath
+.c9/
+*.launch
+.settings/
+
+# IDE - VSCode
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
 
 # misc
 /.sass-cache
@@ -29,3 +39,4 @@ testem.log
 
 #System Files
 .DS_Store
+Thumbs.db

angular-cli.json

@@ -1,6 +1,7 @@
 {
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
   "project": {
-    "version": "1.0.0-beta.26",
+    "version": "1.0.0-beta.31",
     "name": "covalent-quickstart"
   },
   "apps": [
@@ -14,10 +15,10 @@
       ],
       "index": "index.html",
       "main": "main.ts",
+      "polyfills": "polyfills.ts",
       "test": "test.ts",
       "tsconfig": "tsconfig.json",
       "prefix": "app",
-      "mobile": false,
       "styles": [
         "styles.scss",
         "theme.scss",
@@ -35,13 +36,21 @@
       }
     }
   ],
-  "addons": [],
-  "packages": [],
   "e2e": {
     "protractor": {
       "config": "./protractor.conf.js"
     }
   },
+  "lint": [
+    {
+      "files": "src/**/*.ts",
+      "project": "src/tsconfig.json"
+    },
+    {
+      "files": "e2e/**/*.ts",
+      "project": "e2e/tsconfig.json"
+    }
+  ],
   "test": {
     "karma": {
       "config": "./karma.conf.js"
@@ -50,6 +59,17 @@
   "defaults": {
     "styleExt": "scss",
     "prefixInterfaces": false,
-    "lazyRoutePrefix": "+"
+    "inline": {
+      "style": false,
+      "template": false
+    },
+    "spec": {
+      "class": false,
+      "component": true,
+      "directive": true,
+      "module": false,
+      "pipe": true,
+      "service": true
+    }
   }
 }

e2e/dashboard.e2e.ts

@@ -1,4 +1,4 @@
-import { browser, element, by, $, protractor } from 'protractor/globals';
+import { browser, by, protractor, $,element } from 'protractor';
 
 describe('basic e2e test with loading', function(): void {
   let EC = protractor.ExpectedConditions;

e2e/tsconfig.json

@@ -4,6 +4,9 @@
     "declaration": false,
     "emitDecoratorMetadata": true,
     "experimentalDecorators": true,
+    "lib": [
+      "es2016"
+    ],
     "module": "commonjs",
     "moduleResolution": "node",
     "outDir": "../dist/out-tsc-e2e",

karma.conf.js

@@ -2,15 +2,15 @@
 // https://karma-runner.github.io/0.13/config/configuration-file.html
 
 module.exports = function (config) {
-  var configuration = {
-    basePath: '.',
-    frameworks: ['jasmine', 'angular-cli'],
+  config.set({
+    basePath: '',
+    frameworks: ['jasmine', '@angular/cli'],
     plugins: [
       require('karma-jasmine'),
       require('karma-chrome-launcher'),
+      require('karma-coverage-istanbul-reporter'),
       require('karma-firefox-launcher'),
-      require('karma-remap-istanbul'),
-      require('angular-cli/plugins/karma')
+      require('@angular/cli/plugins/karma')
     ],
     customLaunchers: {
       // chrome setup for travis CI using chromium
@@ -23,31 +23,27 @@ module.exports = function (config) {
       { pattern: './src/test.ts', watched: false }
     ],
     preprocessors: {
-      './src/test.ts': ['angular-cli']
+      './src/test.ts': ['@angular/cli']
     },
-    remapIstanbulReporter: {
-      reports: {
-        html: 'coverage',
-        lcovonly: './coverage/coverage.lcov'
-      }
+    mime: {
+      'text/x-typescript': ['ts','tsx']
+    },
+    coverageIstanbulReporter: {
+      reports: [ 'html', 'lcovonly' ],
+      fixWebpackSourcePaths: true
     },
     angularCli: {
       config: './angular-cli.json',
       environment: 'dev'
     },
-    mime: {
-      'text/x-typescript': ['ts','tsx']
-    },
-    reporters: ['progress', 'karma-remap-istanbul'],
+    reporters: config.angularCli && config.angularCli.codeCoverage
+              ? ['progress', 'coverage-istanbul']
+              : ['progress'],
     port: 9876,
     colors: true,
     logLevel: config.LOG_INFO,
     autoWatch: true,
     browsers: ['Chrome'],
     singleRun: false
-  };
-  if (process.env.TRAVIS) {
-    configuration.browsers = ['Chrome_travis_ci'];
-  }
-  config.set(configuration);
+  });
 };

package.json

@@ -9,9 +9,8 @@
     "reusable"
   ],
   "scripts": {
-    "e2e": "protractor",
-    "e2e-test": "protractor ./protractor.conf.js",
-    "lint": "tslint -c ./tslint.json \"./src/**/*.ts\" -e \"./src/**/typings.d.ts\" -e \"./src/environments/**\"",
+    "e2e": "ng e2e",
+    "lint": "ng lint",
     "reinstall": "rm -rf node_modules tmp deploy dist && npm i",
     "postinstall": "webdriver-manager update",
     "start-api": "cd mock-api && covalent-data &",
@@ -68,25 +67,22 @@
   "devDependencies": {
     "@angular/compiler-cli": "2.4.5",
     "@types/hammerjs": "2.0.30",
-    "@types/jasmine": "2.2.31",
-    "@types/node": "6.0.34",
+    "@types/jasmine": "2.5.38",
+    "@types/node": "^6.0.42",
     "@types/selenium-webdriver": "2.53.36",
-    "angular-cli": "1.0.0-beta.26",
+    "@angular/cli": "1.0.0-beta.31",
     "codelyzer": "2.0.0-beta.4",
-    "ember-cli-inject-live-reload": "1.4.0",
-    "jasmine-core": "2.4.1",
+    "jasmine-core": "2.5.2",
     "jasmine-spec-reporter": "2.5.0",
     "karma": "1.2.0",
     "karma-chrome-launcher": "2.0.0",
     "karma-cli": "1.0.1",
     "karma-jasmine": "1.0.2",
-    "karma-remap-istanbul": "0.2.1",
+    "karma-coverage-istanbul-reporter": "^0.2.0",
     "karma-firefox-launcher": "1.0.0",
     "karma-phantomjs-launcher": "1.0.1",
-    "node-sass": "3.8.0",
     "phantomjs-prebuilt": "2.1.7",
-    "protractor": "4.0.5",
-    "sass-loader": "^4.0.2",
+    "protractor": "~5.1.0",
     "ts-node": "1.2.1",
     "tslint": "^4.3.1",
     "typescript": "2.1.5"

protractor.conf.js

@@ -1,5 +1,5 @@
 // Protractor configuration file, see link for more information
-// https://github.com/angular/protractor/blob/master/docs/referenceConf.js
+// https://github.com/angular/protractor/blob/master/lib/config.ts
 
 /*global jasmine */
 var SpecReporter = require('jasmine-spec-reporter');

src/app/app.module.ts

@@ -11,7 +11,7 @@ import { AppComponent } from './app.component';
 import { MainComponent } from './main/main.component';
 import { DashboardComponent } from './dashboard/dashboard.component';
 import { UsersComponent } from './users/users.component';
-import { UsersFormComponent } from './users/+form/form.component';
+import { UsersFormComponent } from './users/form/form.component';
 import { LogsComponent } from './logs/logs.component';
 import { FormComponent } from './form/form.component';
 import { DetailComponent } from './detail/detail.component';
@@ -20,7 +20,7 @@ import { DashboardProductComponent } from './dashboard-product/dashboard-product
 import { ProductOverviewComponent } from './dashboard-product/overview/overview.component';
 import { ProductStatsComponent } from './dashboard-product/stats/stats.component';
 import { ProductFeaturesComponent } from './dashboard-product/features/features.component';
-import { FeaturesFormComponent } from './dashboard-product/features/+form/form.component';
+import { FeaturesFormComponent } from './dashboard-product/features/form/form.component';
 import { TemplatesComponent } from './templates/templates.component';
 import { DashboardTemplateComponent } from './templates/dashboard/dashboard.component';
 import { EmailTemplateComponent } from './templates/email/email.component';

src/app/app.routes.ts

@@ -6,9 +6,9 @@ import { DashboardProductComponent } from './dashboard-product/dashboard-product
 import { ProductOverviewComponent } from './dashboard-product/overview/overview.component';
 import { ProductStatsComponent } from './dashboard-product/stats/stats.component';
 import { ProductFeaturesComponent } from './dashboard-product/features/features.component';
-import { FeaturesFormComponent } from './dashboard-product/features/+form/form.component';
+import { FeaturesFormComponent } from './dashboard-product/features/form/form.component';
 import { UsersComponent } from './users/users.component';
-import { UsersFormComponent } from './users/+form/form.component';
+import { UsersFormComponent } from './users/form/form.component';
 import { LogsComponent } from './logs/logs.component';
 import { DetailComponent } from './detail/detail.component';
 import { LoginComponent } from './login/login.component';

src/app/dashboard-product/features/+form/form.component.html src/app/dashboard-product/features/form/form.component.html

@@ -1,2 +1 @@
-export {environment} from './environment';
 export {AppModule} from './app.module';

src/app/dashboard-product/features/+form/form.component.scss src/app/dashboard-product/features/form/form.component.scss

@@ -1,3 +1,8 @@
+// The file contents for the current environment will overwrite these during build.
+// The build system defaults to the dev environment which uses `environment.ts`, but if you do
+// `ng build --env=prod` then `environment.prod.ts` will be used instead.
+// The list of which env maps to which file can be found in `angular-cli.json`.
+
 export const environment = {
   production: false
 };

src/app/dashboard-product/features/+form/form.component.ts src/app/dashboard-product/features/form/form.component.ts

@@ -1,5 +1,3 @@
-import './polyfills.ts';
-
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 import { enableProdMode } from '@angular/core';
 import { environment } from './environments/environment';

src/app/environment.ts

@@ -1,21 +1,69 @@
-// This file includes polyfills needed by Angular 2 and is loaded before
-// the app. You can add your own extra polyfills to this file.
-import 'core-js/es6/symbol';
-import 'core-js/es6/object';
-import 'core-js/es6/function';
-import 'core-js/es6/parse-int';
-import 'core-js/es6/parse-float';
-import 'core-js/es6/number';
-import 'core-js/es6/math';
-import 'core-js/es6/string';
-import 'core-js/es6/date';
-import 'core-js/es6/array';
-import 'core-js/es6/regexp';
-import 'core-js/es6/map';
-import 'core-js/es6/set';
-import 'core-js/es6/reflect';
+/*tslint:disable*/
+/**
+ * This file includes polyfills needed by Angular and is loaded before the app.
+ * You can add your own extra polyfills to this file.
+ *
+ * This file is divided into 2 sections:
+ *   1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
+ *   2. Application imports. Files imported after ZoneJS that should be loaded before your main
+ *      file.
+ *
+ * The current setup is for so-called "evergreen" browsers; the last versions of browsers that
+ * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
+ * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
+ *
+ * Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html
+ */
+
+/***************************************************************************************************
+ * BROWSER POLYFILLS
+ */
+
+/** IE9, IE10 and IE11 requires all of the following polyfills. **/
+// import 'core-js/es6/symbol';
+// import 'core-js/es6/object';
+// import 'core-js/es6/function';
+// import 'core-js/es6/parse-int';
+// import 'core-js/es6/parse-float';
+// import 'core-js/es6/number';
+// import 'core-js/es6/math';
+// import 'core-js/es6/string';
+// import 'core-js/es6/date';
+// import 'core-js/es6/array';
+// import 'core-js/es6/regexp';
+// import 'core-js/es6/map';
+// import 'core-js/es6/set';
+
+/** 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`. */
+// import 'web-animations-js';  // Run `npm install --save web-animations-js`.
+
+
+/** Evergreen browsers require these. **/
+import 'core-js/es6/reflect';
 import 'core-js/es7/reflect';
-import 'zone.js/dist/zone';
 
-import 'rxjs/Rx';
+
+/** ALL Firefox browsers require the following to support `@angular/animation`. **/
+// import 'web-animations-js';  // Run `npm install --save web-animations-js`.
+
+
+
+/***************************************************************************************************
+ * Zone JS is required by Angular itself.
+ */
+import 'zone.js/dist/zone';  // Included with Angular-CLI.
+
+
+
+/***************************************************************************************************
+ * APPLICATION IMPORTS
+ */
+
+/**
+ * Date, currency, decimal and percent pipes.
+ * Needed for: All but Chrome, Firefox, Edge, IE11 and Safari 10
+ */
+// import 'intl';  // Run `npm install --save intl`.