chore(dependencies): update dependencies, move to @types, some refactoring as per AngularClass/angular2-webpack-starter project

src/custom-typings.d.ts

@@ -1,31 +1,34 @@
 /*
  * Custom Type Definitions
  * When including 3rd party modules you also need to include the type definition for the module
- * if they don't provide one within the module. You can try to install it with typings
-
-typings install node --save
-
- * If you can't find the type definition in the registry we can make an ambient definition in
+ * if they don't provide one within the module. You can try to install it with @types
+ npm install @types/node
+ npm install @types/lodash
+ * If you can't find the type definition in the registry we can make an ambient/global definition in
  * this file for now. For example
-
-declare module "my-module" {
-  export function doesSomething(value: string): string;
-}
-
+ declare module "my-module" {
+ export function doesSomething(value: string): string;
+ }
+ * If you are using a CommonJS module that is using module.exports then you will have to write your
+ * types using export = yourObjectOrFunction with a namespace above it
+ * notice how we have to create a namespace that is equal to the function we're assigning the export to
+ declare module "jwt-decode" {
+ function jwtDecode(token: string): any;
+ namespace jwtDecode {}
+ export = jwtDecode;
+ }
  *
  * If you're prototying and you will fix the types later you can also declare it as type any
  *
-
-declare var assert: any;
-
+ declare var assert: any;
+ declare var _: any;
+ declare var $: any;
  *
  * If you're importing a module that uses Node.js modules which are CommonJS you need to import as
+ * in the files such as main.browser.ts or any file within app/
  *
-
-import * as _ from 'lodash'
-
- * You can include your type definitions in this file until you create one for the typings registry
- * see https://github.com/typings/registry
+ import * as _ from 'lodash'
+ * You can include your type definitions in this file until you create one for the @types
  *
  */
 
@@ -36,14 +39,38 @@ declare var AmCharts:any;
 declare var Chart:any;
 declare var Chartist:any;
 
+// support NodeJS modules without type definitions
+declare module "*";
+
 // Extra variables that live on Global that will be replaced by webpack DefinePlugin
 declare var ENV: string;
 declare var HMR: boolean;
+
 interface GlobalEnvironment {
   ENV;
   HMR;
 }
 
