Migration to angular cli (#824)

* Migration to angular cli

* Fix tests.

* Use headless chrome.

* No sandbox.

* Better config.

* Simplify debugging.

.gitignore

@@ -1,18 +1,19 @@
 # User-specific files
+*.log
 *.suo
 *.user
 *.vs
-*.log
 
+.angular
 .awCache
-
+.idea
 .vscode
-.awcache
 
 # Build results
 bin/
 build/
 obj/
+object/
 out/
 publish/
 
@@ -30,4 +31,3 @@ launchSettings.json
 
 /frontend/app-config/localhost-key.pem
 /frontend/app-config/localhost.pem
-.idea

dev/squidex-dev.key

@@ -0,0 +1,28 @@
+-----BEGIN PRIVATE KEY-----
+MIIEvwIBADANBgkqhkiG9w0BAQEFAASCBKkwggSlAgEAAoIBAQDh/y1tm+cbvrdH
+DZHh8LMgWGmuJxfgImLu0S//GLkQ4MQGjQEBkLSjoQLsjQI2B8zNzqM07DfouBmj
+nO+zu0argEPSyMxcEtQxB6aDCq+gHs+mamPs1d3JfgfP3yZjK7/wHhvF4pZaYhwI
+HNYwaq2BtRc1KvFnd9qjqoE1WfmucqlBGnHxHq5MW0Qyg9b1PIFRRAXB/WXPbutl
+ZkSBHOxq5bKnWeGryv8VuBeFEtQwhY14iscFxdb/tW7ieh8beW8TwQs3s6pFxou5
+TQXij5dCD52GC1QVemiAPsHh2hdOFE2DTJm01Mv32yGUsk1luF0V2hACpC2zb90c
+Gj4VY5eFAgMBAAECggEBAJ6Wd6V0AqBYm7ozjoxzYO+wuzAnZLy2xJ/7kWe8TJnI
+cCZ8qhkUF36/jRK7/LI3lQNTHvoTTUR0dCF5DkgcggH1NyLiH235FIf3a2SHiiid
+lm+cNtTKWyF63DaFzCVJXR49spWRZJq2QB99RNyi73CWyFtZ8B8AXx/8lUEAC5La
+t8Ftb/M5ieKQ9dAxyGL/U9L13ZmSO+J5Lc0ez9OwFpvNBNy353HKT0FL+qFuNV0K
+g+t+x0DRudlL7uxeACPdnBlaEaT3ILWqCig6IBcILgNfGofuCC/hMLMcx8JUoQcg
+atxife5w5Yyrxpsls1MLJEIhC02CKGsMwxXYPxaJjH0CgYEA9Rl0ivKaQSp/g43w
+Frt84za70J68ZSrAP7pLHETEpEZnUxGX6O9glS8R5nZBZZsOr+7l6GcGK0QodyBy
+CIpKppGt7JXSLnvq6FQeP4p5z6DTfKinfHhUCBffoQsDumMCQxsSLUmCpSSU5uXg
+Pv69i4vcRxs3EXw/78gu8jZDpEsCgYEA7Aw7UrV0IHgbfMTjPOrgrxMO02uKwya4
+2xf9a8Qst2KUVdV32LgKr3wqVhnaFWJTOoKWWnvOvzRLvkrz0UlevqwXDiNy9Lp+
+5R41KGi6QR3ehwQvizrtEkHange/mtvMh/7BwXRF2u7xnyjWavVs1iFCt/CNg3UK
+rMqbcz63MW8CgYASFvfgDXnPF3jj18UBmILmLjL8ecrD2LzptzE1++lbioqzudex
+bIF/YUL79HxtKF2UJJi5Z2kwJk6qRC3GbZaG5rekf4ZMwf6beSHmZK0K4v7Y84Wx
+DRx+oGxz8WEsD4SqOURFLWjEEYgf5pV/cMPCmeb/JIYS902sv+SfIdwqMwKBgQDT
+LJI6CVnN3oYA1ofRLPQ7zJn77P8kXdUNNWYj7kpu+cNpEuP4P5ZXroaVpuUjMmbx
+NnjalF6/UkLdCGMefjxD6uNpY69pYBs8UQ0PjLnsnZNCSS1bqykCp2W08YuqOC/A
+Dts6fhIsro39bOR+pfhrjTAKLSv9Sk11joEJ1jbAAwKBgQCHSGKYa4ugobYx/0Bz
+LYayNm4z0zf1V4aRlJZu6GyAoeBc1EEEXavmkCEJ7MEYoUDLp6ywuDnUybHzoa6c
+I0spWppC8GGGDhrxtrBS35tfENclhdxoUVorOI/yn8iJZtc1DU3vPFXNKUEYqgew
+gbGUoYGragfhbOfNGwkQ7C7jpA==
+-----END PRIVATE KEY-----

frontend/.browserslistrc

@@ -0,0 +1,16 @@
+# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
+# For additional information regarding the format and rule options, please see:
+# https://github.com/browserslist/browserslist#queries
+
+# For the full list of supported browsers by the Angular framework, please see:
+# https://angular.io/guide/browser-support
+
+# You can see what browsers were selected by your queries by running:
+#   npx browserslist
+
+last 1 Chrome version
+last 1 Firefox version
+last 2 Edge major versions
+last 2 Safari major versions
+last 2 iOS major versions
+Firefox ESR

frontend/.gitignore

@@ -0,0 +1,46 @@
+# See http://help.github.com/ignore-files/ for more about ignoring files.
+
+# compiled output
+/dist
+/tmp
+/out-tsc
+# Only exists if Bazel was run
+/bazel-out
+
+# dependencies
+/node_modules
+
+# profiling files
+chrome-profiler-events*.json
+
+# IDEs and editors
+/.idea
+.project
+.classpath
+.c9/
+*.launch
+.settings/
+*.sublime-workspace
+
+# IDE - VSCode
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
+.history/*
+
+# misc
+/.angular/cache
+/.sass-cache
+/connect.lock
+/coverage
+/libpeerconnection.log
+npm-debug.log
+yarn-error.log
+testem.log
+/typings
+
+# System Files
+.DS_Store
+Thumbs.db

frontend/angular.json

@@ -0,0 +1,123 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "newProjectRoot": "projects",
+  "projects": {
+    "squidex": {
+      "projectType": "application",
+      "schematics": {
+        "@schematics/angular:component": {
+          "style": "scss"
+        },
+        "@schematics/angular:application": {
+          "strict": true
+        }
+      },
+      "root": "",
+      "sourceRoot": "src",
+      "prefix": "sqx",
+      "architect": {
+        "build": {
+          "builder": "@angular-builders/custom-webpack:browser",
+          "options": {
+            "outputPath": "build",
+            "index": "src/index.html",
+            "main": "src/main.ts",
+            "polyfills": "src/polyfills.ts",
+            "tsConfig": "tsconfig.app.json",
+            "inlineStyleLanguage": "scss",
+            "allowedCommonJsDependencies": [
+              "angular2-chartjs",
+              "pikaday/pikaday",
+              "progressbar.js"
+            ],
+            "assets": [
+              "src/app/assets"
+            ],
+            "styles": [
+              "src/styles.scss"
+            ],
+            "stylePreprocessorOptions": {
+              "includePaths": ["./src/app/theme"]
+            },
+            "customWebpackConfig": {
+              "path": "./src/config/webpack.config.js"
+            },
+            "scripts": []
+          },
+          "configurations": {
+            "production": {
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "2000kb",
+                  "maximumError": "3mb"
+                },
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "40kb",
+                  "maximumError": "80kb"
+                }
+              ],
+              "fileReplacements": [
+                {
+                  "replace": "src/environments/environment.ts",
+                  "with": "src/environments/environment.prod.ts"
+                }
+              ],
+              "outputHashing": "all"
+            },
+            "development": {
+              "buildOptimizer": false,
+              "optimization": false,
+              "vendorChunk": true,
+              "extractLicenses": false,
+              "sourceMap": true,
+              "namedChunks": true
+            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "serve": {
+          "builder": "@angular-builders/custom-webpack:dev-server",
+          "configurations": {
+            "production": {
+              "browserTarget": "squidex:build:production"
+            },
+            "development": {
+              "browserTarget": "squidex:build:development"
+            }
+          },
+          "options": {
+            "port": 3000,
+            "ssl": true,
+            "sslCert": "./../dev/squidex-dev.crt",
+            "sslKey": "./../dev/squidex-dev.key"
+          },
+          "defaultConfiguration": "development"
+        },
+        "test": {
+          "builder": "@angular-builders/custom-webpack:karma",
+          "options": {
+            "main": "src/test.ts",
+            "polyfills": "src/polyfills.ts",
+            "tsConfig": "tsconfig.spec.json",
+            "karmaConfig": "karma.conf.js",
+            "inlineStyleLanguage": "scss",
+            "assets": [
+              "src/assets"
+            ],
+            "styles": [
+              "src/styles.scss"
+            ],
+            "stylePreprocessorOptions": {
+              "includePaths": ["./src/app/theme"]
+            },
+            "scripts": []
+          }
+        }
+      }
+    }
+  },
+  "defaultProject": "squidex"
+}

frontend/app-config/helpers.js

@@ -1,18 +0,0 @@
-const path = require('path');
-
-const appRoot = path.resolve(__dirname, '..');
-
-function root() {
-    var newArgs = Array.prototype.slice.call(arguments, 0);
-
-    return path.join.apply(path, [appRoot].concat(newArgs));
-}
-
-function isDevServer() {
-    return path.basename(require.main.filename) === 'webpack-dev-server.js';
-}
-
-module.exports = {
-    root,
-    isDevServer,
-};

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

@@ -1,19 +0,0 @@
-Error.stackTraceLimit = Infinity;
-
-require('core-js/proposals/reflect-metadata');
-
-require('zone.js/dist/zone');
-require('zone.js/dist/zone-testing');
-
-const testing = require('@angular/core/testing');
-const browser = require('@angular/platform-browser-dynamic/testing');
-
-testing.getTestBed().initTestEnvironment(
-    browser.BrowserDynamicTestingModule,
-    browser.platformBrowserDynamicTesting(),
-);
-
-// Then we find all the tests.
-const context = require.context('./../app', true, /\.spec\.ts$/);
-// And load the modules.
-context.keys().map(context);

frontend/app-config/karma.conf.js

@@ -1,53 +0,0 @@
-const webpackConfig = require('./webpack.config');
-
-module.exports = function calculateConfig(config) {
-    const _config = {
-        /*
-         * Base path that will be used to resolve all patterns (e.g. files, exclude).
-         */
-        basePath: '',
-
-        frameworks: ['jasmine', 'webpack'],
-
-        /*
-         * Load additional test shim to setup angular for testing.
-         */
-        files: [
-            { pattern: './app-config/karma-test-shim.js', watched: false },
-        ],
-
-        preprocessors: {
-            './app-config/karma-test-shim.js': ['webpack', 'sourcemap'],
-        },
-
-        /*
-         * Load the files with webpack and use test configuration for it.
-         */
-        webpack: webpackConfig({ target: 'tests', jit: true }),
-
-        webpackMiddleware: {
-            stats: 'errors-only',
-        },
-
-        /*
-         * Leave Jasmine Spec Runner output visible in browser.
-         */
-        client: {
-            clearContext: false,
-        },
-
-        /*
-         * Use a mocha style console reporter and html reporter.
-         */
-        reporters: ['kjhtml', 'mocha'],
-
-        /*
-         * Run with chrome to enable debugging.
-         *
-         * available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
-         */
-        browsers: ['Chrome'],
-    };
-
-    config.set(_config);
-};

