Fix TS errors, upgrade Angular

templates/app/_package.json

@@ -54,16 +54,16 @@
     "@angularclass/match-control": "^2.0.0",
     "reflect-metadata": "^0.1.3",
     "rxjs": "^5.3.0",
-    "zone.js": "^0.7.2",
-    "@angular/common": "~2.4.9",
-    "@angular/compiler": "~2.4.9",
-    "@angular/core": "~2.4.9",
-    "@angular/forms": "~2.4.9",
-    "@angular/http": "~2.4.9",
+    "zone.js": "^0.8.4",
+    "@angular/common": "^4.3.3",
+    "@angular/compiler": "^4.3.3",
+    "@angular/core": "^4.3.3",
+    "@angular/forms": "^4.3.3",
+    "@angular/http": "^4.3.3",
+    "@angular/platform-browser": "^4.3.3",
+    "@angular/platform-browser-dynamic": "^4.3.3",
+    "@angular/router": "^4.3.3",
     <%#"@angular/material": "^2.0.0-alpha.10",%>
-    "@angular/platform-browser": "~2.4.9",
-    "@angular/platform-browser-dynamic": "~2.4.9",
-    "@angular/router": "^3.4.7",
     "@angularclass/hmr": "^1.2.1",
   <%_ if(filters.ts) { -%>
     "@types/core-js": "^0.9.41",
@@ -82,7 +82,7 @@
     "@types/webpack": "^2.2.15",
   <%_ } -%>
     "angular2-universal": "2.1.0-rc.1",