+interface Es6PromiseLoader {
+  (id: string): (exportName?: string) => Promise<any>;
+}
+
+type FactoryEs6PromiseLoader = () => Es6PromiseLoader;
+type FactoryPromise = () => Promise<any>;
+
+type AsyncRoutes = {
+  [component: string]: Es6PromiseLoader |
+    Function |
+    FactoryEs6PromiseLoader |
+    FactoryPromise
+};
+
+
+type IdleCallbacks = Es6PromiseLoader |
+  Function |
+  FactoryEs6PromiseLoader |
+  FactoryPromise ;
+
 interface WebpackModule {
   hot: {
     data?: any,
@@ -60,66 +87,26 @@ interface WebpackModule {
   };
 }
 
+
 interface WebpackRequire {
-  context(file: string, flag?: boolean, exp?: RegExp): any;
+  (id: string): any;
+  (paths: string[], callback: (...modules: any[]) => void): void;
+  ensure(ids: string[], callback: (req: WebpackRequire) => void, chunkName?: string): void;
+  context(directory: string, useSubDirectories?: boolean, regExp?: RegExp): WebpackContext;
 }
 
+interface WebpackContext extends WebpackRequire {
+  keys(): string[];
+}
 
 interface ErrorStackTraceLimit {
   stackTraceLimit: number;
 }
 
 
-
 // Extend typings
 interface NodeRequire extends WebpackRequire {}
 interface ErrorConstructor extends ErrorStackTraceLimit {}
+interface NodeRequireFunction extends Es6PromiseLoader  {}
 interface NodeModule extends WebpackModule {}
 interface Global extends GlobalEnvironment  {}
-
-
-declare namespace Reflect {
-  function decorate(decorators: ClassDecorator[], target: Function): Function;
-  function decorate(
-    decorators: (PropertyDecorator | MethodDecorator)[],
-    target: Object,
-    targetKey: string | symbol,
-    descriptor?: PropertyDescriptor): PropertyDescriptor;
-
-  function metadata(metadataKey: any, metadataValue: any): {
-    (target: Function): void;
-    (target: Object, propertyKey: string | symbol): void;
-  };
-  function defineMetadata(metadataKey: any, metadataValue: any, target: Object): void;
-  function defineMetadata(
-    metadataKey: any,
-    metadataValue: any,
-    target: Object,
-    targetKey: string | symbol): void;
-  function hasMetadata(metadataKey: any, target: Object): boolean;
-  function hasMetadata(metadataKey: any, target: Object, targetKey: string | symbol): boolean;
-  function hasOwnMetadata(metadataKey: any, target: Object): boolean;
-  function hasOwnMetadata(metadataKey: any, target: Object, targetKey: string | symbol): boolean;
-  function getMetadata(metadataKey: any, target: Object): any;
-  function getMetadata(metadataKey: any, target: Object, targetKey: string | symbol): any;
-  function getOwnMetadata(metadataKey: any, target: Object): any;
-  function getOwnMetadata(metadataKey: any, target: Object, targetKey: string | symbol): any;
-  function getMetadataKeys(target: Object): any[];
-  function getMetadataKeys(target: Object, targetKey: string | symbol): any[];
-  function getOwnMetadataKeys(target: Object): any[];
-  function getOwnMetadataKeys(target: Object, targetKey: string | symbol): any[];
-  function deleteMetadata(metadataKey: any, target: Object): boolean;
-  function deleteMetadata(metadataKey: any, target: Object, targetKey: string | symbol): boolean;
-}
-
-
-// We need this here since there is a problem with Zone.js typings
-interface Thenable<T> {
-  then<U>(
-    onFulfilled?: (value: T) => U | Thenable<U>,
-    onRejected?: (error: any) => U | Thenable<U>): Thenable<U>;
-  then<U>(
-    onFulfilled?: (value: T) => U | Thenable<U>,
-    onRejected?: (error: any) => void): Thenable<U>;
-  catch<U>(onRejected?: (error: any) => U | Thenable<U>): Thenable<U>;
-}

src/index.html

@@ -1,31 +1,18 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
+  <meta charset="utf-8">
+  <meta http-equiv="x-ua-compatible" content="ie=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
 
   <title><%= webpackConfig.metadata.title %></title>
 
-  <meta charset="utf-8">
-  <meta http-equiv="X-UA-Compatible" content="IE=edge">
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-
   <meta name="description" content="<%= webpackConfig.metadata.description %>">
 
-  <link rel="apple-touch-icon" sizes="57x57" href="assets/icon/apple-icon-57x57.png?v=2">
-  <link rel="apple-touch-icon" sizes="60x60" href="assets/icon/apple-icon-60x60.png?v=2">
-  <link rel="apple-touch-icon" sizes="72x72" href="assets/icon/apple-icon-72x72.png?v=2">
-  <link rel="apple-touch-icon" sizes="76x76" href="assets/icon/apple-icon-76x76.png?v=2">
-  <link rel="apple-touch-icon" sizes="114x114" href="assets/icon/apple-icon-114x114.png?v=2">
-  <link rel="apple-touch-icon" sizes="120x120" href="assets/icon/apple-icon-120x120.png?v=2">
-  <link rel="apple-touch-icon" sizes="144x144" href="assets/icon/apple-icon-144x144.png?v=2">
-  <link rel="apple-touch-icon" sizes="152x152" href="assets/icon/apple-icon-152x152.png?v=2">
-  <link rel="apple-touch-icon" sizes="180x180" href="assets/icon/apple-icon-180x180.png?v=2">
-  <link rel="icon" type="image/png" sizes="192x192" href="assets/icon/android-icon-192x192.png?v=2">
-  <link rel="icon" type="image/png" sizes="32x32" href="assets/icon/favicon-32x32.png?v=2">
-  <link rel="icon" type="image/png" sizes="96x96" href="assets/icon/favicon-96x96.png?v=2">
-  <link rel="icon" type="image/png" sizes="16x16" href="assets/icon/favicon-16x16.png?v=2">
-  <meta name="msapplication-TileColor" content="#ffffff">
-  <meta name="msapplication-TileImage" content="assets/icon/ms-icon-144x144.png?v=2">
-  <meta name="theme-color" content="#4691d1">
+  <% if (webpackConfig.htmlElements.headTags) { %>
+  <!-- Configured Head Tags  -->
+  <%= webpackConfig.htmlElements.headTags %>
+  <% } %>
 
   <!-- base url -->
   <base href="<%= webpackConfig.metadata.baseUrl %>">
@@ -40,9 +27,9 @@
   <div></div>
 </div>
 
-<% if (webpackConfig.metadata.ENV === 'development') { %>
-  <!-- Webpack Dev Server reload -->
-  <script src="/webpack-dev-server.js"></script>
+<% if (webpackConfig.metadata.isDevServer && webpackConfig.metadata.HMR !== true) { %>
+<!-- Webpack Dev Server reload -->
+<script src="/webpack-dev-server.js"></script>
 <% } %>
 
 <link

src/main.browser.ts

@@ -1,20 +1,20 @@
 /*
  * Providers provided by Angular
  */
-import {bootstrap} from '@angular/platform-browser-dynamic';
+import { bootstrap } from '@angular/platform-browser-dynamic';
 /*
  * Platform and Environment
  * our providers/directives/pipes
  */
-import {DIRECTIVES, PIPES, PROVIDERS} from './platform/browser';
-import {ENV_PROVIDERS} from './platform/environment';
+import { PLATFORM_PROVIDERS } from './platform/browser';
+import { ENV_PROVIDERS, decorateComponentRef } from './platform/environment';
+
 
 /*
  * App Component
  * our top level component that holds all of our components
  */
-import {App, APP_PROVIDERS} from './app';
-
+import { App, APP_PROVIDERS } from './app';
 
 /*
  * Bootstrap our Angular app with a top level component `App` and inject
@@ -23,13 +23,13 @@ import {App, APP_PROVIDERS} from './app';
 export function main(initialHmrState?: any): Promise<any> {
 
   return bootstrap(App, [
-    ...PROVIDERS,
+    // To add more vendor providers please look in the platform/ folder
+    ...PLATFORM_PROVIDERS,
     ...ENV_PROVIDERS,
-    ...DIRECTIVES,
-    ...PIPES,
-    ...APP_PROVIDERS
+    ...APP_PROVIDERS,
   ])
-  .catch(err => console.error(err));
+    .then(decorateComponentRef)
+    .catch(err => console.error(err));
 
 }
 
@@ -51,6 +51,6 @@ if ('development' === ENV && HMR === true) {
   let ngHmr = require('angular2-hmr');
   ngHmr.hotModuleReplacement(main, module);
 } else {
-  // bootstrap when documetn is ready
+  // bootstrap when document is ready
   document.addEventListener('DOMContentLoaded', () => main());
 }

src/platform/browser-directives.ts

@@ -1,11 +1,10 @@
 /*
  * These are globally available directives in any template
  */
-
-import {PLATFORM_DIRECTIVES} from '@angular/core';
-
+// Angular 2
+import { PLATFORM_DIRECTIVES } from '@angular/core';
 // Angular 2 Router
-import {ROUTER_DIRECTIVES} from '@angular/router';
+import { ROUTER_DIRECTIVES } from '@angular/router';
 // Angular 2 forms
 import { REACTIVE_FORM_DIRECTIVES } from '@angular/forms';
 
@@ -16,5 +15,5 @@ export const APPLICATION_DIRECTIVES = [
 ];
 
 export const DIRECTIVES = [
-  {provide: PLATFORM_DIRECTIVES, multi: true, useValue: APPLICATION_DIRECTIVES }
+  { provide: PLATFORM_DIRECTIVES, multi: true, useValue: APPLICATION_DIRECTIVES }
 ];

src/platform/browser-pipes.ts

@@ -2,7 +2,7 @@
  * These are globally available pipes in any template
  */
 
-import {PLATFORM_PIPES} from '@angular/core';
+import { PLATFORM_PIPES } from '@angular/core';
 
 // application_pipes: pipes that are global through out the application
 export const APPLICATION_PIPES = [
@@ -10,5 +10,5 @@ export const APPLICATION_PIPES = [
 ];
 
 export const PIPES = [
-  {provide: PLATFORM_PIPES, multi: true, useValue: APPLICATION_PIPES }
+  { provide: PLATFORM_PIPES, multi: true, useValue: APPLICATION_PIPES }
 ];

src/platform/browser-providers.ts

@@ -3,15 +3,16 @@
  */
 
 // Angular 2
-import {FORM_PROVIDERS, LocationStrategy, HashLocationStrategy} from '@angular/common';
-
+import { HashLocationStrategy, LocationStrategy } from '@angular/common';
 // Angular 2 Http
-import {HTTP_PROVIDERS} from '@angular/http';
-import {APP_ROUTER_PROVIDERS} from '../../app/app.routes';
-
-
+import { HTTP_PROVIDERS } from '@angular/http';
+// Angular 2 Router
+import { provideRouter } from '@angular/router';
 // Angular 2 forms
-import {disableDeprecatedForms, provideForms} from '@angular/forms';
+import { disableDeprecatedForms, provideForms } from '@angular/forms';
+
+
+import { routes } from '../app/app.routes';
 
 /*
  * Application Providers/Directives/Pipes
@@ -21,10 +22,12 @@ export const APPLICATION_PROVIDERS = [
   // new Angular 2 forms
   disableDeprecatedForms(),
   provideForms(),
+
+  provideRouter(routes),
+
   ...HTTP_PROVIDERS,
-  ...APP_ROUTER_PROVIDERS,
-  {provide: LocationStrategy, useClass: HashLocationStrategy},
-  {provide: LocationStrategy, useClass: HashLocationStrategy}
+
+  { provide: LocationStrategy, useClass: HashLocationStrategy }
 ];
 
 export const PROVIDERS = [

src/platform/browser.ts

@@ -0,0 +1,14 @@
+export * from './browser-directives';
+export * from './browser-pipes';
+export * from './browser-providers';
+
+import { DIRECTIVES } from './browser-directives';
+import { PIPES } from './browser-pipes';
+import { PROVIDERS } from './browser-providers';
+
+
+export const PLATFORM_PROVIDERS = [
+  ...PROVIDERS,
+  ...DIRECTIVES,
+  ...PIPES
+];

src/platform/browser/index.ts

@@ -1,3 +0,0 @@
-export * from './directives';
-export * from './pipes';
-export * from './providers';

src/platform/environment.ts

@@ -1,3 +1,4 @@
+
 // Angular 2
 // rc2 workaround
 import { enableDebugTools, disableDebugTools } from '@angular/platform-browser';
@@ -23,7 +24,13 @@ if ('production' === ENV) {
 
 } else {
 
-  _decorateComponentRef = (cmpRef) => enableDebugTools(cmpRef);
+  _decorateComponentRef = (cmpRef) => {
+    let _ng = (<any>window).ng;
+    enableDebugTools(cmpRef);
+    (<any>window).ng.probe = _ng.probe;
+    (<any>window).ng.coreTokens = _ng.coreTokens;
+    return cmpRef;
+  };
 
   // Development
   PROVIDERS = [

src/polyfills.browser.ts

@@ -0,0 +1,45 @@
+// Polyfills
+
+// import 'ie-shim'; // Internet Explorer 9 support
+
+
+// import 'core-js/es6';
+// Added parts of es6 which are necessary for your project or your browser support requirements.
+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/weak-map';
+import 'core-js/es6/weak-set';
+import 'core-js/es6/typed';
+import 'core-js/es6/reflect';
+// see issue https://github.com/AngularClass/angular2-webpack-starter/issues/709
+// import 'core-js/es6/promise';
+
+import 'core-js/es7/reflect';
+import 'zone.js/dist/zone';
+
+// Typescript emit helpers polyfill
+import 'ts-helpers';
+
+if ('production' === ENV) {
+  // Production
+
+
+} else {
+  // Development
+
+  Error.stackTraceLimit = Infinity;
+
+  require('zone.js/dist/long-stack-trace-zone');
+
+}

src/polyfills.ts

@@ -1,28 +0,0 @@
-// Polyfills
-// (these modules are what are in 'angular2/bundles/angular2-polyfills' so don't use that here)
-
-// import 'ie-shim'; // Internet Explorer
-// import 'es6-shim';
-// import 'es6-promise';
-// import 'es7-reflect-metadata';
-
-// Prefer CoreJS over the polyfills above
-import 'core-js/es6';
-import 'core-js/es7/reflect';
-require('zone.js/dist/zone');
-
-// Typescript emit helpers polyfill
-import 'ts-helpers';
-
-if ('production' === ENV) {
-  // Production
-
-
-} else {
-  // Development
-
-  Error.stackTraceLimit = Infinity;
-
-  require('zone.js/dist/long-stack-trace-zone');
-
-}

src/vendor.browser.ts

@@ -8,6 +8,7 @@ import '@angular/platform-browser';
 import '@angular/platform-browser-dynamic';
 import '@angular/core';
 import '@angular/common';
+import '@angular/forms';
 import '@angular/http';
 import '@angular/router';
 
@@ -26,5 +27,6 @@ if ('production' === ENV) {
 
 } else {
   // Development
+  require('angular2-hmr');
 
 }