frontend/app-config/karma.coverage.conf.js

@@ -1,86 +0,0 @@
-const webpackConfig = require('./webpack.config');
-
-module.exports = function calculateConfig(config) {
-    const _config = {
-        /*
-         * Base path that will be used to resolve all patterns (e.g. files, exclude).
-         */
-        basePath: '',
-
-        frameworks: ['jasmine', 'webpack'],
-
-        /*
-         * Load additional test shim to setup angular for testing.
-         */
-        files: [
-            { pattern: './app-config/karma-test-shim.js', watched: false },
-        ],
-
-        preprocessors: {
-            './app-config/karma-test-shim.js': ['webpack', 'sourcemap'],
-        },
-
-        /*
-         * Load the files with webpack and use test configuration for it.
-         */
-        webpack: webpackConfig({ target: 'tests', coverage: true, jit: true }),
-
-        webpackMiddleware: {
-            stats: 'errors-only',
-        },
-
-        /*
-         * Use a mocha style console reporter, html reporter and the code coverage reporter.
-         */
-        reporters: ['kjhtml', 'mocha', 'coverage-istanbul'],
-
-        htmlReporter: {
-            useCompactStyle: true,
-            /*
-             * Use the same folder like the html report for coverage reports.
-             */
-            outputFile: '_test-output/tests.html',
-
-            /*
-             * Group the output by test suite (describe), equivalent to mocha reporter.
-             */
-            groupSuites: true,
-        },
-
-        coverageIstanbulReporter: {
-            // eslint-disable-next-line global-require
-            dir: require('path').join(__dirname, '../_test-output/coverage'),
-
-            reports: [
-              'html',
-              'lcovonly',
-            ],
-
-            fixWebpackSourcePaths: true,
-          },
-
-        /*
-         * Disable continuous Integration mode, run only one time.
-         */
-        singleRun: true,
-
-        customLaunchers: {
-            ChromeCustom: {
-                base: 'ChromeHeadless',
-                /*
-                 * We must disable the Chrome sandbox (Chrome's sandbox needs more permissions than Docker allows by default).
-                 */
-                flags: ['--no-sandbox'],
-            },
-        },
-
-        /*
-         * Run with chrome because phantom js does not provide all types.
-         *
-         * Available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
-         */
-        browsers: ['ChromeCustom'],
-    };
-
-    config.set(_config);
-};

