angular-fullstack · stherrienaspnet · Jun 21, 2017 · Jul 8, 2017 · Jul 8, 2017 · Jul 26, 2017
diff --git a/src/generators/app/index.js b/src/generators/app/index.js
@@ -174,13 +174,13 @@ export class Generator extends Base {
             choices: ['CSS', 'Sass', 'Stylus', 'Less'],
             filter: val => val.toLowerCase()
           },  {
-            type: 'list',
-            name: 'router',
-            default: 1,
-            message: 'What Angular router would you like to use?',
-            choices: ['ngRoute', 'uiRouter'],
-            filter: val => val.toLowerCase()
-          }, {
+          //  type: 'list',
+          //  name: 'router',
+          //  default: 1,
+          //  message: 'What Angular router would you like to use?',
+          //  choices: ['ngRoute', 'uiRouter'],
+          //  filter: val => val.toLowerCase()
+          //}, {
             type: 'confirm',
             name: 'bootstrap',
             message: 'Would you like to include Bootstrap?'
@@ -203,8 +203,9 @@ export class Generator extends Base {
             this.filters[answers.stylesheet] = true;
             insight.track('stylesheet', answers.stylesheet);
 
-            this.filters[answers.router] = true;
-            insight.track('router', answers.router);
+            //this.filters[answers.router] = true;
+            //insight.track('router', answers.router);
+            this.filters['ngroute'] = true;
 
             this.filters.bootstrap = !!answers.bootstrap;
             insight.track('bootstrap', !!answers.bootstrap);

diff --git a/templates/app/_package.json b/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) { %>

diff --git a/templates/app/client/__index.html b/templates/app/client/__index.html
@@ -1,9 +1,9 @@
 <!doctype html>
 <html lang="en">
 <head>
+    <base href="/">
     <meta charset="utf-8">
     <meta http-equiv="x-ua-compatible" content="ie=edge">
-    <base href="/">
     <title>Angular Full-Stack Generator</title>
     <meta name="description" content="">
     <meta name="viewport" content="width=device-width">
@@ -25,9 +25,6 @@
       ga('send', 'pageview');
     </script>
 
-    <app>LOADING</app>
-    <navbar></navbar>
-    <% if (filters.ngroute) { %><div ng-view=""></div><% } %><% if (filters.uirouter) { %><div ui-view=""></div><% } %>
-    <footer></footer>
+    <app>Loading...</app>
 </body>
 </html>
diff --git a/templates/app/client/app/account(auth)/account.module.js b/templates/app/client/app/account(auth)/account.module.js
@@ -3,15 +3,29 @@ import { FormsModule } from '@angular/forms';
 import { BrowserModule } from '@angular/platform-browser';
 <%_ 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';
+//import { STATES } from './account.routes';
 
 import { LoginComponent } from './login/login.component';
-import { SignupComponent } from './signup/signup.component';
 import { SettingsComponent } from './settings/settings.component';
+import { SignupComponent } from './signup/signup.component';
+
+<%_ if (filters.ngroute) { -%>
+const accountRoutes: Routes = [{
+  path: 'login',
+  component: LoginComponent,
+  //data: { title: 'Home' }
+}, {
+  path: 'settings',
+  component: SettingsComponent,
+}, {
+  path: 'signup',
+  component: SignupComponent,
+}];<% } %>
 
 @NgModule({
     imports: [
@@ -21,7 +35,8 @@ import { SettingsComponent } from './settings/settings.component';
         UIRouterModule.forChild({
             states: STATES,
         }),<% } %>
-        <%_ if (filters.ngroute) { -%><% } %>
+        <%_ if (filters.ngroute) { -%>
+        RouterModule.forChild(accountRoutes),<% } %>
         <%_ if(filters.oauth) { -%>
         DirectivesModule,<% } %>
     ],

diff --git a/templates/app/client/app/account(auth)/login/login.component.js b/templates/app/client/app/account(auth)/login/login.component.js
@@ -1,7 +1,8 @@
 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';
 
 // @flow
@@ -33,14 +34,16 @@ export class LoginComponent {
   errors = {login: undefined};
   submitted = false;
   AuthService;
+  Router;
   <%_ if(filters.ngroute) { -%><% } %>
   <%_ 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_;<% } %>
   }
@@ -54,7 +57,10 @@ export class LoginComponent {
     })
       .then(() => {
         // Logged in, redirect to home
-        this.StateService.go('main');
+        <%_ if(filters.ngroute) { -%>
+        this.Router.navigateByUrl('/home');<% } %>
+        <%_ if(filters.uirouter) { -%>
+        this.StateService.go('main');<% } %>
       })
       .catch(err => {
         this.errors.login = err.message;

diff --git a/templates/app/client/app/account(auth)/settings/settings.component.js b/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 = '';
+      });
   }
 }
diff --git a/templates/app/client/app/account(auth)/settings/settings.html b/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>
 

diff --git a/templates/app/client/app/account(auth)/signup/signup.component.js b/templates/app/client/app/account(auth)/signup/signup.component.js
@@ -2,9 +2,10 @@
 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 +22,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 +33,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 +57,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 => {

diff --git a/templates/app/client/app/admin(auth)/admin.component.js b/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 => {

diff --git a/templates/app/client/app/admin(auth)/admin.module.js b/templates/app/client/app/admin(auth)/admin.module.js
@@ -7,16 +7,19 @@ import { RouterModule, Routes } from '@angular/router';<% } %>
 
 import { AdminComponent } from './admin.component';
 
-<%_ if(filters.ngroute) { -%>
-import { ROUTES } from './admin.routes';<% } %>
 <%_ if(filters.uirouter) { -%>
 import { STATES } from './admin.routes';<% } %>
+<%_ if (filters.ngroute) { -%>
+const adminRoutes: Routes = [{
+  path: 'admin',
+  component: AdminComponent,
+}];<% } %>
 
 @NgModule({
     imports: [
         BrowserModule,
         <%_ if(filters.ngroute) { _%>
-        RouterModule.forChild(ROUTES),<% } %>
+        RouterModule.forChild(adminRoutes),<% } %>
         <%_ if(filters.uirouter) { _%>
         UIRouterModule.forChild({
             states: STATES,

diff --git a/templates/app/client/app/app.component.js b/templates/app/client/app/app.component.js
@@ -3,7 +3,7 @@ import { Component } from '@angular/core';
 @Component({
     selector: 'app',
     template: `<navbar></navbar>
-    <ui-view></ui-view>
+    <% if (filters.ngroute) { %><router-outlet></router-outlet><% } %><% if (filters.uirouter) { %><ui-view></ui-view><% } %>
     <footer></footer>`
 })
 export class AppComponent {}
diff --git a/templates/app/client/app/app.constants.js b/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;<% } %>