Angular fix.

frontend/app-config/webpack.config.js

@@ -157,7 +157,7 @@ module.exports = function (env) {
                 }, {
                     loader: 'sass-loader', 
                     options: {
-                        prependData: `
+                        additionalData: `
                             @import '_vars';
                             @import '_mixins';
                         `,
@@ -178,7 +178,9 @@ module.exports = function (env) {
              * 
              * See: https://github.com/webpack-contrib/mini-css-extract-plugin
              */
-            new plugins.MiniCssExtractPlugin('[name].css'),
+            new plugins.MiniCssExtractPlugin({
+                filename: '[name].css'
+            }),
 
             new webpack.LoaderOptionsPlugin({
                 options: {

frontend/app/app.routes.ts

@@ -86,4 +86,4 @@ export const routes: Routes = [
     }
 ];
 
-export const routing: ModuleWithProviders = RouterModule.forRoot(routes, { useHash: false });
+export const routing: ModuleWithProviders<RouterModule> = RouterModule.forRoot(routes, { useHash: false });

frontend/app/framework/angular/pipes/markdown.pipe.ts

@@ -11,7 +11,7 @@ import marked from 'marked';
 const renderer = new marked.Renderer();
 
 renderer.link = (href, _, text) => {
-    if (href.startsWith('mailto')) {
+    if (href && href.startsWith('mailto')) {
         return text;
     } else {
         return `<a href="${href}" target="_blank", rel="noopener">${text} <i class="icon-external-link"></i></a>`;

frontend/app/framework/angular/routers/router-2-state.ts

@@ -150,18 +150,18 @@ export class Router2State implements OnDestroy, StateSynchronizer {
     }
 
     public ngOnDestroy() {
-        this.mapper?.ngOnDestroy();
+        this.mapper?.destroy();
     }
 
     public mapTo<T extends object>(state: State<T>) {
-        this.mapper?.ngOnDestroy();
+        this.mapper?.destroy();
         this.mapper = this.mapper || new Router2StateMap<T>(state, this.route, this.router, this.localStore);
 
         return this.mapper;
     }
 }
 
-export class Router2StateMap<T extends object> implements OnDestroy, StateSynchronizerMap<T> {
+export class Router2StateMap<T extends object> implements StateSynchronizerMap<T> {
     private readonly syncs: { [field: string]: { synchronizer: RouteSynchronizer, value: any } } = {};
     private readonly keysToKeep: string[] = [];
     private syncDone: (() => void)[] = [];
@@ -187,7 +187,7 @@ export class Router2StateMap<T extends object> implements OnDestroy, StateSynchr
                 .subscribe(s => this.syncToRoute(s));
     }
 
-    public ngOnDestroy() {
+    public destroy() {
         this.syncDone = [];
 
         this.subscriptionQueryParams?.unsubscribe();

frontend/app/framework/angular/stateful.component.ts

@@ -6,8 +6,9 @@
  */
 
 // tslint:disable: readonly-array
+// tslint:disable: directive-class-suffix
 
-import { ChangeDetectorRef, OnDestroy } from '@angular/core';
+import { ChangeDetectorRef, Directive, OnDestroy } from '@angular/core';
 import { ControlValueAccessor } from '@angular/forms';
 import { Observable, Subscription } from 'rxjs';
 import { onErrorResumeNext, skip } from 'rxjs/operators';
@@ -16,6 +17,7 @@ import { Types } from './../utils/types';
 
 declare type UnsubscribeFunction = () => void;
 
+@Directive()
 export class ResourceOwner implements OnDestroy {
     private subscriptions: (Subscription | UnsubscribeFunction)[] = [];
 
@@ -50,6 +52,7 @@ export class ResourceOwner implements OnDestroy {
     }
 }
 
+@Directive()
 export abstract class StatefulComponent<T = any> extends State<T> implements OnDestroy {
     private readonly subscriptions = new ResourceOwner();
     private readonly subscription: Subscription;

frontend/app/framework/module.ts

@@ -178,7 +178,7 @@ import { AnalyticsService, AutocompleteComponent, AvatarComponent, CachingInterc
     ]
 })
 export class SqxFrameworkModule {
-    public static forRoot(): ModuleWithProviders {
+    public static forRoot(): ModuleWithProviders<SqxFrameworkModule> {
         return {
             ngModule: SqxFrameworkModule,
             providers: [

frontend/app/shared/components/help/help-markdown.pipe.ts

@@ -11,7 +11,7 @@ import marked from 'marked';
 const renderer = new marked.Renderer();
 
 renderer.link = (href, _, text) => {
-    if (!href.startsWith('http')) {
+    if (href && !href.startsWith('http')) {
         href = `https://docs.squidex.io/${href}`;
     }
 

frontend/app/shared/components/pipes.ts

@@ -6,12 +6,14 @@
  */
 
 // tslint:disable: no-pipe-impure
+// tslint:disable: directive-class-suffix
 
-import { ChangeDetectorRef, OnDestroy, Pipe, PipeTransform } from '@angular/core';
+import { ChangeDetectorRef, Directive, OnDestroy, Pipe, PipeTransform } from '@angular/core';
 import { ApiUrlConfig, UserDto, UsersProviderService } from '@app/shared/internal';
 import { Observable, of, Subscription } from 'rxjs';
 import { map } from 'rxjs/operators';
 
+@Directive()
 class UserAsyncPipe implements OnDestroy {
     private lastUserId: string;
     private lastValue: string | undefined = undefined;

frontend/app/shared/module.ts

@@ -119,7 +119,7 @@ import { SearchService } from './services/search.service';
     ]
 })
 export class SqxSharedModule {
-    public static forRoot(): ModuleWithProviders {
+    public static forRoot(): ModuleWithProviders<SqxSharedModule> {
         return {
             ngModule: SqxSharedModule,
             providers: [

frontend/package-lock.json

@@ -1094,6 +1094,14 @@
       "integrity": "sha512-/+CRPXpBDpo2RK9C68N3b2cOvO0Cf5B9aPijHsoDQTHivnGSObdOF2BRQOYjojWTDy6nQvMjmqRXIxH55VjxxA==",
       "dev": true
     },
+    "@types/codemirror": {
+      "version": "0.0.97",
+      "resolved": "https://registry.npmjs.org/@types/codemirror/-/codemirror-0.0.97.tgz",
+      "integrity": "sha512-n5d7o9nWhC49DjfhsxANP7naWSeTzrjXASkUDQh7626sM4zK9XP2EVcHp1IcCf/IPV6c7ORzDUDF3Bkt231VKg==",
+      "requires": {
+        "@types/tern": "*"
+      }
+    },
     "@types/color-name": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/@types/color-name/-/color-name-1.1.1.tgz",
@@ -1105,6 +1113,11 @@
       "integrity": "sha512-F9RHpjuPSit4dCCRXgi7XcqA01DAjy9QY+v9yICoxXsjXD9cgQpyZyL2eSZnTkBGXGaQnea8waZOZTogLDB+rA==",
       "dev": true
     },
+    "@types/estree": {
+      "version": "0.0.45",
+      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-0.0.45.tgz",
+      "integrity": "sha512-jnqIUKDUqJbDIUxm0Uj7bnlMnRm1T/eZ9N+AVMqhPgzrba2GhGG5o/jCTwmdPK709nEZsGoMzXEDUjcXHa3W0g=="
+    },
     "@types/glob": {
       "version": "7.1.3",
       "resolved": "https://registry.npmjs.org/@types/glob/-/glob-7.1.3.tgz",
@@ -1172,9 +1185,9 @@
       "dev": true
     },
     "@types/mousetrap": {
-      "version": "1.6.0",
+      "version": "1.6.3",
-      "resolved": "https://registry.npmjs.org/@types/mousetrap/-/mousetrap-1.6.0.tgz",
+      "resolved": "https://registry.npmjs.org/@types/mousetrap/-/mousetrap-1.6.3.tgz",
-      "integrity": "sha512-Jn2cF8X6RAMiSmJaATGjf2r3GzIfpZQpvnQhKprQ5sAbMaNXc7hc9sA2XHdMl3bEMEQhTV79JVW7n4Pgg7sjtg==",
+      "integrity": "sha512-13gmo3M2qVvjQrWNseqM3+cR6S2Ss3grbR2NZltgMq94wOwqJYQdgn8qzwDshzgXqMlSUtyPZjysImmktu22ew==",
       "dev": true
     },
     "@types/node": {
@@ -1251,6 +1264,14 @@
       "integrity": "sha512-W+bw9ds02rAQaMvaLYxAbJ6cvguW/iJXNT6lTssS1ps6QdrMKttqEAMEG/b5CR8TZl3/L7/lH0ZV5nNR1LXikA==",
       "dev": true
     },
+    "@types/tern": {
+      "version": "0.23.3",
+      "resolved": "https://registry.npmjs.org/@types/tern/-/tern-0.23.3.tgz",
+      "integrity": "sha512-imDtS4TAoTcXk0g7u4kkWqedB3E4qpjXzCpD2LU5M5NAXHzCDsypyvXSaG7mM8DKYkCRa7tFp4tS/lp/Wo7Q3w==",
+      "requires": {
+        "@types/estree": "*"
+      }
+    },
     "@types/tinymce": {
       "version": "4.5.24",
       "resolved": "https://registry.npmjs.org/@types/tinymce/-/tinymce-4.5.24.tgz",
@@ -14135,7 +14156,7 @@
       "dependencies": {
         "json5": {
           "version": "1.0.1",
-          "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.1.tgz",
+          "resolved": "http://registry.npmjs.org/json5/-/json5-1.0.1.tgz",
           "integrity": "sha512-aKS4WQjPenRxiQsC93MNfjx+nbF4PAdYzmd/1JIj8HYzqfbu86beTuNgXDzPknWk0n0uARlyewZo4s++ES36Ow==",
           "dev": true,
           "requires": {

frontend/package.json

@@ -27,9 +27,10 @@
     "@angular/platform-browser-dynamic": "10.0.11",
     "@angular/platform-server": "10.0.11",
     "@angular/router": "10.0.11",
+    "@egjs/hammerjs": "2.0.17",
     "@ngx-translate/core": "13.0.0",
     "@ngx-translate/http-loader": "6.0.0",
-    "@egjs/hammerjs": "2.0.17",
+    "@types/codemirror": "0.0.97",
     "ace-builds": "1.4.12",
     "angular-gridster2": "10.1.4",
     "angular-mentions": "1.2.0",
@@ -72,7 +73,7 @@
     "@types/jasmine": "3.5.13",
     "@types/marked": "1.1.0",
     "@types/mersenne-twister": "1.1.2",
-    "@types/mousetrap": "1.6",
+    "@types/mousetrap": "^1.6.3",
     "@types/node": "14.6.0",
     "@types/react": "16.9.46",
     "@types/react-dom": "16.9.8",