frontend/app-config/webpack.config.js

@@ -1,445 +0,0 @@
-/* eslint-disable no-useless-escape */
-/* eslint-disable global-require */
-const webpack = require('webpack');
-const helpers = require('./helpers');
-const plugins = {
-    // https://github.com/webpack-contrib/mini-css-extract-plugin
-    MiniCssExtractPlugin: require('mini-css-extract-plugin'),
-    // https://github.com/dividab/tsconfig-paths-webpack-plugin
-    TsconfigPathsPlugin: require('tsconfig-paths-webpack-plugin'),
-    // https://github.com/aackerman/circular-dependency-plugin
-    CircularDependencyPlugin: require('circular-dependency-plugin'),
-    // https://github.com/jantimon/html-webpack-plugin
-    HtmlWebpackPlugin: require('html-webpack-plugin'),
-    // https://webpack.js.org/plugins/terser-webpack-plugin/
-    TerserPlugin: require('terser-webpack-plugin'),
-    // https://www.npmjs.com/package/@ngtools/webpack
-    NgToolsWebpack: require('@ngtools/webpack'),
-    // https://github.com/NMFR/optimize-css-assets-webpack-plugin
-    CssMinimizerPlugin: require('css-minimizer-webpack-plugin'),
-    // https://webpack.js.org/plugins/eslint-webpack-plugin/
-    ESLintPlugin: require('eslint-webpack-plugin'),
-    // https://github.com/webpack-contrib/stylelint-webpack-plugin
-    StylelintPlugin: require('stylelint-webpack-plugin'),
-    // 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,
-    // https://webpack.js.org/plugins/copy-webpack-plugin/
-    CopyPlugin: require('copy-webpack-plugin'),
-    // https://www.npmjs.com/package/webpack-filter-warnings-plugin
-    FilterWarningsPlugin: require('webpack-filter-warnings-plugin'),
-};
-
-module.exports = function calculateConfig(env) {
-    const isProduction = env && env.production;
-    const isAnalyzing = isProduction && env.analyze;
-    const isDevServer = helpers.isDevServer();
-    const isTestCoverage = env && env.coverage;
-    const isTests = env && env.target === 'tests';
-
-    const configFile = isTests ? 'tsconfig.spec.json' : 'tsconfig.app.json';
-
-    // eslint-disable-next-line no-console
-    console.log(`Use ${configFile}, Production: ${!!isProduction}, DevServer: ${!!isDevServer}`);
-
-    const config = {
-        mode: isProduction ? 'production' : 'development',
-
-        /*
-        * Source map for Karma from the help of karma-sourcemap-loader & karma-webpack.
-        *
-        * See: https://webpack.js.org/configuration/devtool/
-        */
-        devtool: isProduction ? false : 'inline-source-map',
-
-        output: {
-            /*
-            * The output directory as absolute path (required).
-            *
-            * See: https://webpack.js.org/configuration/output/#output-path
-            */
-            path: helpers.root('/build/'),
-
-            /*
-            * The filename of non-entry chunks as relative path inside the output.path directory.
-            *
-            * See: https://webpack.js.org/configuration/output/#output-chunkfilename
-            */
-            chunkFilename: '[id].[fullhash].chunk.js',
-
-            /* 
-            * The filename for assets.
-            */
-            assetModuleFilename: 'assets/[hash][ext][query]',
-        },
-
-        /*
-        * Options affecting the resolving of modules.
-        *
-        * See: https://webpack.js.org/configuration/resolve/
-        */
-        resolve: {
-            /*
-            * An array of extensions that should be used to resolve modules.
-            *
-            * See: https://webpack.js.org/configuration/resolve/#resolve-extensions
-            */
-            extensions: ['.ts', '.js', '.mjs', '.css', '.scss'],
-            modules: [
-                helpers.root('app'),
-                helpers.root('app', 'theme'),
-                helpers.root('node_modules'),
-            ],
-
-            plugins: [
-                new plugins.TsconfigPathsPlugin({
-                    configFile,
-                }),
-            ],
-        },
-
-        /*
-        * Options affecting the normal modules.
-        *
-        * See: https://webpack.js.org/configuration/module/
-        */
-        module: {
-            /*
-            * An array of Rules which are matched to requests when modules are created.
-            *
-            * See: https://webpack.js.org/configuration/module/#module-rules
-            */
-            rules: [{
-                // Mark files inside `@angular/core` as using SystemJS style dynamic imports.
-                test: /[\/\\]@angular[\/\\]core[\/\\].+\.js$/,
-                parser: { system: true },
-                include: [/node_modules/],
-            }, {
-                test: /\.js\.flow$/,
-                use: [{
-                    loader: 'ignore-loader',
-                }],
-                include: [/node_modules/],
-            }, {
-                test: /\.map$/,
-                use: [{
-                    loader: 'ignore-loader',
-                }],
-                include: [/node_modules/],
-            }, {
-                test: /\.d\.ts$/,
-                use: [{
-                    loader: 'ignore-loader',
-                }],
-                include: [/node_modules/],
-            }, {
-                test: /\.html$/,
-                use: [{
-                    loader: 'raw-loader',
-                }],
-            }, {
-                test: /\.css$/,
-                use: [
-                    plugins.MiniCssExtractPlugin.loader,
-                    {
-                        loader: 'css-loader',
-                    }, {
-                        loader: 'postcss-loader',
-                    }],
-            }, {
-                test: /\.scss$/,
-                use: [{
-                    loader: 'raw-loader',
-                }, {
-                    loader: 'postcss-loader',
-                }, {
-                    loader: 'sass-loader',
-                    options: {
-                        sassOptions: {
-                            includePaths: [helpers.root('app', 'theme')],
-                        },
-                    },
-                }],
-                exclude: helpers.root('app', 'theme'),
-            }, {
-                test: /\.scss$/,
-                /*
-                * Extract the content from a bundle to a file.
-                *
-                * See: https://github.com/webpack-contrib/extract-text-webpack-plugin
-                */
-                use: [
-                    plugins.MiniCssExtractPlugin.loader,
-                    {
-                        loader: 'css-loader',
-                    }, {
-                        loader: 'postcss-loader',
-                    }, {
-                        loader: 'sass-loader',
-                    }],
-                /*
-                * Do not include component styles.
-                */
-                include: helpers.root('app', 'theme'),
-            }],
-        },
-
-        performance: {
-            hints: false,
-        },
-
-        plugins: [
-            new plugins.FilterWarningsPlugin({
-                exclude: /System.import/,
-            }),
-
-            /*
-            * Always replace the context for the System.import in angular/core to prevent warnings.
-            */
-            new webpack.ContextReplacementPlugin(
-                /\@angular(\\|\/)core(\\|\/)/,
-                helpers.root('./app', '$_lazy_route_resources'),
-                {},
-            ),
-
-            new plugins.NgToolsWebpack.AngularWebpackPlugin({
-                tsconfig: configFile,
-                // Load directly from file system and skip webpack.
-                directTemplateLoading: true,
-
-                // Only run in aot compiler in production.
-                jitMode: !isProduction,
-            }),
-
-            /*
-            * Puts each bundle into a file and appends the hash of the file to the path.
-            *
-            * See: https://github.com/webpack-contrib/mini-css-extract-plugin
-            */
-            new plugins.MiniCssExtractPlugin({
-                filename: '[name].css',
-            }),
-
-            new webpack.LoaderOptionsPlugin({
-                options: {
-                    htmlLoader: {
-                        /*
-                        * Define the root for images, so that we can use absolute urls.
-                        *
-                        * See: https://github.com/webpack/html-loader#Advanced_Options
-                        */
-                        root: helpers.root('app', 'images'),
-                    },
-                    context: '/',
-                },
-            }),
-
-            new plugins.StylelintPlugin({
-                files: '**/*.scss',
-            }),
-
-            /*
-            * Detect circular dependencies in app.
-            *
-            * See: https://github.com/aackerman/circular-dependency-plugin
-            */
-            new plugins.CircularDependencyPlugin({
-                exclude: /([\\\/]node_modules[\\\/])|(ngfactory\.js$)/,
-                // Add errors to webpack instead of warnings
-                failOnError: true,
-            }),
-
-            /*
-            * Copy lazy loaded libraries to output.
-            */
-            new plugins.CopyPlugin({
-                patterns: [
-                    { from: './node_modules/simplemde/dist', to: 'dependencies/simplemde' },
-
-                    { from: './node_modules/tinymce/icons/default/icons.min.js', to: 'dependencies/tinymce/icons/default' },
-                    { from: './node_modules/tinymce/plugins/advlist', to: 'dependencies/tinymce/plugins/advlist' },
-                    { from: './node_modules/tinymce/plugins/code', to: 'dependencies/tinymce/plugins/code' },
-                    { from: './node_modules/tinymce/plugins/image', to: 'dependencies/tinymce/plugins/image' },
-                    { from: './node_modules/tinymce/plugins/link', to: 'dependencies/tinymce/plugins/link' },
-                    { from: './node_modules/tinymce/plugins/lists', to: 'dependencies/tinymce/plugins/lists' },
-                    { from: './node_modules/tinymce/plugins/media', to: 'dependencies/tinymce/plugins/media' },
-                    { from: './node_modules/tinymce/plugins/paste', to: 'dependencies/tinymce/plugins/paste' },
-                    { from: './node_modules/tinymce/skins', to: 'dependencies/tinymce/skins' },
-                    { from: './node_modules/tinymce/themes/silver', to: 'dependencies/tinymce/themes/silver' },
-                    { from: './node_modules/tinymce/tinymce.min.js', to: 'dependencies/tinymce' },
-
-                    { from: './node_modules/tui-code-snippet/dist', to: 'dependencies/tui-calendar' },
-                    { from: './node_modules/tui-calendar/dist', to: 'dependencies/tui-calendar' },
-
-                    { from: './node_modules/ace-builds/src-min/ace.js', to: 'dependencies/ace/ace.js' },
-                    { from: './node_modules/ace-builds/src-min/ext-language_tools.js', to: 'dependencies/ace/ext/language_tools.js' },
-                    { from: './node_modules/ace-builds/src-min/ext-modelist.js', to: 'dependencies/ace/ext/modelist.js' },
-                    { from: './node_modules/ace-builds/src-min/mode-*.js', to: 'dependencies/ace/[name][ext]' },
-                    { from: './node_modules/ace-builds/src-min/snippets', to: 'dependencies/ace/snippets' },
-                    { from: './node_modules/ace-builds/src-min/worker-*.js', to: 'dependencies/ace/[name][ext]' },
-
-                    { from: './node_modules/leaflet-control-geocoder/dist/Control.Geocoder.css', to: 'dependencies/leaflet' },
-                    { from: './node_modules/leaflet-control-geocoder/dist/Control.Geocoder.min.js', to: 'dependencies/leaflet' },
-                    { from: './node_modules/leaflet/dist/leaflet.js', to: 'dependencies/leaflet' },
-                    { from: './node_modules/leaflet/dist/leaflet.css', to: 'dependencies/leaflet' },
-                    { from: './node_modules/leaflet/dist/images', to: 'dependencies/leaflet/images' },
-
-                    { from: './node_modules/video.js/dist/video.min.js', to: 'dependencies/videojs' },
-                    { from: './node_modules/video.js/dist/video-js.min.css', to: 'dependencies/videojs' },
-
-                    { from: './node_modules/font-awesome/css/font-awesome.min.css', to: 'dependencies/font-awesome/css' },
-                    { from: './node_modules/font-awesome/fonts', to: 'dependencies/font-awesome/fonts' },
-
-                    { from: './node_modules/vis-network/standalone/umd/vis-network.min.js', to: 'dependencies' },
-                ],
-            }),
-        ],
-
-        devServer: {
-            headers: {
-                'Access-Control-Allow-Origin': '*',
-            },
-
-            historyApiFallback: true,
-        },
-    };
-
-    if (!isTests) {
-        /*
-        * The entry point for the bundle. Our Angular app.
-        *
-        * See: https://webpack.js.org/configuration/entry-context/
-        */
-        config.entry = {
-            shims: './app/shims.ts',
-            style: './app/style.js',
-            app: './app/app.ts',
-        };
-
-        config.plugins.push(
-            new plugins.HtmlWebpackPlugin({
-                filename: 'index.html',
-                hash: true,
-                chunks: ['shims', 'app'],
-                chunksSortMode: 'manual',
-                template: helpers.root('app', 'index.html'),
-            }),
-        );
-
-        config.plugins.push(
-            new plugins.HtmlWebpackPlugin({
-                filename: 'theme.html',
-                hash: true,
-                chunks: ['style'],
-                chunksSortMode: 'none',
-                template: helpers.root('app', '_theme.html'),
-            }),
-        );
-
-        /*
-        * Specifies the name of each output file on disk.
-        *
-        * See: https://webpack.js.org/configuration/output/#output-filename
-        */
-        config.output.filename = '[name].js';
-
-        if (isProduction) {
-            config.plugins.push(
-                new plugins.ESLintPlugin({
-                    files: [
-                        './app/**/*.ts',
-                    ],
-                }),
-            );
-        }
-    }
-
-    if (isProduction) {
-        config.optimization = {
-            minimizer: [
-                new plugins.TerserPlugin({
-                    terserOptions: {
-                        compress: true,
-                        ecma: 5,
-                        mangle: true,
-                        output: {
-                            comments: false,
-                        },
-                        safari10: true,
-                    },
-                    extractComments: true,
-                }),
-
-                new plugins.CssMinimizerPlugin({}),
-            ],
-        };
-
-        config.plugins.push(new plugins.BuildOptimizerWebpackPlugin());
-
-        config.module.rules.push({
-            test: /\.js$/,
-            use: [{
-                loader: '@angular-devkit/build-optimizer/webpack-loader',
-                options: {
-                    sourceMap: false,
-                },
-            }],
-        });
-        config.module.rules.push({
-            test: /\.m?js$/,
-            use: [{
-                loader: 'babel-loader',
-                options: {
-                    plugins: ['@angular/compiler-cli/linker/babel'],
-                    compact: false,
-                    cacheDirectory: true,
-                },
-            }],
-        });
-    } else {
-        config.module.rules.push({
-            test: /\.mjs$/,
-            type: 'javascript/auto',
-            include: [/node_modules/],
-        });
-    }
-
-    if (isTestCoverage) {
-        // Do not instrument tests.
-        config.module.rules.push({
-            test: /\.[jt]sx?$/,
-            use: [{
-                loader: '@ngtools/webpack',
-            }],
-            include: [/\.(e2e|spec)\.ts$/],
-        });
-
-        // Use instrument loader for all normal files.
-        config.module.rules.push({
-            test: /\.[jt]sx?$/,
-            use: [{
-                loader: '@jsdevtools/coverage-istanbul-loader',
-                options: {
-                    esModules: true,
-                },
-            }, {
-                loader: '@ngtools/webpack',
-            }],
-            exclude: [/\.(e2e|spec)\.ts$/],
-        });
-    } else {
-        config.module.rules.push({
-            test: /\.[jt]sx?$/,
-            use: [{
-                loader: '@ngtools/webpack',
-            }],
-        });
-    }
-
-    if (isAnalyzing) {
-        config.plugins.push(new plugins.BundleAnalyzerPlugin());
-    }
-
-    return config;
-};

