initial angular upgrade

Author: localyost3000

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "angularpwaseed",
-  "version": "10.1.4",
+  "version": "11.1.2",
   "description": "A starter project for a PWA built in Angular",
   "author": "swimmadude66",
   "license": "MIT",
@@ -18,8 +18,6 @@
     "predev": "rimraf dist",
     "build": "gulp",
     "dev": "gulp watch",
-    "predevssr": "rimraf dist",
-    "devssr": "gulp watchssr",
     "clean": "rimraf dist",
     "karma": "karma",
     "test": "concurrently npm:test-client npm:test-server",
@@ -32,16 +30,13 @@
     "preanalyze-client": "rimraf dist/client reports/client",
     "analyze-client": "gulp analyze",
     "prebuild-server": "rimraf dist/server",
-    "build-server": "gulp compile-node",
+    "build-server": "gulp compileNode",
     "prebuild-client": "rimraf dist/client",
-    "build-client": "gulp webpack",
-    "prebuildssr": "rimraf dist",
-    "buildssr": "gulp build-ssr"
+    "build-client": "gulp webpack"
   },
   "dependencies": {
-    "argon2": "0.27.0",
+    "argon2": "0.27.1",
     "body-parser": "1.19.0",
-    "classlist": "2.0.0",
     "compression": "1.7.4",
     "cookie-parser": "1.4.5",
     "dotenv": "8.2.0",
@@ -54,17 +49,18 @@
     "spdy": "4.0.2"
   },
   "devDependencies": {
-    "@angular/animations": "10.1.4",
-    "@angular/common": "10.1.4",
-    "@angular/compiler": "10.1.4",
-    "@angular/compiler-cli": "10.1.4",
-    "@angular/core": "10.1.4",
-    "@angular/forms": "10.1.4",
-    "@angular/language-service": "10.1.4",
-    "@angular/platform-browser": "10.1.4",
-    "@angular/platform-browser-dynamic": "10.1.4",
-    "@angular/router": "10.1.4",
-    "@ngtools/webpack": "10.1.4",
+    "@angular-devkit/build-optimizer": "0.1101.4",
+    "@angular/animations": "11.1.2",
+    "@angular/common": "11.1.2",
+    "@angular/compiler": "11.1.2",
+    "@angular/compiler-cli": "11.1.2",
+    "@angular/core": "11.1.2",
+    "@angular/forms": "11.1.2",
+    "@angular/language-service": "11.1.2",
+    "@angular/platform-browser": "11.1.2",
+    "@angular/platform-browser-dynamic": "11.1.2",
+    "@angular/router": "11.1.2",
+    "@ngtools/webpack": "11.1.4",
     "@types/chai": "4.2.12",
     "@types/core-js": "2.5.4",
     "@types/mocha": "8.0.3",
@@ -77,6 +73,7 @@
     "browser-sync-webpack-plugin": "2.2.2",
     "chai": "4.2.0",
     "circular-dependency-plugin": "5.2.0",
+    "classlist": "2.0.0",
     "concurrently": "5.3.0",
     "copy-webpack-plugin": "6.1.1",
     "core-js": "3.6.5",
@@ -86,10 +83,10 @@
     "file-loader": "6.1.0",
     "gulp": "4.0.2",
     "gulp-typescript": "5.0.1",
-    "html-loader": "1.3.1",
-    "html-webpack-link-type-plugin": "1.0.3",
-    "html-webpack-plugin": "4.5.0",
-    "html-webpack-skip-assets-plugin": "0.0.2",
+    "html-loader": "1.3.2",
+    "html-webpack-link-type-plugin": "1.1.0",
+    "html-webpack-plugin": "3.2.0",
+    "html-webpack-skip-assets-plugin": "1.0.0",
     "istanbul-instrumenter-loader": "3.0.1",
     "karma": "5.2.3",
     "karma-chrome-launcher": "3.1.0",
@@ -105,32 +102,32 @@
     "postcss": "8.1.1",
     "postcss-loader": "4.0.2",
     "reflect-metadata": "0.1.13",
-    "resolve-url-loader": "3.1.1",
+    "resolve-url-loader": "3.1.2",
     "rimraf": "3.0.2",
     "sass": "1.26.11",
-    "sass-loader": "10.0.2",
-    "source-map-loader": "1.1.0",
+    "sass-loader": "10.0.4",
+    "source-map-loader": "1.1.1",
     "supertest": "5.0.0",
     "terser-webpack-plugin": "4.2.2",
     "to-string-loader": "1.1.6",
     "ts-mockito": "2.6.1",
     "ts-node": "9.0.0",
     "tslib": "2.0.1",
     "typescript": "4.0.3",
-    "url-loader": "4.1.0",
+    "url-loader": "4.1.1",
     "webpack": "4.44.2",
     "webpack-bundle-analyzer": "3.9.0",
     "webpack-cli": "3.3.12",
     "webpack-node-externals": "2.5.2",
-    "webpack-nomodule-plugin": "1.0.1",
+    "webpack-nomodule-plugin": "1.1.0",
     "workbox-cacheable-response": "5.1.4",
     "workbox-core": "5.1.4",
     "workbox-expiration": "5.1.4",
     "workbox-precaching": "5.1.4",
     "workbox-routing": "5.1.4",
     "workbox-strategies": "5.1.4",
     "workbox-webpack-plugin": "5.1.4",
-    "zone.js": "0.10.3"
+    "zone.js": "0.11.3"
   },
   "nyc": {
     "reporter": [

package.json

@@ -1,9 +1,9 @@
 import {Component, OnInit} from '@angular/core';
 import {distinctUntilChanged} from 'rxjs/operators';
-import {Animations} from '@core/animations/index';
+import {Animations} from '@core/animations';
 import {SubscriberComponent} from '@core/component/subscriber';
 import {Toast} from '@models/shared/toast';
-import {ConnectionService, ToastService, WebviewService} from '@services/index';
+import {ConnectionService, ToastService, WebviewService} from '@services';
 
 @Component({
     selector: 'app',

src/client/components/app/component.ts

@@ -1,14 +1,14 @@
 import {Component, Output, ViewChild, ElementRef, forwardRef, EventEmitter, Input} from '@angular/core';
 import {ControlValueAccessor, NG_VALUE_ACCESSOR, AbstractControl} from '@angular/forms';
-import {FormErrorParser} from '@core/index';
-import {MaskService} from '@services/index';
+import {FormErrorParser} from '@core';
+import {MaskService} from '@services';
 
 export const INPUT_GROUP_VALUE_ACCESSOR : any = {
     provide: NG_VALUE_ACCESSOR,
     useExisting: forwardRef(() => InputGroupComponent),
     multi: true
 };
-  
+
 type MASK = 'CURRENCY' | 'DATE' | 'PHONE';
 
 @Component({
@@ -51,7 +51,7 @@ export class InputGroupComponent implements ControlValueAccessor {
     }
 
     private _maskType: MASK;
-    
+
     pristine: boolean = true;
     blurred: boolean = false;
     focused: boolean = false;
@@ -69,8 +69,8 @@ export class InputGroupComponent implements ControlValueAccessor {
             || err.passwordSymbols
             || err.passwordComplexity);
     }
-    
-    private _onChange: Function; 
+
+    private _onChange: Function;
     private _onTouch: Function;
     private _lastLength: number = 0;
 
@@ -111,7 +111,7 @@ export class InputGroupComponent implements ControlValueAccessor {
             this._lastLength = value.length;
         }
         this.emitValue(outputValue);
-        
+
     }
 
     onTouch(event) {

src/client/components/inputgroup/component.ts

@@ -1,8 +1,8 @@
 import {Component} from '@angular/core';
 import {FormBuilder, FormGroup, Validators, FormControl} from '@angular/forms';
 import {Router} from '@angular/router';
-import {SubscriberComponent} from '@core/index';
-import {AuthService} from '@services/index';
+import {SubscriberComponent} from '@core';
+import {AuthService} from '@services';
 
 @Component({
     selector: 'login',

src/client/components/login/component.ts

@@ -1,8 +1,8 @@
 import {Component} from '@angular/core';
 import {FormBuilder, FormGroup, Validators, FormControl} from '@angular/forms';
 import {Router} from '@angular/router';
-import {SubscriberComponent, PasswordValidation, FormErrorParser} from '@core/index';
-import {AuthService} from '@services/index';
+import {SubscriberComponent, PasswordValidation, FormErrorParser} from '@core';
+import {AuthService} from '@services';
 
 @Component({
     selector: 'signup',

src/client/components/signup/component.ts

@@ -1,7 +1,7 @@
 import { Component, Input, Output, EventEmitter, OnInit } from '@angular/core';
 import { timer } from 'rxjs';
 import { takeWhile } from 'rxjs/operators';
-import { SubscriberComponent } from '@core/index';
+import { SubscriberComponent } from '@core';
 import { Toast, ToastType } from '@models/shared/toast';
 
 @Component({
@@ -17,7 +17,7 @@ export class ToastComponent extends SubscriberComponent implements OnInit {
     @Output('dismiss') dismiss: EventEmitter<boolean> = new EventEmitter<boolean>(); // boolean value to represent whether it was killed, or expired
 
     private _expired: boolean = false;
-    
+
     ngOnInit() {
         this.addSubscription(
             timer(0, 100)

src/client/components/toast/component.ts

@@ -1,16 +1,16 @@
 import {Injectable} from '@angular/core';
 import {
-    CanLoad, 
-    CanActivate, 
-    CanActivateChild, 
-    Router, 
-    Route, 
-    ActivatedRouteSnapshot, 
+    CanLoad,
+    CanActivate,
+    CanActivateChild,
+    Router,
+    Route,
+    ActivatedRouteSnapshot,
     RouterStateSnapshot
 } from '@angular/router';
 import {Observable} from 'rxjs';
 import {tap} from 'rxjs/operators';
-import {AuthService} from '@services/index';
+import {AuthService} from '@services';
 
 @Injectable({
     providedIn: 'root'

src/client/guards/loggedin.ts

@@ -1,16 +1,16 @@
 import {Injectable} from '@angular/core';
 import {
-    CanLoad, 
-    CanActivate, 
-    CanActivateChild, 
-    Router, 
-    Route, 
-    ActivatedRouteSnapshot, 
+    CanLoad,
+    CanActivate,
+    CanActivateChild,
+    Router,
+    Route,
+    ActivatedRouteSnapshot,
     RouterStateSnapshot
 } from '@angular/router';
 import {Observable} from 'rxjs';
 import {tap, map} from 'rxjs/operators';
-import {AuthService} from '@services/index';
+import {AuthService} from '@services';
 
 @Injectable({
     providedIn: 'root'

src/client/guards/notloggedin.ts

@@ -4,7 +4,7 @@ import {BrowserModule, BrowserTransferStateModule} from '@angular/platform-brows
 import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
 import {SharedModule} from '@modules/shared';
 import {AppComponent} from '@components/app/component';
-import {IsLoggedInGuard, NotLoggedInGuard} from '@guards/index'
+import {IsLoggedInGuard, NotLoggedInGuard} from '@guards'
 
 @NgModule({
     bootstrap: [

src/client/modules/app.ts

@@ -5,8 +5,8 @@ import {ReactiveFormsModule} from '@angular/forms';
 import {HttpClientModule} from '@angular/common/http';
 import {InputGroupComponent} from '@components/inputgroup/component';
 import {ToastComponent} from '@components/toast/component';
-import {ShortenTextPipe, FloorNumberPipe} from '@pipes/index';
-import {AltTextDirective, ExternalLinkDirective} from '@directives/index';
+import {ShortenTextPipe, FloorNumberPipe} from '@pipes';
+import {AltTextDirective, ExternalLinkDirective} from '@directives';
 
 @NgModule({
     imports:[

src/client/modules/shared.ts

@@ -1,5 +1,5 @@
 import {expect} from 'chai';
-import {FloorNumberPipe} from '@pipes/index';
+import {FloorNumberPipe} from '@pipes';
 
 describe('FloorNumberPipe', () => {
 

src/client/tests/pipes/floor.spec.ts

@@ -1,5 +1,5 @@
 import {expect} from 'chai';
-import {ShortenTextPipe} from '@pipes/index';
+import {ShortenTextPipe} from '@pipes';
 
 describe('ShortenPipe', () => {
 

src/client/tests/pipes/shorten.spec.ts

@@ -1,5 +1,5 @@
 import {expect} from 'chai';
-import { MaskService } from '@services/index';
+import { MaskService } from '@services';
 
 describe('MaskService', () => {
     let maskService: MaskService;
@@ -70,7 +70,7 @@ describe('MaskService', () => {
             original = '1111111111111111111111111111111111';
             masked = maskService.maskPhone(original);
             expect(masked).to.equal('(111) 111 1111');
-            
+
         });
     });
 
@@ -175,7 +175,7 @@ describe('MaskService', () => {
 
             original = '1111111111111111111111111111111111111';
             masked = maskService.maskDate(original);
-            expect(masked).to.equal('11/11/1111');            
+            expect(masked).to.equal('11/11/1111');
         });
     });
 

src/client/tests/services/mask.spec.ts

@@ -1,7 +1,7 @@
 import {expect} from 'chai';
-import { ToastService } from '@services/index';
+import { ToastService } from '@services';
 import { take, pairwise } from 'rxjs/operators';
-import { ToastType } from '@models/index';
+import { ToastType } from '@models';
 
 describe('ToastService', () => {
     let toastService: ToastService;

src/client/tests/services/toast.spec.ts

@@ -18,6 +18,16 @@
         ],
         "baseUrl": ".",
         "paths": {
+            "@components": ["components"],
+            "@directives": ["directives"],
+            "@core": ["core"],
+            "@guards": ["guards"],
+            "@models": ["models"],
+            "@modules": ["modules"],
+            "@pipes": ["pipes"],
+            "@services": ["services"],
+            "@resolvers": ["resolvers"],
+            "@mock_data": ["tests/mock_data"],
             "@components/*": ["components/*", "components/"],
             "@directives/*": ["directives/*", "directives/"],
             "@core/*": ["core/*", "core/"],

src/client/tsconfig.json

@@ -3,15 +3,19 @@
     "target": "es6",
     "module": "commonjs",
     "moduleResolution": "node",
-    "sourceMap": true,
+    "importHelpers": true,
     "emitDecoratorMetadata": true,
     "experimentalDecorators": true,
     "removeComments": true,
     "noImplicitAny": false,
-    "outDir": "dist"
+    "outDir": "../../dist/server/",
+    "typeRoots": [
+      "../../node_modules/@types/"
+    ]
   },
   "exclude": [
     "tests/",
-    "**/*.spec"
+    "**/*.spec",
+    "../../node_modules/"
   ]
 }

src/server/tsconfig.json

@@ -28,7 +28,11 @@ const config = {
         pathinfo: process.env.BUILD_MODE === 'development',
     },
     resolve: {
-        extensions: ['.ts', '.js', '.json', '.scss', '.css']
+        extensions: ['.ts', '.js', '.json', '.scss', '.css'],
+        mainFields: [ 'module' ],
+        alias: {
+            '/assets': path.join(__dirname, './src/client/assets')
+        }
     },
     module: {
         rules: [