-    "angular2-jwt": "^0.1.24",
+    "angular2-jwt": "^0.1.28",
     <% if(filters.auth) { %>
     "angular-validation-match": "^1.9.0",<% } %>
     <% if(filters.uirouter) { %>

templates/app/client/__index.html

@@ -25,9 +25,6 @@
       ga('send', 'pageview');
     </script>
 
-    <app>LOADING</app>
-    <navbar></navbar>
-    <% if (filters.ngroute) { %><router-outlet></router-outlet><% } %><% if (filters.uirouter) { %><div ui-view=""></div><% } %>
-    <footer></footer>
+    <app>Loading...</app>
 </body>
 </html>

templates/app/client/app/account(auth)/account.module.js

@@ -1,20 +1,21 @@
 import { NgModule } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { BrowserModule } from '@angular/platform-browser';
-<%_ if (filters.uirouter) { -%>
+<%_ if(filters.uirouter) { -%>
 import { UIRouterModule } from 'ui-router-ng2';<% } %>
-<%_ if (filters.ngroute) { -%>
+<%_ if(filters.ngroute) { -%>
 import { RouterModule, Routes } from '@angular/router';<% } %>
 <%_ if(filters.oauth) { -%>
 import { DirectivesModule } from '../../components/directives.module';<% } %>
 
-import { STATES } from './account.routes';
+<%_ if(filters.uirouter) { -%>
+import { STATES } from './account.routes';<% } %>
 
 import { LoginComponent } from './login/login.component';
 import { SettingsComponent } from './settings/settings.component';
 import { SignupComponent } from './signup/signup.component';
 
-<%_ if (filters.ngroute) { -%>
+<%_ if(filters.ngroute) { -%>
 const accountRoutes: Routes = [{
   path: 'login',
   component: LoginComponent,
@@ -31,11 +32,11 @@ const accountRoutes: Routes = [{
     imports: [
         FormsModule,
         BrowserModule,
-        <%_ if (filters.uirouter) { -%>
+        <%_ if(filters.uirouter) { -%>
         UIRouterModule.forChild({
             states: STATES,
         }),<% } %>
-        <%_ if (filters.ngroute) { -%>
+        <%_ if(filters.ngroute) { -%>
         RouterModule.forChild(accountRoutes),<% } %>
         <%_ if(filters.oauth) { -%>
         DirectivesModule,<% } %>

templates/app/client/app/account(auth)/login/login.component.js

@@ -34,7 +34,8 @@ export class LoginComponent {
   errors = {login: undefined};
   submitted = false;
   AuthService;
-  <%_ if(filters.ngroute) { -%><% } %>
+  <%_ if(filters.ngroute) { -%>
+  Router;<% } %>
   <%_ if(filters.uirouter) { -%>
   StateService;<% } %>
 

templates/app/client/app/account(auth)/settings/settings.component.js

@@ -40,16 +40,14 @@ export class SettingsComponent {
   changePassword(form) {
     this.submitted = true;
 
-    if(form.$valid) {
-      this.AuthService.changePassword(this.user.oldPassword, this.user.newPassword)
-        .then(() => {
-          this.message = 'Password successfully changed.';
-        })
-        .catch(() => {
-          form.password.$setValidity('mongoose', false);
-          this.errors.other = 'Incorrect password';
-          this.message = '';
-        });
-    }
+    return this.AuthService.changePassword(this.user.oldPassword, this.user.newPassword)
+      .then(() => {
+        this.message = 'Password successfully changed.';
+      })
+      .catch(() => {
+        // form.password.$setValidity('mongoose', false);
+        this.errors.other = 'Incorrect password';
+        this.message = '';
+      });
   }
 }

templates/app/client/app/account(auth)/settings/settings.html

@@ -9,33 +9,31 @@ <h1>Change Password</h1>
         <div class="form-group">
           <label>Current Password</label>
 
-          <input type="password" name="password" class="form-control" [(ngModel)]="user.oldPassword" mongoose-error/>
-          <p class="help-block" [hidden]="!form.password.$error.mongoose">
-              {{ errors.other }}
+          <input type="password" name="password" class="form-control" [(ngModel)]="user.oldPassword" required #oldPassword="ngModel"/>
+          <p class="help-block" [hidden]="oldPassword.valid || !submitted">
+            Required
           </p>
         </div>
 
         <div class="form-group">
           <label>New Password</label>
 
-          <input type="password" name="newPassword" class="form-control" [(ngModel)]="user.newPassword"
-                 ng-minlength="3"
-                 required/>
+          <input type="password" name="newPassword" class="form-control" [(ngModel)]="user.newPassword" required #newPassword="ngModel"
+                 minlength="3"/>
           <p class="help-block"
-            [hidden]="!(form.newPassword.$error.minlength || form.newPassword.$error.required) || !(form.newPassword.$dirty || submitted)">
+             [hidden]="newPassword.valid || !submitted">
             Password must be at least 3 characters.
           </p>
         </div>
 
         <div class="form-group">
           <label>Confirm New Password</label>
 
-          <input type="password" name="confirmPassword" class="form-control" [(ngModel)]="user.confirmPassword"
+          <input type="password" name="confirmPassword" class="form-control" [(ngModel)]="user.confirmPassword" required #confirmPassword="ngModel"
                  match="user.newPassword"
-                 ng-minlength="3"
-                 required=""/>
+                 minlength="3"/>
           <p class="help-block"
-            [hidden]="!form.confirmPassword.$error.match || !submitted">
+             [hidden]="confirmPassword.valid || !submitted">
             Passwords must match.
           </p>
 

templates/app/client/app/account(auth)/signup/signup.component.js

@@ -2,9 +2,9 @@
 import { Component } from '@angular/core';
 <%_ if(filters.uirouter) { -%>
 import { StateService } from 'ui-router-ng2';<% } %>
-<%_ if(filters.ngroute) { -%><% } %>
+<%_ if(filters.ngroute) { -%>
+import { Router } from '@angular/router';<% } %>
 import { AuthService } from '../../../components/auth/auth.service';
-import {ANGULARCLASS_MATCH_CONTROL_DIRECTIVES} from '@angularclass/match-control';
 
 <%_ if(filters.flow) { -%>
 type User = {
@@ -21,8 +21,7 @@ interface User {
 
 @Component({
   selector: 'signup',
-  template: require('./signup.<%=templateExt%>'),
-  directives: [...ANGULARCLASS_MATCH_CONTROL_DIRECTIVES]
+  template: require('./signup.<%=templateExt%>')
 })
 export class SignupComponent {
   user: User = {
@@ -33,14 +32,16 @@ export class SignupComponent {
   errors = {};
   submitted = false;
   AuthService;
-  <%_ if(filters.ngroute) { -%><% } %>
+  <%_ if(filters.ngroute) { -%>
+  Router;<% } %>
   <%_ if(filters.uirouter) { -%>
   StateService;<% } %>
 
-  static parameters = [AuthService, <% if(filters.ngroute) { %><% } else { %>StateService<% } %>];
-  constructor(_AuthService_: AuthService, <% if(filters.ngroute) { %><% } else { %>_StateService_: StateService<% } %>) {
+  static parameters = [AuthService, <% if(filters.ngroute) { %>Router<% } else { %>StateService<% } %>];
+  constructor(_AuthService_: AuthService, <% if(filters.ngroute) { %>router: Router<% } else { %>_StateService_: StateService<% } %>) {
     this.AuthService = _AuthService_;
-    <%_ if(filters.ngroute) { -%><% } -%>
+    <%_ if(filters.ngroute) { -%>
+    this.Router = router;<% } -%>
     <%_ if(filters.uirouter) { -%>
     this.StateService = _StateService_;<% } -%>
   }
@@ -55,7 +56,7 @@ export class SignupComponent {
     })
     .then(() => {
       // Account created, redirect to home
-      <% if(filters.ngroute) { %>this.$location.path('/');<% } -%>
+      <% if(filters.ngroute) { %>this.Router.navigateByUrl('/home');<% } -%>
       <% if(filters.uirouter) { %>this.StateService.go('main');<% } -%>
     })
     .catch(err => {

templates/app/client/app/admin(auth)/admin.component.js

@@ -12,7 +12,7 @@ export class AdminComponent {
 
   <%_ } _%>
   static parameters = [UserService];
-  constructor(userService: UserService) {
+  constructor(<%= private() %>userService: UserService) {
     this.userService = userService;
     // Use the user service to fetch all users
     this.userService.query().subscribe(users => {

templates/app/client/app/admin(auth)/admin.module.js

@@ -9,7 +9,7 @@ import { AdminComponent } from './admin.component';
 
 <%_ if(filters.uirouter) { -%>
 import { STATES } from './admin.routes';<% } %>
-<%_ if (filters.ngroute) { -%>
+<%_ if(filters.ngroute) { -%>
 const adminRoutes: Routes = [{
   path: 'admin',
   component: AdminComponent,

templates/app/client/app/app.constants.js

@@ -1,6 +1,6 @@
 <%_ if(filters.babel) { -%>
 export default from '../../server/config/environment/shared';<% } %>
 <%_ if(filters.ts) { -%>
-import shared from '../../server/config/environment/shared';
+import shared from '../../server/config/environment/shared.js';
 
 export default shared;<% } %>

templates/app/client/app/app.module.js

@@ -1,57 +1,13 @@
-// import angular from 'angular';
-// // import ngAnimate from 'angular-animate';
-// import ngCookies from 'angular-cookies';
-// import ngResource from 'angular-resource';
-// import ngSanitize from 'angular-sanitize';
-// <%_ if(filters.socketio) { _%>
-// import 'angular-socket-io';<% } %>
-// <%_ if(filters.ngroute) { _%>
-// const ngRoute = require('angular-route');<% } %>
-// <%_ if(filters.uirouter) { _%>
-// import uiRouter from 'angular-ui-router';<% } %>
-// <%_ if(filters.uibootstrap) { _%>
-// import uiBootstrap from 'angular-ui-bootstrap';<% } %>
-// // import ngMessages from 'angular-messages';
-// <%_ if(filters.auth) { _%>
-// // import ngValidationMatch from 'angular-validation-match';<% } %>
-
-// import {routeConfig} from './app.config';
-
-// <%_ if(filters.auth) { _%>
-// import _Auth from '../components/auth/auth.module';
-// import account from './account';
-// import admin from './admin';<% } %>
-// import navbar from '../components/navbar/navbar.component';
-// import footer from '../components/footer/footer.component';
-// import main from './main/main.component';
-// import constants from './app.constants';
-// import util from '../components/util/util.module';
-// <%_ if(filters.socketio) { _%>
-// import socket from '../components/socket/socket.service';<% } %>
-
-//   .config(routeConfig)
-//   <%_ if(filters.auth) { _%>
-//   .run(function($rootScope, $location, Auth) {
-//     'ngInject';
-//     // Redirect to login if route requires auth and you're not logged in
-//     $rootScope.$on('$stateChangeStart', function(event, next) {
-//       Auth.isLoggedIn(function(loggedIn) {
-//         if(next.authenticate && !loggedIn) {
-//           $location.path('/login');
-//         }
-//       });
-//     });
-//   })<% } %>;
-
-
 import {
   NgModule,
   ErrorHandler,
   Injectable,
   ApplicationRef,
+  Provider,
 } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 import {
+  Http,
   HttpModule,
   BaseRequestOptions,
   RequestOptions,
@@ -60,15 +16,13 @@ import {
 import {
   removeNgStyles,
   createNewHosts,
-  disposeOldHosts,
   createInputTransfer,
-  restoreInputValues,
 } from '@angularclass/hmr';
 <%_ if (filters.uirouter) { -%>
 import { UIRouterModule } from 'ui-router-ng2';<% } %>
 <%_ if (filters.ngroute) { -%>
 import { RouterModule, Routes } from '@angular/router';<% } %>
-import { provideAuth } from 'angular2-jwt';
+import { provideAuth, AuthHttp, AuthConfig } from 'angular2-jwt';
 
 import { AppComponent } from './app.component';
 import { MainModule } from './main/main.module';
@@ -79,12 +33,19 @@ import { AdminModule } from './admin/admin.module';
 
 import constants from './app.constants';
 
-let providers = [
-  provideAuth({
-    // Allow using AuthHttp while not logged in
+export function getAuthHttp(http) {
+  return new AuthHttp(new AuthConfig({
     noJwtError: true,
-  })
-];
+    globalHeaders: [{'Accept': 'application/json'}],
+    tokenGetter: (() => localStorage.getItem('id_token')),
+  }), http);
+}
+
+let providers: Provider[] = [{
+  provide: AuthHttp,
+  useFactory: getAuthHttp,
+  deps: [Http]
+}];
 
 if(constants.env === 'development') {
   @Injectable()
@@ -134,7 +95,7 @@ const appRoutes: Routes = [
 })
 export class AppModule {
   static parameters = [ApplicationRef];
-  constructor(appRef/*: ApplicationRef*/) {
+  constructor(<%= private() %>appRef: ApplicationRef) {
     this.appRef = appRef;
   }
 

templates/app/client/app/main/main.component.js

@@ -9,14 +9,14 @@ import { SocketService } from '../../components/socket/socket.service';
     styles: [require('./main.<%=styleExt%>')],
 })
 export class MainComponent implements OnInit<% if(filters.ws) { %>, OnDestroy<% } %> {
+  Http;
   <%_ if(filters.ws) { -%>
   SocketService;<% } %>
   awesomeThings = [];
   <%_ if(filters.models) { -%>
   newThing = '';<% } %>
 
-  <%_ if(filters.babel) { -%>
-  static parameters = [Http, SocketService];<% } %>
+  static parameters = [Http, SocketService];
   constructor(<%= private() %>http: Http<% if(filters.ws) { %>, <%= private() %>socketService: SocketService<% } %>) {
     this.Http = http;
     <%_ if(filters.ws) { -%>