frontend/app/shims.ts

@@ -1,95 +0,0 @@
-/*
- * Squidex Headless CMS
- *
- * @license
- * Copyright (c) Squidex UG (haftungsbeschränkt). All rights reserved.
- */
-
-import 'core-js/es/date';
-import 'core-js/es/math';
-import 'core-js/es/number';
-import 'core-js/es/regexp';
-
-// ES2015 array capabilities
-import 'core-js/modules/es.array.copy-within';
-import 'core-js/modules/es.array.every';
-import 'core-js/modules/es.array.fill';
-import 'core-js/modules/es.array.filter';
-import 'core-js/modules/es.array.find';
-import 'core-js/modules/es.array.find-index';
-import 'core-js/modules/es.array.for-each';
-import 'core-js/modules/es.array.from';
-import 'core-js/modules/es.array.index-of';
-import 'core-js/modules/es.array.is-array';
-import 'core-js/modules/es.array.iterator';
-import 'core-js/modules/es.array.join';
-import 'core-js/modules/es.array.last-index-of';
-import 'core-js/modules/es.array.map';
-import 'core-js/modules/es.array.of';
-import 'core-js/modules/es.array.reduce';
-import 'core-js/modules/es.array.reduce-right';
-import 'core-js/modules/es.array.slice';
-import 'core-js/modules/es.array.some';
-import 'core-js/modules/es.array.sort';
-
-// ES2015 function capabilities
-import 'core-js/modules/es.function.bind';
-import 'core-js/modules/es.function.has-instance';
-import 'core-js/modules/es.function.name';
-import 'core-js/modules/es.map';
-
-// ES2015 object capabilities
-import 'core-js/modules/es.object.assign';
-import 'core-js/modules/es.object.create';
-import 'core-js/modules/es.object.define-properties';
-import 'core-js/modules/es.object.define-property';
-import 'core-js/modules/es.object.freeze';
-import 'core-js/modules/es.object.get-own-property-descriptor';
-import 'core-js/modules/es.object.get-own-property-names';
-import 'core-js/modules/es.object.get-prototype-of';
-import 'core-js/modules/es.object.is';
-import 'core-js/modules/es.object.is-extensible';
-import 'core-js/modules/es.object.is-frozen';
-import 'core-js/modules/es.object.is-sealed';
-import 'core-js/modules/es.object.keys';
-import 'core-js/modules/es.object.prevent-extensions';
-import 'core-js/modules/es.object.seal';
-import 'core-js/modules/es.object.set-prototype-of';
-import 'core-js/modules/es.object.to-string';
-import 'core-js/modules/es.parse-float';
-import 'core-js/modules/es.parse-int';
-import 'core-js/modules/es.promise';
-import 'core-js/modules/es.set';
-
-// ES2015 string capabilities
-import 'core-js/modules/es.string.anchor';
-import 'core-js/modules/es.string.big';
-import 'core-js/modules/es.string.blink';
-import 'core-js/modules/es.string.bold';
-import 'core-js/modules/es.string.code-point-at';
-import 'core-js/modules/es.string.ends-with';
-import 'core-js/modules/es.string.fixed';
-import 'core-js/modules/es.string.fontcolor';
-import 'core-js/modules/es.string.fontsize';
-import 'core-js/modules/es.string.from-code-point';
-import 'core-js/modules/es.string.includes';
-import 'core-js/modules/es.string.italics';
-import 'core-js/modules/es.string.iterator';
-import 'core-js/modules/es.string.link';
-import 'core-js/modules/es.string.raw';
-import 'core-js/modules/es.string.repeat';
-import 'core-js/modules/es.string.small';
-import 'core-js/modules/es.string.starts-with';
-import 'core-js/modules/es.string.strike';
-import 'core-js/modules/es.string.sub';
-import 'core-js/modules/es.string.sup';
-import 'core-js/modules/es.string.trim';
-
-// ES2015 symbol capabilities
-import 'core-js/modules/es.symbol';
-import 'core-js/modules/es.weak-map';
-import 'core-js/modules/web.dom-collections.iterator';
-
-import 'reflect-metadata';
-
-import 'zone.js/dist/zone';

