Upgrade to NG9 (#486)

* Upgrade to NG9

* Build fixed.

* Tsconfig udpated

* Small build optimization.

frontend/app-config/karma-test-shim.js

@@ -3,33 +3,17 @@
 require('core-js/proposals/reflect-metadata');
 
 require('zone.js/dist/zone');
-require('zone.js/dist/long-stack-trace-zone');
+require('zone.js/dist/zone-testing');
-require('zone.js/dist/proxy');
-require('zone.js/dist/sync-test');
-require('zone.js/dist/jasmine-patch');
-require('zone.js/dist/async-test');
-require('zone.js/dist/fake-async-test');
 
-var testing = require('@angular/core/testing');
+const testing = require('@angular/core/testing');
-var browser = require('@angular/platform-browser-dynamic/testing');
+const browser = require('@angular/platform-browser-dynamic/testing');
 
-testing.TestBed.initTestEnvironment(
+testing.getTestBed().initTestEnvironment(
     browser.BrowserDynamicTestingModule,
     browser.platformBrowserDynamicTesting()
 );
 
-var testContext = require.context('../app', true, /\.spec\.ts/);
+// Then we find all the tests.
-
+const context = require.context('./../app', true, /\.spec\.ts$/);
-/**
+// And load the modules.
- * Get all the files, for each file, call the context function
+context.keys().map(context);
- * that will require the file and load it up here. Context will
- * loop and require those spec files here.
- */
-function requireAll(requireContext) {
-    return requireContext.keys().map(requireContext);
-}
-
-/**
- * Requires and returns all modules that match.
- */
-var modules = requireAll(testContext);

frontend/app-config/webpack.config.js

@@ -27,15 +27,19 @@ const plugins = {
     // https://github.com/jrparish/tslint-webpack-plugin
     TsLintPlugin: require('tslint-webpack-plugin'),
     // https://www.npmjs.com/package/sass-lint-webpack
-    SassLintPlugin: require('sass-lint-webpack')
+    SassLintPlugin: require('sass-lint-webpack'),
+    // https://www.npmjs.com/package/webpack-bundle-analyzer
+    BundleAnalyzerPlugin: require('webpack-bundle-analyzer').BundleAnalyzerPlugin,
+    // https://www.npmjs.com/package/@angular-devkit/build-optimizer
+    BuildOptimizerWebpackPlugin: require('@angular-devkit/build-optimizer').BuildOptimizerWebpackPlugin
 };
 
 module.exports = function (env) {
     const isDevServer = path.basename(require.main.filename) === 'webpack-dev-server.js';
     const isProduction = env && env.production;
     const isTests = env && env.target === 'tests';
-    const isCoverage = env && env.coverage;
+    const isTestCoverage = env && env.coverage;
-    const isAot = isProduction;
+    const isAnalyzing = isProduction && env.analyze;
 
     const configFile = isTests ? 'tsconfig.spec.json' : 'tsconfig.app.json';
 
@@ -286,13 +290,13 @@ module.exports = function (env) {
         );
     }
 
-    if (!isCoverage) {
+    if (!isTestCoverage) {
         config.plugins.push(
             new plugins.NgToolsWebpack.AngularCompilerPlugin({
                 directTemplateLoading: true,
                 entryModule: 'app/app.module#AppModule',
                 sourceMap: !isProduction,
-                skipCodeGeneration: !isAot,
+                skipCodeGeneration: false,
                 tsConfigPath: configFile
             })
         );
@@ -321,9 +325,21 @@ module.exports = function (env) {
         config.performance = {
             hints: false
         };
+
+        config.plugins.push(new plugins.BuildOptimizerWebpackPlugin());
+        
+        config.module.rules.push({
+            test: /\.js$/,
+            use: [{
+                loader: '@angular-devkit/build-optimizer/webpack-loader',
+                options: {
+                    sourceMap: false
+                }
+            }]
+        });
     }
 
-    if (isCoverage) {
+    if (isTestCoverage) {
         // Do not instrument tests.
         config.module.rules.push({
             test: /\.ts$/,
@@ -393,5 +409,9 @@ module.exports = function (env) {
         });
     }
 
+    if (isAnalyzing) {
+        config.plugins.push(new plugins.BundleAnalyzerPlugin());
+    }
+
     return config;
 };

frontend/app/features/api/pages/graphql/graphql-page.component.scss

@@ -1,8 +1,3 @@
-// Graphiql hints
-::ng-deep {
-    @import '~graphiql/dist/show-hint';
-}
-
 :host ::ng-deep {
     @import '~graphiql/graphiql';
 

frontend/app/features/api/pages/graphql/graphql-page.component.ts

@@ -12,7 +12,7 @@ import { catchError } from 'rxjs/operators';
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 
-import * as GraphiQL from 'graphiql';
+import GraphiQL from 'graphiql';
 
 import { AppsState, GraphQlService } from '@app/shared';
 

frontend/app/shared/interceptors/auth.interceptor.spec.ts

@@ -5,7 +5,7 @@
  * Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved.
  */
 
-import { HTTP_INTERCEPTORS, HttpClient, HttpHeaders } from '@angular/common/http';
+import { HttpClient, HttpHeaders, HTTP_INTERCEPTORS } from '@angular/common/http';
 import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';
 import { inject, TestBed } from '@angular/core/testing';
 import { Router } from '@angular/router';

frontend/package.json

@@ -11,104 +11,107 @@
     "test:clean": "rimraf _test-output",
     "tslint": "tslint -c tslint.json -p tsconfig.json app/**/*.ts",
     "build": "node --max_old_space_size=4096 node_modules/webpack/bin/webpack.js --config app-config/webpack.config.js --env.production",
-    "build:clean": "rimraf wwwroot/build"
+    "build:clean": "rimraf wwwroot/build",
+    "build:analyze": "node --max_old_space_size=4096 node_modules/webpack/bin/webpack.js --config app-config/webpack.config.js --env.production --env.analyze",
+    "postinstall": "ngcc --properties es2015 browser module main --first-only --create-ivy-entry-points"
   },
   "dependencies": {
-    "@angular/animations": "8.2.9",
+    "@angular/animations": "9.0.0",
-    "@angular/cdk": "8.2.3",
+    "@angular/cdk": "9.0.0",
-    "@angular/common": "8.2.9",
+    "@angular/common": "9.0.0",
-    "@angular/core": "8.2.9",
+    "@angular/core": "9.0.0",
-    "@angular/forms": "8.2.9",
+    "@angular/forms": "9.0.0",
-    "@angular/platform-browser": "8.2.9",
+    "@angular/platform-browser": "9.0.0",
-    "@angular/platform-browser-dynamic": "8.2.9",
+    "@angular/platform-browser-dynamic": "9.0.0",
-    "@angular/platform-server": "8.2.9",
+    "@angular/platform-server": "9.0.0",
-    "@angular/router": "8.2.9",
+    "@angular/router": "9.0.0",
     "angular-mentions": "^1.1.3",
     "angular2-chartjs": "0.5.1",
     "babel-polyfill": "6.26.0",
-    "bootstrap": "4.3.1",
+    "bootstrap": "4.4.1",
-    "core-js": "3.2.1",
+    "core-js": "3.6.4",
     "cropperjs": "2.0.0-alpha.1",
-    "graphiql": "0.13.2",
+    "graphiql": "0.17.5",
-    "graphql": "14.4.2",
+    "graphql": "14.6.0",
     "image-focus": "^1.1.0",
     "marked": "0.7.0",
     "mersenne-twister": "1.1.0",
     "moment": "2.24.0",
-    "mousetrap": "1.6.3",
+    "mousetrap": "1.6.5",
-    "ngx-color-picker": "8.2.0",
+    "ngx-color-picker": "9.0.0",
-    "oidc-client": "1.9.1",
+    "oidc-client": "1.10.1",
     "pikaday": "1.8.0",
-    "progressbar.js": "1.0.1",
+    "progressbar.js": "1.1.0",
     "react": "16.10.2",
     "react-dom": "16.10.2",
-    "rxjs": "6.5.3",
+    "rxjs": "6.5.4",
-    "slugify": "1.3.5",
+    "slugify": "1.3.6",
     "tslib": "1.10.0",
     "zone.js": "0.10.2"
   },
   "devDependencies": {
-    "@angular-devkit/build-optimizer": "0.803.8",
+    "@angular-devkit/build-optimizer": "^0.900.1",
-    "@angular/compiler": "8.2.9",
+    "@angular/compiler": "9.0.0",
-    "@angular/compiler-cli": "8.2.9",
+    "@angular/compiler-cli": "9.0.0",
-    "@ngtools/webpack": "8.3.8",
+    "@ngtools/webpack": "9.0.1",
     "@types/core-js": "2.5.2",
-    "@types/jasmine": "3.4.2",
+    "@types/jasmine": "3.5.3",
-    "@types/marked": "0.6.5",
+    "@types/marked": "0.7.2",
     "@types/mersenne-twister": "1.1.2",
     "@types/mousetrap": "1.6",
-    "@types/node": "12.7.11",
+    "@types/node": "13.7.0",
-    "@types/react": "16.9.5",
+    "@types/react": "16.9.19",
-    "@types/react-dom": "16.9.1",
+    "@types/react-dom": "16.9.5",
-    "@types/sortablejs": "1.7.2",
+    "browserslist": "4.8.6",
-    "browserslist": "4.7.0",
+    "caniuse-lite": "1.0.30001025",
-    "caniuse-lite": "1.0.30000998",
     "circular-dependency-plugin": "5.2.0",
-    "codelyzer": "5.1.2",
+    "codelyzer": "5.2.1",
-    "css-loader": "3.2.0",
+    "css-loader": "3.4.2",
     "cssnano": "^4.1.10",
-    "file-loader": "4.2.0",
+    "entities": "^2.0.0",
+    "file-loader": "5.0.2",
     "html-loader": "0.5.5",
     "html-webpack-plugin": "3.2.0",
     "ignore-loader": "0.1.2",
     "istanbul-instrumenter-loader": "3.0.1",
     "jasmine-core": "3.5.0",
-    "karma": "4.3.0",
+    "karma": "4.4.1",
     "karma-chrome-launcher": "3.1.0",
     "karma-cli": "2.0.0",
-    "karma-coverage-istanbul-reporter": "2.1.0",
+    "karma-coverage-istanbul-reporter": "2.1.1",
     "karma-htmlfile-reporter": "0.3.8",
-    "karma-jasmine": "2.0.1",
+    "karma-jasmine": "3.1.0",
-    "karma-jasmine-html-reporter": "1.4.2",
+    "karma-jasmine-html-reporter": "1.5.2",
     "karma-mocha-reporter": "2.2.5",
     "karma-sourcemap-loader": "0.3.7",
     "karma-webpack": "4.0.2",
-    "mini-css-extract-plugin": "0.8.0",
+    "mini-css-extract-plugin": "0.9.0",
-    "node-sass": "4.12.0",
+    "node-sass": "4.13.1",
     "optimize-css-assets-webpack-plugin": "5.0.3",
     "postcss-import": "^12.0.1",
     "postcss-loader": "^3.0.0",
     "postcss-preset-env": "^6.7.0",
-    "raw-loader": "3.1.0",
+    "raw-loader": "4.0.0",
     "resize-observer-polyfill": "^1.5.1",
-    "rimraf": "3.0.0",
+    "rimraf": "3.0.1",
     "rxjs-tslint": "0.1.7",
     "sass-lint": "^1.13.1",
     "sass-lint-webpack": "^1.0.2",
-    "sass-loader": "8.0.0",
+    "sass-loader": "8.0.2",
-    "style-loader": "1.0.0",
+    "style-loader": "1.1.3",
     "sugarss": "^2.0.0",
-    "terser-webpack-plugin": "2.2.1",
+    "terser-webpack-plugin": "2.3.4",
-    "ts-loader": "6.2.0",
+    "ts-loader": "6.2.1",
     "tsconfig-paths-webpack-plugin": "3.2.0",
-    "tslint": "5.20.0",
+    "tslint": "6.0.0",
-    "tslint-immutable": "5.4.0",
+    "tslint-immutable": "6.0.1",
     "tslint-webpack-plugin": "2.1.0",
     "typemoq": "2.1.0",
-    "typescript": "3.5.3",
+    "typescript": "3.7.5",
-    "underscore": "1.9.1",
+    "underscore": "1.9.2",
-    "webpack": "4.41.0",
+    "webpack": "4.41.5",
-    "webpack-cli": "3.3.9",
+    "webpack-bundle-analyzer": "^3.6.0",
-    "webpack-dev-server": "3.8.2"
+    "webpack-cli": "3.3.10",
+    "webpack-dev-server": "3.10.3"
   }
 }

frontend/tsconfig.json

@@ -13,7 +13,6 @@
         ],
         "moduleResolution": "node",
         "module": "esnext",
-        "noEmitHelpers": true,
         "noImplicitAny": true,
         "noUnusedLocals": true,
         "noUnusedParameters": false,
@@ -30,7 +29,7 @@
     },
     "angularCompilerOptions": {
         "fullTemplateTypeCheck": true,
-        // https://angular.io/guide/angular-compiler-options
+        "strictInjectionParameters": true,
-        "strictInjectionParameters": true
+        "strictTemplate": true
     }
 }

frontend/tsconfig.spec.json

@@ -1,3 +1,7 @@
 {
-    "extends": "./tsconfig.json"
+    "extends": "./tsconfig.json",
+    "include": [
+        "app/**/*.d.ts",
+        "app/**/*.spec.ts"
+    ]
 }