Upgrade to NG9 (#486)

* Upgrade to NG9 * Build fixed. * Tsconfig udpated * Small build optimization.
6 years ago · 343768a6dd
9 changed files with 1942 additions and 3537 deletions
--- a/frontend/app-config/karma-test-shim.js
+++ b/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/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');
+require('zone.js/dist/zone-testing');

-var testing = require('@angular/core/testing');
-var browser = require('@angular/platform-browser-dynamic/testing');
+const testing = require('@angular/core/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/);
-
-/**
- * Get all the files, for each file, call the context function
- * 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);
+// Then we find all the tests.
+const context = require.context('./../app', true, /\.spec\.ts$/);
+// And load the modules.
+context.keys().map(context);
--- a/frontend/app-config/webpack.config.js
+++ b/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 isAot = isProduction;
+    const isTestCoverage = env && env.coverage;
+    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;
 };
--- a/frontend/app/features/api/pages/graphql/graphql-page.component.scss
+++ b/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';

--- a/frontend/app/features/api/pages/graphql/graphql-page.component.ts
+++ b/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';

--- a/frontend/app/shared/interceptors/auth.interceptor.spec.ts
+++ b/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';
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
--- a/frontend/package.json
+++ b/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/cdk": "8.2.3",
-    "@angular/common": "8.2.9",
-    "@angular/core": "8.2.9",
-    "@angular/forms": "8.2.9",
-    "@angular/platform-browser": "8.2.9",
-    "@angular/platform-browser-dynamic": "8.2.9",
-    "@angular/platform-server": "8.2.9",
-    "@angular/router": "8.2.9",
+    "@angular/animations": "9.0.0",
+    "@angular/cdk": "9.0.0",
+    "@angular/common": "9.0.0",
+    "@angular/core": "9.0.0",
+    "@angular/forms": "9.0.0",
+    "@angular/platform-browser": "9.0.0",
+    "@angular/platform-browser-dynamic": "9.0.0",
+    "@angular/platform-server": "9.0.0",
+    "@angular/router": "9.0.0",
    "angular-mentions": "^1.1.3",
    "angular2-chartjs": "0.5.1",
    "babel-polyfill": "6.26.0",
-    "bootstrap": "4.3.1",
-    "core-js": "3.2.1",
+    "bootstrap": "4.4.1",
+    "core-js": "3.6.4",
    "cropperjs": "2.0.0-alpha.1",
-    "graphiql": "0.13.2",
-    "graphql": "14.4.2",
+    "graphiql": "0.17.5",
+    "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",
-    "ngx-color-picker": "8.2.0",
-    "oidc-client": "1.9.1",
+    "mousetrap": "1.6.5",
+    "ngx-color-picker": "9.0.0",
+    "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",
-    "slugify": "1.3.5",
+    "rxjs": "6.5.4",
+    "slugify": "1.3.6",
    "tslib": "1.10.0",
    "zone.js": "0.10.2"
  },
  "devDependencies": {
-    "@angular-devkit/build-optimizer": "0.803.8",
-    "@angular/compiler": "8.2.9",
-    "@angular/compiler-cli": "8.2.9",
-    "@ngtools/webpack": "8.3.8",
+    "@angular-devkit/build-optimizer": "^0.900.1",
+    "@angular/compiler": "9.0.0",
+    "@angular/compiler-cli": "9.0.0",
+    "@ngtools/webpack": "9.0.1",
    "@types/core-js": "2.5.2",
-    "@types/jasmine": "3.4.2",
-    "@types/marked": "0.6.5",
+    "@types/jasmine": "3.5.3",
+    "@types/marked": "0.7.2",
    "@types/mersenne-twister": "1.1.2",
    "@types/mousetrap": "1.6",
-    "@types/node": "12.7.11",
-    "@types/react": "16.9.5",
-    "@types/react-dom": "16.9.1",
-    "@types/sortablejs": "1.7.2",
-    "browserslist": "4.7.0",
-    "caniuse-lite": "1.0.30000998",
+    "@types/node": "13.7.0",
+    "@types/react": "16.9.19",
+    "@types/react-dom": "16.9.5",
+    "browserslist": "4.8.6",
+    "caniuse-lite": "1.0.30001025",
    "circular-dependency-plugin": "5.2.0",
-    "codelyzer": "5.1.2",
-    "css-loader": "3.2.0",
+    "codelyzer": "5.2.1",
+    "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-html-reporter": "1.4.2",
+    "karma-jasmine": "3.1.0",
+    "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",
-    "node-sass": "4.12.0",
+    "mini-css-extract-plugin": "0.9.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",
-    "style-loader": "1.0.0",
+    "sass-loader": "8.0.2",
+    "style-loader": "1.1.3",
    "sugarss": "^2.0.0",
-    "terser-webpack-plugin": "2.2.1",
-    "ts-loader": "6.2.0",
+    "terser-webpack-plugin": "2.3.4",
+    "ts-loader": "6.2.1",
    "tsconfig-paths-webpack-plugin": "3.2.0",
-    "tslint": "5.20.0",
-    "tslint-immutable": "5.4.0",
+    "tslint": "6.0.0",
+    "tslint-immutable": "6.0.1",
    "tslint-webpack-plugin": "2.1.0",
    "typemoq": "2.1.0",
-    "typescript": "3.5.3",
-    "underscore": "1.9.1",
-    "webpack": "4.41.0",
-    "webpack-cli": "3.3.9",
-    "webpack-dev-server": "3.8.2"
+    "typescript": "3.7.5",
+    "underscore": "1.9.2",
+    "webpack": "4.41.5",
+    "webpack-bundle-analyzer": "^3.6.0",
+    "webpack-cli": "3.3.10",
+    "webpack-dev-server": "3.10.3"
  }
 }
--- a/frontend/tsconfig.json
+++ b/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
    }
 }
--- a/frontend/tsconfig.spec.json
+++ b/frontend/tsconfig.spec.json
@ -1,3 +1,7 @@
 {
-    "extends": "./tsconfig.json"
+    "extends": "./tsconfig.json",
+    "include": [
+        "app/**/*.d.ts",
+        "app/**/*.spec.ts"
+    ]
 }