frontend/karma.conf.js

@@ -1 +1,56 @@
-module.exports = require('./app-config/karma.conf.js');
+// Karma configuration file, see link for more information
+// https://karma-runner.github.io/1.0/config/configuration-file.html
+
+module.exports = function (config) {
+  config.set({
+    basePath: '',
+    frameworks: ['jasmine', '@angular-devkit/build-angular'],
+    plugins: [
+      require('@angular-devkit/build-angular/plugins/karma'),
+      require('karma-chrome-launcher'),
+      require('karma-coverage'),
+      require('karma-jasmine-html-reporter'),
+      require('karma-jasmine'),
+    ],
+    client: {
+      jasmine: {
+        // you can add configuration options for Jasmine here
+        // the possible options are listed at https://jasmine.github.io/api/edge/Configuration.html
+        // for example, you can disable the random execution with `random: false`
+        // or set a specific seed with `seed: 4321`
+      },
+      clearContext: false, // leave Jasmine Spec Runner output visible in browser
+    },
+    jasmineHtmlReporter: {
+      suppressAll: true, // removes the duplicated traces
+    },
+    coverageReporter: {
+      dir: require('path').join(__dirname, './coverage/squidex'),
+      subdir: '.',
+      reporters: [
+        { type: 'html' },
+        { type: 'text-summary' },
+      ],
+    },
+    customLaunchers: {
+      ChromeHeadlessNoSandbox: {
+        base: 'ChromeHeadless',
+        // See /integration/README.md#browser-tests for more info on these args
+        flags: [
+          '--disable-dev-shm-usage',
+          '--disable-gpu',
+          '--headless',
+          '--no-sandbox',
+        ],
+      },
+    },
+    autoWatch: true,
+    browsers: ['Chrome'],
+    colors: true,
+    logLevel: config.LOG_INFO,
+    port: 9876,
+    reporters: ['progress', 'kjhtml'],
+    restartOnFileChange: true,
+    singleRun: false,
+  });
+};

