Various tweaks towards final release

templates/app/.eslintrc

@@ -224,7 +224,7 @@
 
         //ECMAScript 6
         "arrow-body-style": [2, "as-needed"],                       //require braces in arrow function body
-        "arrow-parens": [2, "as-needed"],                           //require parens in arrow function arguments
+        "arrow-parens": 0,                                          //require parens in arrow function arguments
         "arrow-spacing": 2,                                         //require space before/after arrow function's arrow
         "constructor-super": 2,                                     //verify calls of super() in constructors
         "generator-star-spacing": 0,                                //enforce spacing around the * in generator functions

templates/app/_package.json

@@ -36,7 +36,7 @@
     "sequelize": "^3.23.6",
     "sqlite3": "~3.1.1",
     "connect-session-sequelize": "^4.1.0",<% } %><% if(filters.auth) { %>
-    "jsonwebtoken": "^7.0.0",
+    "jsonwebtoken": "^8.3.0",
     "express-jwt": "^5.0.0",
     "passport": "~0.4.0",
     "passport-local": "^1.0.0",<% } %><% if(filters.facebookAuth) { %>
@@ -52,16 +52,15 @@
     <%# CLIENT %>
     "@angularclass/hmr-loader": "^3.0.4",
     "reflect-metadata": "^0.1.3",
-    "rxjs": "^5.5.2",
+    "rxjs": "^6.0.0",
     "zone.js": "^0.8.12",
-    "@angular/common": "^5.0.1",
-    "@angular/compiler": "^5.0.1",
-    "@angular/core": "^5.0.1",
-    "@angular/forms": "^5.0.1",
-    "@angular/http": "^5.0.1",
-    "@angular/platform-browser": "^5.0.1",
-    "@angular/platform-browser-dynamic": "^5.0.1",
-    "@angular/router": "^5.0.1",
+    "@angular/common": "^6.0.4",
+    "@angular/compiler": "^6.0.4",
+    "@angular/core": "^6.0.4",
+    "@angular/forms": "^6.0.4",
+    "@angular/platform-browser": "^6.0.4",
+    "@angular/platform-browser-dynamic": "^6.0.4",
+    "@angular/router": "^6.0.4",
     <%#"@angular/material": "5.0.0-rc0",%>
     "@angularclass/hmr": "^2.1.3",
   <%_ if(filters.ts) { -%>
@@ -80,7 +79,7 @@
     "@types/selenium-webdriver": "^3.0.3",
     "@types/webpack": "^3.0.10",
   <%_ } -%>
-    "angular2-jwt": "^0.2.3",
+    "@auth0/angular-jwt": "^2.0.0",
     <% if(filters.auth) { %>
     "angular-validation-match": "^1.9.0",<% } %>
     <% if(filters.uirouter) { %>
@@ -89,7 +88,7 @@
   <% if(filters.bootstrap) { %>
     "bootstrap": "~3.3.7",
     <% if(filters.uibootstrap) { %>
-    "ngx-bootstrap": "~1.6.3",<% } %>
+    "ngx-bootstrap": "^3.0.0",<% } %>
     <% if(filters.sass) { %>
     "bootstrap-sass": "~3.3.7",<% } %>
     <% if(filters.stylus) { %>
@@ -106,7 +105,7 @@
     <%# END CLIENT %>
 
     "autoprefixer": "^7.1.3",
-    "babel-eslint": "^7.2.3",
+    "babel-eslint": "^8.2.3",
     "babel-register": "^6.16.0",
     "bs-fullscreen-message": "^1.0.0",
     <%_ if(filters.flow) { -%>
@@ -117,7 +116,7 @@
     "babel-plugin-istanbul": "^4.1.4",
     "babel-preset-env": "^1.6.1",
     "cross-env": "^5.1.1",
-    "eslint": "^2.12.0",
+    "eslint": "^4.19.1",
     "del": "^3.0.0",
     "gulp": "^3.9.1",
     "gulp-babel": "^7.0.0",<% if(filters.ts) { %>
@@ -148,11 +147,12 @@
     "run-sequence": "^2.1.0",
     "lazypipe": "^1.0.1",
     <%# WEBPACK %>
-    "webpack": "^3.5.5",
-    "webpack-dev-server": "^2.4.2",
-    "extract-text-webpack-plugin": "3.0.0",
-    "html-webpack-plugin": "^2.24.1",
-    "html-webpack-harddisk-plugin": "~0.1.0",
+    "webpack": "^4.12.0",
+    "webpack-cli": "^3.0.6",
+    "webpack-dev-server": "^3.1.4",
+    "extract-text-webpack-plugin": "4.0.0-beta.0",
+    "html-webpack-plugin": "^3.2.0",
+    "html-webpack-harddisk-plugin": "~0.2.0",
     <%_ if(filters.pug) { _%>
     "pug-html-loader": "^1.1.5",<% } %>
     "typescript": "~2.6.1",
@@ -175,7 +175,7 @@
     <%_ if(filters.stylus) { _%>
     "stylus": "^0.54.5",
     "stylus-loader": "^3.0.1",<% } %>
-    "karma-webpack": "^2.0.3",
+    "karma-webpack": "4.0.0-beta.0",
     "to-string-loader": "^1.1.5",
     <%# END WEBPACK %>
     "through2": "^2.0.1",

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

@@ -1,17 +1,9 @@
 import {
     NgModule,
-    Injectable,
-    ApplicationRef,<% if(filters.ts || filters.flow) { %>
-    Provider,<% } %>
+    ApplicationRef,
 } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
-import {
-    Http,
-    HttpModule,
-    BaseRequestOptions,<% if(filters.ts || filters.flow) { %>
-    RequestOptions,
-    RequestOptionsArgs,<% } %>
-} from '@angular/http';
+import { HttpClientModule } from '@angular/common/http';
 import {
     removeNgStyles,
     createNewHosts,
@@ -21,40 +13,16 @@ import {
 import { UIRouterModule } from 'ui-router-ng2';<% } %>
 <%_ if (filters.ngroute) { -%>
 import { RouterModule, Routes } from '@angular/router';<% } %>
-import { AuthHttp, AuthConfig } from 'angular2-jwt';
 
 import { AppComponent } from './app.component';
 import { MainModule } from './main/main.module';
 import { DirectivesModule } from '../components/directives.module';<% if(filters.auth) { %>
+import { JwtModule } from '@auth0/angular-jwt';
 import { AccountModule } from './account/account.module';
 import { AdminModule } from './admin/admin.module';<% } %>
 
-import constants from './app.constants';
-
-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()
-    class HttpOptions extends BaseRequestOptions {
-        merge(options: RequestOptionsArgs): RequestOptions {
-            options.url = `http://localhost:9000${options.url}`;
-            return super.merge(options);
-        }
-    }
-
-    providers.push({ provide: RequestOptions, useClass: HttpOptions });
+export function tokenGetter() {
+    return localStorage.getItem('id_token');
 }
 
 const appRoutes: Routes = [{ path: '',
@@ -63,10 +31,14 @@ const appRoutes: Routes = [{ path: '',
 }];
 
 @NgModule({
-    providers,
     imports: [
         BrowserModule,
-        HttpModule,
+        HttpClientModule,<% if(filters.auth) { %>
+        JwtModule.forRoot({
+            config: {
+                tokenGetter,
+            }
+        }),<% } %>
         <%_ if (filters.uirouter) { -%>
         UIRouterModule.forRoot(),<% } %>
         <%_ if (filters.ngroute) { -%>
@@ -79,7 +51,7 @@ const appRoutes: Routes = [{ path: '',
     declarations: [
         AppComponent,
     ],
-    bootstrap: [AppComponent]
+    bootstrap: [AppComponent],
 })
 export class AppModule {
     static parameters = [ApplicationRef];

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

@@ -1,36 +1,39 @@
 import { Component, OnInit<% if(filters.ws) { %>, OnDestroy<% } %> } from '@angular/core';
-import { Http } from '@angular/http';
-import { Observable } from 'rxjs/Observable';
-import 'rxjs/add/operator/map';<% if(filters.ws) { %>
-import { SocketService } from '../../components/socket/socket.service';<% } %>
+import { HttpClient } from '@angular/common/http';<% if(filters.ws) { %>
+import { SocketService } from '../../components/socket/socket.service';<% } %><% if(filters.ts) { %>
+
+interface Thing {
+    name: string;
+    info?: string;
+}<% } %><% if(filters.flow) { %>
+type Thing = {
+    name: string;
+    info?: string;
+};<% } %>
 
 @Component({
     selector: 'main',
     template: require('./main.<%=templateExt%>'),
     styles: [require('./main.<%=styleExt%>')],
 })
 export class MainComponent implements OnInit<% if(filters.ws) { %>, OnDestroy<% } %> {
-    Http;
     <%_ if(filters.ws) { -%>
     SocketService;<% } %>
-    awesomeThings = [];
+    awesomeThings: Thing[] = [];
     <%_ if(filters.models) { -%>
     newThing = '';<% } %>
 
-    static parameters = [Http<% if(filters.ws) { %>, SocketService<% } %>];
-    constructor(<%= private() %>http: Http<% if(filters.ws) { %>, <%= private() %>socketService: SocketService<% } %>) {
-        this.Http = http;
+    static parameters = [HttpClient<% if(filters.ws) { %>, SocketService<% } %>];
+    constructor(<%= private() %>http: HttpClient<% if(filters.ws) { %>, <%= private() %>socketService: SocketService<% } %>) {
+        this.http = http;
         <%_ if(filters.ws) { -%>
         this.SocketService = socketService;<% } %>
     }
 
     ngOnInit() {
-        return this.Http.get('/api/things')
-            .map(res => res.json())
-            // .catch(err => Observable.throw(err.json().error || 'Server error'))
-            .subscribe(things => {
-                this.awesomeThings = things;
-                <%_ if(filters.ws) { -%>
+        return this.http.get('/api/things')
+            .subscribe((things: Thing[]) => {
+                this.awesomeThings = things;<% if(filters.ws) { %>
                 this.SocketService.syncUpdates('thing', this.awesomeThings);<% } %>
             });
     }<% if (filters.models) { %>
@@ -45,19 +48,15 @@ export class MainComponent implements OnInit<% if(filters.ws) { %>, OnDestroy<%
             let text = this.newThing;
             this.newThing = '';
 
-            return this.Http.post('/api/things', { name: text })
-                .map(res => res.json())
-                .catch(err => Observable.throw(err.json().error || 'Server error'))
+            return this.http.post('/api/things', { name: text })
                 .subscribe(thing => {
                     console.log('Added Thing:', thing);
                 });
         }
     }
 
     deleteThing(thing) {
-        return this.Http.delete(`/api/things/${thing._id}`)
-            .map(res => res.json())
-            .catch(err => Observable.throw(err.json().error || 'Server error'))
+        return this.http.delete(`/api/things/${thing._id}`)
             .subscribe(() => {
                 console.log('Deleted Thing');
             });

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

@@ -5,16 +5,7 @@ import {
     inject,
     TestBed,
 } from '@angular/core/testing';
-import {
-    BaseRequestOptions,
-    ConnectionBackend,
-    Http,
-    HttpModule,
-    Response,
-    ResponseOptions,
-} from '@angular/http';
-import { MockBackend } from '@angular/http/testing';
-<%_ if(filters.mocha && filters.expect) { -%>
+import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';<% if(filters.mocha && filters.expect) { %>
 import { expect } from 'chai';<% } %><% if(filters.uibootstrap) { %>
 import { TooltipModule } from 'ngx-bootstrap';<% } %>
 import { FormsModule } from '@angular/forms';<% if(filters.ws) { %>
@@ -25,51 +16,49 @@ import { MainComponent } from './main.component';
 describe('Component: MainComponent', function() {
     let comp: MainComponent;
     let fixture: ComponentFixture<MainComponent>;
+    let httpTestingController: HttpTestingController;
+    const mockThings = ['HTML5 Boilerplate', 'AngularJS', 'Karma', 'Express'];
 
     beforeEach(async(() => {
         TestBed.configureTestingModule({
             imports: [
                 FormsModule,<% if(filters.uibootstrap) { %>
                 TooltipModule.forRoot(),<% } %>
-                HttpModule,
+                HttpClientTestingModule,
             ],
-            declarations: [ MainComponent ], // declare the test component
+            declarations: [ MainComponent ], // declare the test component<% if(filters.ws) { %>
             providers: [
-                BaseRequestOptions,
-                MockBackend,
-                {
-                    provide: Http,
-                    useFactory: (backend: ConnectionBackend, defaultOptions: BaseRequestOptions) => {
-                        return new Http(backend, defaultOptions);
-                    },
-                    deps: [MockBackend, BaseRequestOptions]
-                },<% if(filters.ws) { %>
-                { provide: SocketService, useClass: SocketServiceStub },<% } %>
-            ],
+                { provide: SocketService, useClass: SocketServiceStub },
+            ],<% } %>
         }).compileComponents();
-    }));
 
-    beforeEach(async(inject([MockBackend], (mockBackend) => {
-        mockBackend.connections.subscribe(conn => {
-            conn.mockRespond(new Response(new ResponseOptions({
-                body: JSON.stringify(['HTML5 Boilerplate', 'AngularJS', 'Karma', 'Express'])
-            })));
-        });
-    })));
+        httpTestingController = TestBed.get(HttpTestingController);
+    }));
 
     beforeEach(async(() => {
         fixture = TestBed.createComponent(MainComponent);
         // MainComponent test instance
         comp = fixture.componentInstance;
 
         /**
-         * Trigger initial data binding.
+         * Trigger initial data binding and run lifecycle hooks
          */
         fixture.detectChanges();
     }));
 
-    it('should attach a list of things to the controller', () => {<% if(filters.jasmine) { %>
-        expect(comp.awesomeThings.length).toEqual(4);<% } else if(filters.mocha) { %>
-        <%= expect() %>comp.awesomeThings.length<%= to() %>.equal(4);<% } %>
+    it('should attach a list of things to the controller', () => {
+        // `GET /api/things` should be made once
+        const req = httpTestingController.expectOne('/api/things');<% if(filters.jasmine) { %>
+        expect(req.request.method).toEqual('GET');<% } else if(filters.mocha) { %>
+        <%= expect() %>req.request.method<%= to() %>.equal('GET');<% } %>
+
+        // Respond with mock data
+        req.flush(mockThings);
+
+        // assert that there are no outstanding requests
+        httpTestingController.verify();
+
+        <%_ if(filters.jasmine) { -%>expect(comp.awesomeThings).toEqual(mockThings);<%_ } else if(filters.mocha) { -%>
+        <%= expect() %>comp.awesomeThings<%= to() %>.equal(mockThings);<% } %>
     });
 });

templates/app/client/app/polyfills.js

@@ -1,5 +1,7 @@
-import 'core-js/es6';
-import 'core-js/es7/reflect';
+// Enable certain polyfills depending on which browsers you need to support
+// import 'core-js/es6';
+// import 'core-js/es7/reflect';
+
 import 'zone.js/dist/zone';
 
 <%_ if(filters.ts) { -%>