working webpack 5

localyost3000 · localyost3000 · commit 11b948930ebc · 2021-02-06T16:56:54.000-05:00
diff --git a/gulpfile.js b/gulpfile.js
@@ -87,6 +87,12 @@ function watchWebpack(done) {
             watch: true,
             cache: true,
             bail: false,
+            infrastructureLogging: {
+                level: 'verbose'
+            },
+            stats: {
+                logging: 'verbose'
+            },
             devtool: 'eval-source-map',
             plugins: [
                 ...config.plugins || [],
@@ -98,13 +104,13 @@ function watchWebpack(done) {
                     open: !(process.env.DOCKER_MODE)
                 })
             ]
-        }, 
+        },
         (err, stats) => {
         if (err) {
             console.error(err);
         }
         if (stats.hasErrors() && stats.compilation.errors) {
-            stats.compilation.errors.forEach(function(e){console.error(e,'\n');});
+            stats.compilation.errors.forEach((e) => {console.error(e,'\n');});
         }
         console.log(stats.toString());
         return done(err);
diff --git a/karma.conf.js b/karma.conf.js
@@ -7,7 +7,7 @@ module.exports = function(config) {
         basePath: '',
         // frameworks to use
         // available frameworks: https://npmjs.org/browse/keyword/karma-adapter
-        frameworks: ['mocha'],
+        frameworks: ['webpack', 'mocha'],
         // list of files / patterns to load in the browser
         files: [
             'src/client/tests/index.ts',
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -67,56 +67,55 @@
     "@types/request": "2.48.5",
     "angular-router-loader": "0.8.5",
     "angular2-template-loader": "0.6.2",
-    "autoprefixer": "10.0.1",
+    "autoprefixer": "10.2.4",
     "awesome-typescript-loader": "5.2.1",
-    "browser-sync": "2.26.12",
-    "browser-sync-webpack-plugin": "2.2.2",
-    "chai": "4.2.0",
-    "circular-dependency-plugin": "5.2.0",
+    "browser-sync": "2.26.14",
+    "browser-sync-webpack-plugin": "2.3.0",
+    "chai": "4.3.0",
+    "circular-dependency-plugin": "5.2.2",
     "concurrently": "5.3.0",
-    "copy-webpack-plugin": "6.1.1",
-    "core-js": "3.6.5",
-    "css-loader": "3.5.3",
+    "copy-webpack-plugin": "7.0.0",
+    "core-js": "3.8.3",
+    "css-loader": "5.0.1",
     "cssnano": "4.1.10",
     "fibers": "5.0.0",
-    "file-loader": "6.1.0",
+    "file-loader": "6.2.0",
     "gulp": "4.0.2",
     "gulp-typescript": "5.0.1",
     "html-loader": "1.3.2",
     "html-webpack-link-type-plugin": "1.1.0",
-    "html-webpack-plugin": "3.2.0",
+    "html-webpack-plugin": "5.0.0",
     "html-webpack-skip-assets-plugin": "1.0.0",
     "istanbul-instrumenter-loader": "3.0.1",
-    "karma": "5.2.3",
+    "karma": "6.1.0",
     "karma-chrome-launcher": "3.1.0",
     "karma-coverage-istanbul-reporter": "3.0.3",
     "karma-mocha": "2.0.1",
     "karma-mocha-reporter": "2.2.5",
     "karma-sourcemap-loader": "0.3.8",
-    "karma-webpack": "4.0.2",
-    "mini-css-extract-plugin": "0.11.3",
-    "mocha": "8.1.3",
+    "karma-webpack": "5.0.0",
+    "mini-css-extract-plugin": "1.3.5",
+    "mocha": "8.2.1",
     "normalize-scss": "7.0.1",
     "nyc": "15.1.0",
-    "postcss": "8.1.1",
-    "postcss-loader": "4.0.2",
+    "postcss": "8.2.4",
+    "postcss-loader": "5.0.0",
     "reflect-metadata": "0.1.13",
-    "resolve-url-loader": "3.1.2",
     "rimraf": "3.0.2",
-    "sass": "1.26.11",
-    "sass-loader": "10.0.4",
-    "source-map-loader": "1.1.1",
-    "supertest": "5.0.0",
-    "terser-webpack-plugin": "4.2.2",
+    "sass": "1.32.6",
+    "sass-loader": "11.0.0",
+    "source-map-loader": "2.0.0",
+    "supertest": "6.1.3",
+    "terser-webpack-plugin": "5.1.1",
     "to-string-loader": "1.1.6",
     "ts-mockito": "2.6.1",
-    "ts-node": "9.0.0",
-    "tslib": "2.0.1",
-    "typescript": "4.0.3",
+    "ts-node": "9.1.1",
+    "tslib": "2.1.0",
+    "typescript": "4.1.3",
     "url-loader": "4.1.1",
-    "webpack": "4.44.2",
-    "webpack-bundle-analyzer": "3.9.0",
-    "webpack-cli": "3.3.12",
+    "webpack": "5.21.1",
+    "webpack-bundle-analyzer": "4.4.0",
+    "webpack-cli": "4.5.0",
     "webpack-node-externals": "2.5.2",
     "webpack-nomodule-plugin": "1.1.0",
     "workbox-cacheable-response": "6.1.0",
diff --git a/src/client/modules/app.ts b/src/client/modules/app.ts
@@ -2,9 +2,11 @@ import {NgModule} from '@angular/core';
 import {RouterModule} from '@angular/router';
 import {BrowserModule, BrowserTransferStateModule} from '@angular/platform-browser';
 import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
+import { HTTP_INTERCEPTORS } from '@angular/common/http';
 import {SharedModule} from '@modules/shared';
-import {AppComponent} from '@components/app/component';
 import {IsLoggedInGuard, NotLoggedInGuard} from '@guards'
+import { HttpConnectionInterceptor } from '@services/connection/interceptor';
+import {AppComponent} from '@components/app/component';
 
 @NgModule({
     bootstrap: [
@@ -17,14 +19,21 @@ import {IsLoggedInGuard, NotLoggedInGuard} from '@guards'
         BrowserTransferStateModule,
         RouterModule.forRoot(
             [
-                {path: 'login', canLoad: [NotLoggedInGuard], canActivateChild: [NotLoggedInGuard], loadChildren: './routes/+login#LoginLazyModule'},
-                {path: 'signup', canLoad: [NotLoggedInGuard], canActivateChild: [NotLoggedInGuard], loadChildren: './routes/+signup#SignupLazyModule'},
-                {path: '', canLoad: [IsLoggedInGuard], canActivateChild: [IsLoggedInGuard], loadChildren: './routes/+demo#DemoLazyModule'},
+                {path: 'login', canLoad: [NotLoggedInGuard], canActivateChild: [NotLoggedInGuard], loadChildren: () => import('./routes/+login').then(m => m.LoginLazyModule)},
+                {path: 'signup', canLoad: [NotLoggedInGuard], canActivateChild: [NotLoggedInGuard], loadChildren: () => import('./routes/+signup').then(m => m.SignupLazyModule)},
+                {path: '', canLoad: [IsLoggedInGuard], canActivateChild: [IsLoggedInGuard], loadChildren: () => import('./routes/+demo').then(m => m.DemoLazyModule)},
             ]
         )
     ],
     declarations: [
         AppComponent,
+    ],
+    providers: [
+        {
+            provide: HTTP_INTERCEPTORS,
+            useClass: HttpConnectionInterceptor,
+            multi: true,
+        }
     ]
 })
 export class AppModule {}
diff --git a/src/server/routes/auth.ts b/src/server/routes/auth.ts
@@ -1,8 +1,5 @@
 import {Router} from 'express';
-import {createHash} from 'crypto';
-import * as uuid from 'uuid/v4';
-import {Observable} from 'rxjs';
-import {flatMap, switchMap} from 'rxjs/operators';
+import {switchMap} from 'rxjs/operators';
 import {Config} from '../models/config';
 import {User} from '../models/user';
 
diff --git a/src/server/services/auth.ts b/src/server/services/auth.ts
@@ -136,7 +136,7 @@ export class AuthService {
                 if (isValid) {
                     return of(user);
                 } else {
-                    throwError({Status: 400, Message: 'email or password is incorrect'});
+                    return throwError({Status: 400, Message: 'email or password is incorrect'});
                 }
             })
         );
diff --git a/webpack.config.js b/webpack.config.js
@@ -10,16 +10,17 @@ const autoprefixer = require('autoprefixer');
 const cssnano = require('cssnano');
 const CopyWebpackPlugin = require('copy-webpack-plugin');
 const CircularDependencyPlugin = require('circular-dependency-plugin');
-const TerserPlugin  = require('terser-webpack-plugin');
+const TerserPlugin = require('terser-webpack-plugin');
 const AotPlugin = require('@ngtools/webpack').AngularCompilerPlugin;
 const NormalModuleReplacementPlugin = webpack.NormalModuleReplacementPlugin;
+const DefinePlugin = webpack.DefinePlugin;
 const bundles = [/^polyfills/i, /^commons(~)?/i, /^vendors~/i, /^app/i, /^styles/i, /.*/];
 
 const config = {
     mode: 'none',
     entry: {
-        app: path.join(__dirname,'./src/client/main.ts'),
-        polyfills: path.join(__dirname,'./src/client/polyfills.ts'),
+        app: path.join(__dirname, './src/client/main.ts'),
+        polyfills: path.join(__dirname, './src/client/polyfills.ts'),
         styles: path.join(__dirname, './src/client/scss/styles.scss')
     },
     output: {
@@ -29,7 +30,7 @@ const config = {
     },
     resolve: {
         extensions: ['.ts', '.js', '.json', '.scss', '.css'],
-        mainFields: [ 'module' ],
+        mainFields: ['module', 'browser', 'main'],
         alias: {
             '/assets': path.join(__dirname, './src/client/assets')
         }
@@ -50,29 +51,22 @@ const config = {
                     {
                         loader: 'css-loader',
                         options: {
-                            // url: false
-                        }
-                    },
-                    {
-                        loader:'resolve-url-loader',
-                        options: {
-                            root: path.join(__dirname, './src/client'),
-                            debug: true
+                            esModule: false
                         }
                     },
                     {
                         loader: 'postcss-loader',
                         options: {
                             postcssOptions: {
                                 plugins: [
-                                    autoprefixer({remove: false, flexbox: true}),
-                                    cssnano({zindex: false})
+                                    autoprefixer({ remove: false, flexbox: true }),
+                                    cssnano({ zindex: false })
                                 ]
                             }
                         }
                     },
                     {
-                        loader:'sass-loader',
+                        loader: 'sass-loader',
                         options: {
                             sassOptions: {
                                 includePaths: [path.join(__dirname, './src/client/scss')]
@@ -102,20 +96,14 @@ const config = {
                         options: {
                             postcssOptions: {
                                 plugins: [
-                                    autoprefixer({remove: false, flexbox: true}),
-                                    cssnano({zindex: false})
+                                    autoprefixer({ remove: false, flexbox: true }),
+                                    cssnano({ zindex: false })
                                 ],
                             }
                         }
                     },
                     {
-                        loader:'resolve-url-loader',
-                        options: {
-                            root: path.join(__dirname, './src/client')
-                        }
-                    },
-                    {
-                        loader:'sass-loader',
+                        loader: 'sass-loader',
                         options: {
                             sassOptions: {
                                 includePaths: [path.join(__dirname, './src/client/scss')]
@@ -136,19 +124,19 @@ const config = {
             },
             {
                 test: /font(s)?\.svg/,
-                exclude:  /\.svg\.js/,
+                exclude: /\.svg\.js/,
                 use: [
                     {
                         loader: 'url-loader',
                         options: {
-                            limit: 10*1024,
+                            limit: 10 * 1024,
                             name: 'fonts/[name].svg'
                         }
                     }
                 ]
             },
-             // images
-             {
+            // images
+            {
                 test: /assets\/.*?\.((jpg)|(png)|(gif)|(bmp)|(webp)|(svg))/,
                 loader: 'url-loader',
                 // exclude: [path.join(__dirname, './src/client/assets')],
@@ -160,19 +148,26 @@ const config = {
             // templateUrl
             {
                 test: /\.html$/,
-                use: 'html-loader'
+                use: [
+                    {
+                        loader: 'html-loader',
+                        options: {
+                            minimize: true
+                        }
+                    }
+                ]
             }
         ]
     },
     optimization: {
         // runtimeChunk: 'single',
         flagIncludedChunks: true,
-        occurrenceOrder: true,
         sideEffects: true,
         usedExports: true,
         concatenateModules: true,
         providedExports: true,
         splitChunks: {
+            chunks: 'async',
             hidePathInfo: true,
             minSize: 30000,
             maxSize: 977000, // try and stay below recomended size
@@ -184,22 +179,21 @@ const config = {
                 vendors: {
                     test: /[\\/]node_modules[\\/]/,
                     priority: -10,
+                    reuseExistingChunk: true,
                 },
                 default: {
                     name: 'commons',
                     minChunks: 2,
                     reuseExistingChunk: true,
                     priority: -20
                 }
-              }
+            }
         },
         minimize: true,
     },
     plugins: [
         new TerserPlugin({
             parallel: true,
-            sourceMap: process.env.BUILD_MODE === 'development',
-            cache: true,
             terserOptions: {
                 compress: true,
                 output: {
@@ -214,19 +208,19 @@ const config = {
             hash: false,
             showErrors: false,
             excludeAssets: [/styles\..*js/i],
-            chunksSortMode: (a,b) =>   {
+            chunksSortMode: (a, b) => {
                 return bundles.findIndex(pattern => pattern.test(a)) - bundles.findIndex(pattern => pattern.test(b));
             },
         }),
         new HtmlWebpackSkipAssetsPlugin(),
         new HtmlWebpackLinkTypePlugin(),
-        new NoModulePlugin({filePatterns: ['polyfills.**.js']}),
+        new NoModulePlugin({ filePatterns: ['polyfills.**.js'] }),
         new AotPlugin({
             tsConfigPath: path.join(__dirname, './src/client/tsconfig.app.json'),
             mainPath: path.join(__dirname, './src/client/main.ts'),
             typeChecking: false,
         }),
-        new MiniCssExtractPlugin ({
+        new MiniCssExtractPlugin({
             filename: '[name].[contenthash].min.css'
         }),
         new CircularDependencyPlugin({
@@ -253,13 +247,18 @@ const config = {
                 }
             ]
         }),
-        new NormalModuleReplacementPlugin(/environments\/environment/, function(resource) {
-            resource.request = resource.request.replace(/environment$/, (process.env.BUILD_MODE === 'development' ? 'devEnvironment':'prodEnvironment'));
+        new NormalModuleReplacementPlugin(/environments\/environment/, function (resource) {
+            resource.request = resource.request.replace(/environment$/, (process.env.BUILD_MODE === 'development' ? 'devEnvironment' : 'prodEnvironment'));
+        }),
+        new DefinePlugin({
+            'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
+            'process.env.NODE_DEBUG': JSON.stringify(process.env.NODE_DEBUG),
+            'process.type': JSON.stringify(process.type),
+            'process.version': JSON.stringify(process.version),
         }),
         new workbox.InjectManifest({
             swSrc: path.join(__dirname, './src/client/sw.js'),
             swDest: 'sw.js',
-            // importsDirectory: 'wb-assets',
 
             exclude: [
                 /styles\..*\.min\.js/i,     // empty bundle file from extractText
diff --git a/webpack.config.test.js b/webpack.config.test.js

Original file line number	Diff line number	Diff line change
`@@ -136,7 +136,7 @@ export class AuthService {`
`136`	`136`	`if (isValid) {`
`137`	`137`	`return of(user);`
`138`	`138`	`} else {`
`139`		`- throwError({Status: 400, Message: 'email or password is incorrect'});`
	`139`	`+ return throwError({Status: 400, Message: 'email or password is incorrect'});`
`140`	`140`	`}`
`141`	`141`	`})`
`142`	`142`	`);`