frontend/karma.coverage.conf.js

@@ -1 +0,0 @@
-module.exports = require('./app-config/karma.coverage.conf.js');

frontend/package.json

@@ -1,22 +1,16 @@
 {
   "name": "squidex",
-  "version": "1.0.0",
-  "description": "Squidex Headless CMS",
-  "license": "MIT",
-  "repository": "https://github.com/SebastianStehle/Squidex",
+  "version": "0.0.0",
   "scripts": {
-    "start": "webpack serve --config app-config/webpack.config.js --port 3000 --hot --server-type https --server-options-pfx ../dev/squidex-dev.pfx --server-options-passphrase password --env WEBPACK_SERVE",
-    "test": "karma start",
-    "test:coverage": "karma start karma.coverage.conf.js",
-    "test:clean": "rimraf _test-output",
-    "lint:scripts": "eslint app/**/*.ts",
-    "lint:style": "stylelint app/**/*.scss",
-    "build": "node --trace-deprecation --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:analyze": "node --max_old_space_size=4096 node_modules/webpack/bin/webpack.js --config app-config/webpack.config.js --env production --env analyze",
-    "postinstall": "npx patch-package && ngcc",
-    "ngcc": "ngcc"
+    "build": "ng build",
+    "ng": "ng",
+    "postinstall": "npx patch-package",
+    "start": "ng serve",
+    "test": "ng test",
+    "test:coverage": "ng test --no-watch --code-coverage --browsers=ChromeHeadlessNoSandbox",
+    "watch": "ng build --watch --configuration development"
   },
+  "private": true,
   "dependencies": {
     "@angular/animations": "13.1.1",
     "@angular/cdk": "13.1.1",
@@ -29,6 +23,7 @@
     "@angular/platform-browser-dynamic": "13.1.1",
     "@angular/platform-server": "13.1.1",
     "@angular/router": "13.1.1",
+    "@babel/runtime": "^7.16.7",
     "@egjs/hammerjs": "2.0.17",
     "ace-builds": "1.4.13",
     "angular-gridster2": "11.2.0",
@@ -36,7 +31,7 @@
     "angular2-chartjs": "0.5.1",
     "babel-polyfill": "6.26.0",
     "bootstrap": "5.1.3",
-    "codemirror-graphql": "1.0.2",
+    "codemirror-graphql": "1.2.11",
     "core-js": "3.20.1",
     "cropperjs": "2.0.0-alpha.1",
     "date-fns": "2.28.0",
@@ -58,12 +53,14 @@
     "prop-types": "15.8.0",
     "react": "17.0.2",
     "react-dom": "17.0.2",
+    "resize-observer-polyfill": "1.5.1",
     "rxjs": "7.5.1",
     "simplemde": "1.11.2",
     "slugify": "1.6.4",
     "tinymce": "5.10.2",
     "tslib": "2.3.1",
     "tui-calendar": "^1.15.1",
+    "typemoq": "^2.1.0",
     "video.js": "7.17.0",
     "vis-data": "7.1.2",
     "vis-network": "9.1.0",
@@ -71,12 +68,13 @@
     "zone.js": "0.11.4"
   },
   "devDependencies": {
-    "@angular-devkit/build-optimizer": "0.1301.2",
-    "@angular/cli": "^13.1.2",
-    "@angular/compiler": "13.1.1",
-    "@angular/compiler-cli": "^13.1.1",
-    "@jsdevtools/coverage-istanbul-loader": "^3.0.5",
-    "@ngtools/webpack": "13.1.2",
+    "@angular-builders/custom-webpack": "^13.0.0",
+    "@angular-devkit/build-angular": "~13.1.2",
+    "@angular/cli": "~13.1.2",
+    "@angular/compiler": "^13.1.1",
+    "@angular/compiler-cli": "~13.1.0",
+    "@angular/elements": "^13.1.1",
+    "@babel/core": "^7.16.7",
     "@types/codemirror": "0.0.108",
     "@types/core-js": "2.5.5",
     "@types/jasmine": "3.10.2",
@@ -92,62 +90,26 @@
     "@types/ws": "8.2.2",
     "@typescript-eslint/eslint-plugin": "5.8.1",
     "@typescript-eslint/parser": "5.8.1",
+    "@webcomponents/custom-elements": "^1.5.0",
     "babel-loader": "^8.2.3",
-    "browserslist": "4.19.1",
-    "caniuse-lite": "1.0.30001294",
-    "circular-dependency-plugin": "5.2.2",
-    "codelyzer": "6.0.2",
     "copy-webpack-plugin": "10.2.0",
-    "css-loader": "6.5.1",
-    "css-minimizer-webpack-plugin": "^3.3.1",
-    "cssnano": "5.0.14",
-    "entities": "3.0.1",
     "eslint": "8.6.0",
     "eslint-config-airbnb-typescript": "16.1.0",
     "eslint-plugin-import": "2.25.3",
     "eslint-plugin-jsx-a11y": "6.5.1",
     "eslint-webpack-plugin": "3.1.1",
-    "html-loader": "2.1.2",
-    "html-webpack-plugin": "5.5.0",
-    "ignore-loader": "0.1.2",
-    "jasmine-core": "3.10.1",
-    "karma": "6.3.9",
-    "karma-chrome-launcher": "3.1.0",
-    "karma-cli": "2.0.0",
-    "karma-coverage-istanbul-reporter": "3.0.3",
-    "karma-htmlfile-reporter": "0.3.8",
-    "karma-jasmine": "4.0.1",
-    "karma-jasmine-html-reporter": "1.7.0",
-    "karma-mocha-reporter": "2.2.5",
-    "karma-sourcemap-loader": "0.3.8",
-    "karma-webpack": "5.0.0",
-    "mini-css-extract-plugin": "2.4.5",
-    "postcss-import": "14.0.2",
-    "postcss-loader": "6.2.1",
-    "postcss-preset-env": "7.1.0",
-    "raw-loader": "4.0.2",
-    "resize-observer-polyfill": "1.5.1",
-    "rimraf": "3.0.2",
-    "sass": "1.45.2",
-    "sass-loader": "12.4.0",
-    "style-loader": "3.3.1",
+    "jasmine-core": "~3.10.0",
+    "karma": "~6.3.0",
+    "karma-chrome-launcher": "~3.1.0",
+    "karma-coverage": "~2.1.0",
+    "karma-jasmine": "~4.0.0",
+    "karma-jasmine-html-reporter": "~1.7.0",
+    "raw-loader": "^4.0.2",
     "stylelint": "14.2.0",
     "stylelint-config-standard": "24.0.0",
     "stylelint-config-standard-scss": "^3.0.0",
     "stylelint-scss": "4.1.0",
     "stylelint-webpack-plugin": "3.1.0",
-    "sugarss": "4.0.1",
-    "terser": "5.10.0",
-    "terser-webpack-plugin": "5.3.0",
-    "ts-loader": "9.2.6",
-    "tsconfig-paths-webpack-plugin": "3.5.2",
-    "typemoq": "2.1.0",
-    "typescript": "4.5.4",
-    "underscore": "1.13.2",
-    "webpack": "5.65.0",
-    "webpack-bundle-analyzer": "4.5.0",
-    "webpack-cli": "4.9.1",
-    "webpack-dev-server": "4.7.2",
-    "webpack-filter-warnings-plugin": "1.2.1"
+    "typescript": "~4.5.2"
   }
 }

