More required.

frontend/package.json

@@ -15,17 +15,17 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "15.0.4",
+    "@angular/animations": "16.1.8",
     "@angular/cdk": "15.0.3",
     "@angular/cdk-experimental": "15.0.3",
-    "@angular/common": "15.0.4",
-    "@angular/core": "15.0.4",
-    "@angular/forms": "15.0.4",
-    "@angular/localize": "15.0.4",
-    "@angular/platform-browser": "15.0.4",
-    "@angular/platform-browser-dynamic": "15.0.4",
-    "@angular/platform-server": "15.0.4",
-    "@angular/router": "15.0.4",
+    "@angular/common": "16.1.8",
+    "@angular/core": "16.1.8",
+    "@angular/forms": "16.1.8",
+    "@angular/localize": "16.1.8",
+    "@angular/platform-browser": "16.1.8",
+    "@angular/platform-browser-dynamic": "16.1.8",
+    "@angular/platform-server": "16.1.8",
+    "@angular/router": "16.1.8",
     "@babel/runtime": "^7.20.6",
     "@egjs/hammerjs": "2.0.17",
     "@graphiql/toolkit": "^0.8.0",
@@ -70,15 +70,15 @@
     "vis-data": "7.1.4",
     "vis-network": "9.1.2",
     "vis-util": "5.0.3",
-    "zone.js": "0.12.0"
+    "zone.js": "0.13.1"
   },
   "devDependencies": {
     "@angular-builders/custom-webpack": "^15.0.0",
-    "@angular-devkit/build-angular": "^15.0.4",
-    "@angular/cli": "^15.0.4",
-    "@angular/compiler": "^15.0.4",
-    "@angular/compiler-cli": "^15.0.4",
-    "@angular/elements": "^15.0.4",
+    "@angular-devkit/build-angular": "^16.1.7",
+    "@angular/cli": "^16.1.7",
+    "@angular/compiler": "^16.1.8",
+    "@angular/compiler-cli": "^16.1.8",
+    "@angular/elements": "^16.1.8",
     "@babel/core": "^7.20.5",
     "@compodoc/compodoc": "^1.1.19",
     "@storybook/addon-actions": "^6.5.15",
@@ -125,6 +125,6 @@
     "stylelint-config-standard-scss": "^5.0.0",
     "stylelint-scss": "4.3.0",
     "stylelint-webpack-plugin": "3.3.0",
-    "typescript": "4.8.4"
+    "typescript": "5.1.6"
   }
-}
+}

frontend/src/app/features/administration/guards/user-must-exist.guard.ts

@@ -6,14 +6,14 @@
  */
 
 import { Injectable } from '@angular/core';
-import { ActivatedRouteSnapshot, CanActivate, Router } from '@angular/router';
+import { ActivatedRouteSnapshot, Router } from '@angular/router';
 import { Observable } from 'rxjs';
 import { map, tap } from 'rxjs/operators';
 import { UsersState } from '@app/features/administration/internal';
 import { allParams } from '@app/framework';
 
 @Injectable()