frontend/postcss.config.js

@@ -1,5 +0,0 @@
-module.exports = {
-    plugins: {
-        'postcss-preset-env': {},
-    },
-};

frontend/app/app.module.ts → frontend/src/app/app.module.ts

@@ -19,13 +19,14 @@ import { AppComponent } from './app.component';
 import { routing } from './app.routes';
 import { ApiUrlConfig, CurrencyConfig, DateHelper, DecimalSeparatorConfig, LocalizerService, SqxFrameworkModule, SqxSharedModule, TitlesConfig, UIOptions } from './shared';
 import { SqxShellModule } from './shell';
+import { environment } from './../environments/environment';
 
 DateHelper.setlocale(window['options']?.more?.culture);
 
 function configApiUrl() {
     const baseElements = document.getElementsByTagName('base');
 
-    let baseHref = null;
+    let baseHref: string = null!;
 
     if (baseElements.length > 0) {
         baseHref = baseElements[0].href;
@@ -59,18 +60,12 @@ function configCurrency() {
 }
 
 function configLocalizerService() {
-    if (process.env.NODE_ENV === 'production') {
-        return new LocalizerService(window['texts']);
-    } else {
-        const culture = DateHelper.getLocale();
-
-        return new LocalizerService(require(`./../../backend/i18n/frontend_${culture}.json`)).logMissingKeys();
-    }
+    return new LocalizerService(environment.textResolver()).logMissingKeys(environment.textLogger);
 }
 
 export class AppRouteReuseStrategy extends BaseRouteReuseStrategy {
     public shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot) {
-       return (future.routeConfig === curr.routeConfig) || (future.data.reuseId && future.data.reuseId === curr.data.reuseId);
+       return (future.routeConfig === curr.routeConfig) || (future.data['reuseId'] && future.data['reuseId'] === curr.data['reuseId']);
     }
 }
 

frontend/app/features/apps/pages/onboarding-dialog.component.scss → frontend/src/app/features/apps/pages/onboarding-dialog.component.scss

@@ -27,7 +27,7 @@ p {
 
         &-content {
             background-color: $color-dark-onboarding;
-            background-image: url('./images/onboarding-background.png');
+            background-image: url('../../../assets/onboarding-background.png');
             color: $color-white;
             position: relative;
         }