-export class UserMustExistGuard implements CanActivate {
+export class UserMustExistGuard  {
     constructor(
         private readonly usersState: UsersState,
         private readonly router: Router,

frontend/src/app/features/apps/pages/app.component.ts

@@ -9,13 +9,13 @@ import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from
 import { AppDto, ModalModel } from '@app/shared';
 
 @Component({
-    selector: 'sqx-app[app]',
+    selector: 'sqx-app',
     styleUrls: ['./app.component.scss'],
     templateUrl: './app.component.html',
     changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class AppComponent {
-    @Input()
+    @Input({ required: true })
     public app!: AppDto;
 
     @Output()

frontend/src/app/features/apps/pages/news-dialog.component.ts

@@ -9,7 +9,7 @@ import { Component, EventEmitter, Input, Output } from '@angular/core';
 import { FeatureDto } from '@app/shared';
 
 @Component({
-    selector: 'sqx-news-dialog[features]',
+    selector: 'sqx-news-dialog',
     styleUrls: ['./news-dialog.component.scss'],
     templateUrl: './news-dialog.component.html',
 })
@@ -17,7 +17,7 @@ export class NewsDialogComponent {
     @Output()
     public close = new EventEmitter();
 
-    @Input()
+    @Input({ required: true })
     public features!: ReadonlyArray<FeatureDto>;
 
     public trackByFeature(_index: number, feature: FeatureDto) {

frontend/src/app/features/apps/pages/team.component.ts

@@ -9,13 +9,13 @@ import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from
 import { ModalModel, TeamDto } from '@app/shared';
 
 @Component({
-    selector: 'sqx-team[team]',
+    selector: 'sqx-team',
     styleUrls: ['./team.component.scss'],
     templateUrl: './team.component.html',
     changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class TeamComponent {
-    @Input()
+    @Input({ required: true })
     public team!: TeamDto;
 
     @Output()

frontend/src/app/features/assets/pages/asset-tag-dialog.component.ts

@@ -9,7 +9,7 @@ import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
 import { AssetsState, RenameAssetTagForm } from '@app/shared/internal';
 
 @Component({
-    selector: 'sqx-asset-tag-dialog[tagName]',
+    selector: 'sqx-asset-tag-dialog',
     styleUrls: ['./asset-tag-dialog.component.scss'],
     templateUrl: './asset-tag-dialog.component.html',
 })
@@ -17,7 +17,7 @@ export class AssetTagDialogComponent implements OnInit {
     @Output()
     public complete = new EventEmitter();
 
-    @Input()
+    @Input({ required: true })
     public tagName!: string;
 
     public editForm = new RenameAssetTagForm();

frontend/src/app/features/assets/pages/asset-tags.component.ts

@@ -11,7 +11,7 @@ import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from
 import { DialogModel, TagItem, TagsSelected } from '@app/shared';
 
 @Component({
-    selector: 'sqx-asset-tags[tags][tagsSelected]',
+    selector: 'sqx-asset-tags',
     styleUrls: ['./asset-tags.component.scss'],
     templateUrl: './asset-tags.component.html',
     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -23,10 +23,10 @@ export class AssetTagsComponent {
     @Output()
     public toggle = new EventEmitter<string>();
 
-    @Input()
+    @Input({ required: true })
     public tags!: ReadonlyArray<TagItem>;
 
-    @Input()
+    @Input({ required: true })
     public tagsSelected!: TagsSelected;
 
     @Input()

frontend/src/app/features/content/pages/content/content-event.component.ts

@@ -9,7 +9,7 @@ import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from
 import { ContentDto, HistoryEventDto, TypedSimpleChanges } from '@app/shared';
 
 @Component({
-    selector: 'sqx-content-event[content][event]',
+    selector: 'sqx-content-event',
     styleUrls: ['./content-event.component.scss'],
     templateUrl: './content-event.component.html',
     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -21,10 +21,10 @@ export class ContentEventComponent {
     @Output()
     public dataCompare = new EventEmitter();
 
-    @Input()
+    @Input({ required: true })
     public event!: HistoryEventDto;
 
-    @Input()
+    @Input({ required: true })
     public content!: ContentDto;
 
     public canLoadOrCompare = false;

frontend/src/app/features/content/pages/content/editor/content-editor.component.ts

@@ -9,7 +9,7 @@ import { Component, EventEmitter, Input, Output } from '@angular/core';
 import { AppLanguageDto, EditContentForm, FieldForm, FieldSection, RootFieldDto, SchemaDto, Version } from '@app/shared';
 
 @Component({
-    selector: 'sqx-content-editor[contentId][contentForm][formContext][language][languages][schema]',
+    selector: 'sqx-content-editor',
     styleUrls: ['./content-editor.component.scss'],
     templateUrl: './content-editor.component.html',
 })
@@ -32,10 +32,10 @@ export class ContentEditorComponent {
     @Input()
     public showIdInput = false;
 
-    @Input()
+    @Input({ required: true })
     public contentId!: string;
 
-    @Input()
+    @Input({ required: true })
     public contentForm!: EditContentForm;
 
     @Input()
@@ -44,16 +44,16 @@ export class ContentEditorComponent {
     @Input()
     public contentFormCompare?: EditContentForm | null;
 
-    @Input()
+    @Input({ required: true })
     public schema!: SchemaDto;
 
-    @Input()
+    @Input({ required: true })
     public formContext!: any;
 
-    @Input()
+    @Input({ required: true })
     public language!: AppLanguageDto;
 
-    @Input()
+    @Input({ required: true })
     public languages!: ReadonlyArray<AppLanguageDto>;
 
     public trackBySection(_index: number, section: FieldSection<RootFieldDto, FieldForm>) {

frontend/src/app/features/content/pages/content/editor/content-field.component.ts

@@ -10,7 +10,7 @@ import { Observable } from 'rxjs';
 import { AppLanguageDto, AppsState, changed$, disabled$, EditContentForm, FieldForm, invalid$, LocalStoreService, SchemaDto, Settings, TranslationsService, TypedSimpleChanges } from '@app/shared';
 
 @Component({
-    selector: 'sqx-content-field[form][formContext][formLevel][formModel][language][languages][schema]',
+    selector: 'sqx-content-field',
     styleUrls: ['./content-field.component.scss'],
     templateUrl: './content-field.component.html',
 })
@@ -27,25 +27,25 @@ export class ContentFieldComponent {
     @Input()
     public formCompare?: EditContentForm | null;
 
-    @Input()
+    @Input({ required: true })
     public formContext!: any;
 
-    @Input()
+    @Input({ required: true })
     public formLevel!: number;
 
-    @Input()
+    @Input({ required: true })
     public formModel!: FieldForm;
 
     @Input()
     public formModelCompare?: FieldForm;
 
-    @Input()
+    @Input({ required: true })
     public schema!: SchemaDto;
 
-    @Input()
+    @Input({ required: true })
     public language!: AppLanguageDto;
 
-    @Input()
+    @Input({ required: true })
     public languages!: ReadonlyArray<AppLanguageDto>;
 
     public showAllControls = false;

frontend/src/app/features/content/pages/content/editor/content-section.component.ts

@@ -14,7 +14,7 @@ interface State {
 }
 
 @Component({
-    selector: 'sqx-content-section[form][formContext][formLevel][formSection][language][languages][schema]',
+    selector: 'sqx-content-section',
     styleUrls: ['./content-section.component.scss'],
     templateUrl: './content-section.component.html',
     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -26,28 +26,28 @@ export class ContentSectionComponent extends StatefulComponent<State> {
     @Input()
     public isCompact?: boolean | null;
 
-    @Input()
+    @Input({ required: true })
     public form!: EditContentForm;
 
     @Input()
     public formCompare?: EditContentForm | null;
 
-    @Input()
+    @Input({ required: true })
     public formLevel!: number;
 
-    @Input()
+    @Input({ required: true })
     public formContext!: any;
 
-    @Input()
+    @Input({ required: true })
     public formSection!: FieldSection<RootFieldDto, FieldForm>;
 
-    @Input()
+    @Input({ required: true })
     public schema!: SchemaDto;
 
-    @Input()
+    @Input({ required: true })
     public language!: AppLanguageDto;
 
-    @Input()
+    @Input({ required: true })
     public languages!: ReadonlyArray<AppLanguageDto>;
 
     constructor(changeDetector: ChangeDetectorRef,

frontend/src/app/features/content/pages/content/editor/field-copy-button.component.ts

@@ -9,15 +9,15 @@ import { Component, Input } from '@angular/core';
 import { AppLanguageDto, FieldForm, ModalModel, TypedSimpleChanges } from '@app/shared';
 
 @Component({
-    selector: 'sqx-field-copy-button[formModel][languages]',
+    selector: 'sqx-field-copy-button',
     styleUrls: ['./field-copy-button.component.scss'],
     templateUrl: './field-copy-button.component.html',
 })
 export class FieldCopyButtonComponent {
-    @Input()
+    @Input({ required: true })
     public formModel!: FieldForm;
 
-    @Input()
+    @Input({ required: true })
     public languages!: ReadonlyArray<AppLanguageDto>;
 
     public languageCodes: ReadonlyArray<string> = [];

frontend/src/app/features/content/pages/content/editor/field-languages.component.ts

@@ -9,7 +9,7 @@ import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from
 import { AppLanguageDto, FieldForm } from '@app/shared';
 
 @Component({
-    selector: 'sqx-field-languages[formModel][language][languages]',
+    selector: 'sqx-field-languages',
     styleUrls: ['./field-languages.component.scss'],
     templateUrl: './field-languages.component.html',
     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -24,13 +24,13 @@ export class FieldLanguagesComponent {
     @Output()
     public languageChange = new EventEmitter<AppLanguageDto>();
 
-    @Input()
+    @Input({ required: true })
     public language!: AppLanguageDto;
 
-    @Input()
+    @Input({ required: true })
     public languages!: ReadonlyArray<AppLanguageDto>;
 
-    @Input()
+    @Input({ required: true })
     public formModel!: FieldForm;
 
     public toggleShowAllControls() {

frontend/src/app/features/content/pages/content/inspecting/content-inspection.component.ts

@@ -13,23 +13,23 @@ import { AppLanguageDto, ContentDto, ContentsService, ContentsState, ErrorDto, T
 type Mode = 'Content' | 'Data' | 'FlatData';
 
 @Component({
-    selector: 'sqx-content-inspection[appName][content][language][languages]',
+    selector: 'sqx-content-inspection',
     styleUrls: ['./content-inspection.component.scss'],
     templateUrl: './content-inspection.component.html',
 })
 export class ContentInspectionComponent implements OnDestroy {
     private languageChanges$ = new BehaviorSubject<AppLanguageDto | null>(null);
 
-    @Input()
+    @Input({ required: true })
     public appName!: string;
 
-    @Input()
+    @Input({ required: true })
     public language!: AppLanguageDto;
 
-    @Input()
+    @Input({ required: true })
     public languages!: ReadonlyArray<AppLanguageDto>;
 
-    @Input()
+    @Input({ required: true })
     public content!: ContentDto;
 
     public mode = new BehaviorSubject<Mode>('Content');

frontend/src/app/features/content/pages/content/references/content-references.component.ts

@@ -9,7 +9,7 @@ import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnDestroy
 import { AppLanguageDto, ComponentContentsState, ContentDto, QuerySynchronizer, Router2State, ToolbarService, TypedSimpleChanges } from '@app/shared';
 
 @Component({
-    selector: 'sqx-content-references[content][language][languages]',
+    selector: 'sqx-content-references',
     styleUrls: ['./content-references.component.scss'],
     templateUrl: './content-references.component.html',
     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -18,13 +18,13 @@ import { AppLanguageDto, ComponentContentsState, ContentDto, QuerySynchronizer,
     ],
 })
 export class ContentReferencesComponent implements OnInit, OnDestroy {
-    @Input()
+    @Input({ required: true })
     public content!: ContentDto;
 
-    @Input()
+    @Input({ required: true })
     public language!: AppLanguageDto;
 
-    @Input()
+    @Input({ required: true })
     public languages!: ReadonlyArray<AppLanguageDto>;
 
     @Input()

frontend/src/app/features/content/pages/contents/custom-view-editor.component.ts

@@ -10,7 +10,7 @@ import { ChangeDetectionStrategy, Component, EventEmitter, Input, Output } from
 import { TableField } from '@app/shared';
 
 @Component({
-    selector: 'sqx-custom-view-editor[allFields][listFields]',
+    selector: 'sqx-custom-view-editor',
     styleUrls: ['./custom-view-editor.component.scss'],
     templateUrl: './custom-view-editor.component.html',
     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -22,10 +22,10 @@ export class CustomViewEditorComponent {
     @Output()
     public listFieldsChange = new EventEmitter<ReadonlyArray<TableField>>();
 
-    @Input()
+    @Input({ required: true })
     public listFields!: TableField[];
 
-    @Input()
+    @Input({ required: true })
     public allFields!: ReadonlyArray<TableField>;
 
     public fieldsNotAdded!: ReadonlyArray<TableField>;

frontend/src/app/framework/angular/routers/can-deactivate.guard.ts

@@ -6,7 +6,7 @@
  */
 
 import { Injectable } from '@angular/core';
-import { CanDeactivate, UrlTree } from '@angular/router';
+import { UrlTree } from '@angular/router';
 import { Observable } from 'rxjs';
 
 export interface CanComponentDeactivate {
@@ -14,7 +14,7 @@ export interface CanComponentDeactivate {
 }
 
 @Injectable()
-export class CanDeactivateGuard implements CanDeactivate<CanComponentDeactivate> {
+export class CanDeactivateGuard  {
     public canDeactivate(component: CanComponentDeactivate) {
         return component?.canDeactivate ? component.canDeactivate() : true;
     }

frontend/src/app/shared/guards/app-must-exist.guard.ts

@@ -6,13 +6,13 @@
  */
 
 import { Injectable } from '@angular/core';
-import { ActivatedRouteSnapshot, CanActivate, Router } from '@angular/router';
+import { ActivatedRouteSnapshot, Router } from '@angular/router';
 import { Observable } from 'rxjs';
 import { map, tap } from 'rxjs/operators';
 import { AppsState } from './../state/apps.state';
 
 @Injectable()
-export class AppMustExistGuard implements CanActivate {
+export class AppMustExistGuard  {
     constructor(
         private readonly appsState: AppsState,
         private readonly router: Router,

frontend/src/app/shared/guards/content-must-exist.guard.ts

@@ -6,14 +6,14 @@
  */
 
 import { Injectable } from '@angular/core';
-import { ActivatedRouteSnapshot, CanActivate, Router } from '@angular/router';
+import { ActivatedRouteSnapshot, Router } from '@angular/router';
 import { Observable } from 'rxjs';
 import { map, tap } from 'rxjs/operators';
 import { allParams } from '@app/framework';
 import { ContentsState } from './../state/contents.state';
 
 @Injectable()
-export class ContentMustExistGuard implements CanActivate {
+export class ContentMustExistGuard  {
     constructor(
         private readonly contentsState: ContentsState,
         private readonly router: Router,

frontend/src/app/shared/guards/load-apps.guard.ts

@@ -6,13 +6,13 @@
  */
 
 import { Injectable } from '@angular/core';
-import { CanActivate } from '@angular/router';
+
 import { Observable } from 'rxjs';
 import { map } from 'rxjs/operators';
 import { AppsState } from './../state/apps.state';
 
 @Injectable()
-export class LoadAppsGuard implements CanActivate {
+export class LoadAppsGuard  {
     constructor(
         private readonly appsState: AppsState,
     ) {

frontend/src/app/shared/guards/load-languages.guard.ts

@@ -6,13 +6,13 @@
  */
 
 import { Injectable } from '@angular/core';
-import { CanActivate } from '@angular/router';
+
 import { Observable } from 'rxjs';
 import { map } from 'rxjs/operators';
 import { LanguagesState } from './../state/languages.state';
 
 @Injectable()
-export class LoadLanguagesGuard implements CanActivate {
+export class LoadLanguagesGuard  {
     constructor(
         private readonly languagesState: LanguagesState,
     ) {

frontend/src/app/shared/guards/load-schemas.guard.ts

@@ -6,13 +6,13 @@
  */
 
 import { Injectable } from '@angular/core';
-import { CanActivate } from '@angular/router';
+
 import { Observable } from 'rxjs';
 import { map } from 'rxjs/operators';
 import { SchemasState } from './../state/schemas.state';
 
 @Injectable()
-export class LoadSchemasGuard implements CanActivate {
+export class LoadSchemasGuard  {
     constructor(
         private readonly schemasState: SchemasState,
     ) {

frontend/src/app/shared/guards/load-teams.guard.ts

@@ -6,13 +6,13 @@
  */
 
 import { Injectable } from '@angular/core';
-import { CanActivate } from '@angular/router';
+
 import { Observable } from 'rxjs';
 import { map } from 'rxjs/operators';
 import { TeamsState } from './../state/teams.state';
 
 @Injectable()
-export class LoadTeamsGuard implements CanActivate {
+export class LoadTeamsGuard  {
     constructor(
         private readonly teamsState: TeamsState,
     ) {

frontend/src/app/shared/guards/must-be-authenticated.guard.ts

@@ -7,14 +7,14 @@
 
 import { Location } from '@angular/common';
 import { Injectable } from '@angular/core';
-import { CanActivate, Router } from '@angular/router';
+import { Router } from '@angular/router';
 import { Observable } from 'rxjs';
 import { map, take, tap } from 'rxjs/operators';
 import { UIOptions } from '@app/framework';
 import { AuthService } from './../services/auth.service';
 
 @Injectable()
-export class MustBeAuthenticatedGuard implements CanActivate {
+export class MustBeAuthenticatedGuard  {
     constructor(
         private readonly authService: AuthService,
         private readonly location: Location,

frontend/src/app/shared/guards/must-be-not-authenticated.guard.ts

@@ -7,14 +7,14 @@
 
 import { Location } from '@angular/common';
 import { Injectable } from '@angular/core';
-import { ActivatedRouteSnapshot, CanActivate, Router } from '@angular/router';
+import { ActivatedRouteSnapshot, Router } from '@angular/router';
 import { Observable } from 'rxjs';
 import { map, take, tap } from 'rxjs/operators';
 import { UIOptions } from '@app/framework';
 import { AuthService } from './../services/auth.service';
 
 @Injectable()
-export class MustBeNotAuthenticatedGuard implements CanActivate {
+export class MustBeNotAuthenticatedGuard  {
     constructor(
         private readonly authService: AuthService,
         private readonly location: Location,

frontend/src/app/shared/guards/rule-must-exist.guard.ts

@@ -6,14 +6,14 @@
  */
 
 import { Injectable } from '@angular/core';
-import { ActivatedRouteSnapshot, CanActivate, Router } from '@angular/router';
+import { ActivatedRouteSnapshot, Router } from '@angular/router';
 import { Observable } from 'rxjs';
 import { map, tap } from 'rxjs/operators';
 import { allParams } from '@app/framework';
 import { RulesState } from './../state/rules.state';
 
 @Injectable()
-export class RuleMustExistGuard implements CanActivate {
+export class RuleMustExistGuard  {
     constructor(
         private readonly rulesState: RulesState,
         private readonly router: Router,

frontend/src/app/shared/guards/schema-must-exist-published.guard.ts

@@ -6,14 +6,14 @@
  */
 
 import { Injectable } from '@angular/core';
-import { ActivatedRouteSnapshot, CanActivate, Router } from '@angular/router';
+import { ActivatedRouteSnapshot, Router } from '@angular/router';
 import { Observable } from 'rxjs';
 import { map, tap } from 'rxjs/operators';
 import { allParams } from '@app/framework';
 import { SchemasState } from './../state/schemas.state';
 
 @Injectable()
-export class SchemaMustExistPublishedGuard implements CanActivate {
+export class SchemaMustExistPublishedGuard  {
     constructor(
         private readonly schemasState: SchemasState,
         private readonly router: Router,

frontend/src/app/shared/guards/schema-must-exist.guard.ts

@@ -6,14 +6,14 @@
  */
 
 import { Injectable } from '@angular/core';
-import { ActivatedRouteSnapshot, CanActivate, Router } from '@angular/router';
+import { ActivatedRouteSnapshot, Router } from '@angular/router';
 import { Observable } from 'rxjs';
 import { map, tap } from 'rxjs/operators';
 import { allParams } from '@app/framework';
 import { SchemasState } from './../state/schemas.state';
 
 @Injectable()
-export class SchemaMustExistGuard implements CanActivate {
+export class SchemaMustExistGuard  {
     constructor(
         private readonly schemasState: SchemasState,
         private readonly router: Router,

frontend/src/app/shared/guards/schema-must-not-be-singleton.guard.ts

@@ -6,14 +6,14 @@
  */
 
 import { Injectable } from '@angular/core';
-import { ActivatedRouteSnapshot, CanActivate, Router, RouterStateSnapshot } from '@angular/router';
+import { ActivatedRouteSnapshot, Router, RouterStateSnapshot } from '@angular/router';
 import { Observable } from 'rxjs';
 import { map, take, tap } from 'rxjs/operators';
 import { defined } from '@app/framework';
 import { SchemasState } from './../state/schemas.state';
 
 @Injectable()
-export class SchemaMustNotBeSingletonGuard implements CanActivate {
+export class SchemaMustNotBeSingletonGuard  {
     constructor(
         private readonly schemasState: SchemasState,
         private readonly router: Router,

frontend/src/app/shared/guards/team-must-exist.guard.ts

@@ -6,13 +6,13 @@
  */
 
 import { Injectable } from '@angular/core';
-import { ActivatedRouteSnapshot, CanActivate, Router } from '@angular/router';
+import { ActivatedRouteSnapshot, Router } from '@angular/router';
 import { Observable } from 'rxjs';
 import { map, tap } from 'rxjs/operators';
 import { TeamsState } from './../state/teams.state';
 
 @Injectable()
-export class TeamMustExistGuard implements CanActivate {
+export class TeamMustExistGuard  {
     constructor(
         private readonly teamsState: TeamsState,
         private readonly router: Router,

frontend/src/app/shared/guards/unset-app.guard.ts

@@ -6,13 +6,13 @@
  */
 
 import { Injectable } from '@angular/core';
-import { CanActivate } from '@angular/router';
+
 import { Observable } from 'rxjs';
 import { map } from 'rxjs/operators';
 import { AppsState } from './../state/apps.state';
 
 @Injectable()
-export class UnsetAppGuard implements CanActivate {
+export class UnsetAppGuard  {
     constructor(
         private readonly appsState: AppsState,
     ) {

frontend/src/app/shared/guards/unset-team.guard.ts

@@ -6,13 +6,13 @@
  */
 
 import { Injectable } from '@angular/core';
-import { CanActivate } from '@angular/router';
+
 import { Observable } from 'rxjs';
 import { map } from 'rxjs/operators';
 import { TeamsState } from './../state/teams.state';
 
 @Injectable()
-export class UnsetTeamGuard implements CanActivate {
+export class UnsetTeamGuard  {
     constructor(
         private readonly teamsState: TeamsState,
     ) {