Merge pull request #934 from GNS3/Updating-dependencies

Upgrade to Angular 10 [high importance]
2024-12-19 21:17:51 +00:00 · 2020-07-07 11:19:35 +02:00 · 2020-07-07 11:19:35 +02:00 · aa78dc682f
commit aa78dc682f
parent b8ed394937 ed2ec8f004
115 changed files with 5519 additions and 4310 deletions
--- a/angular.json
+++ b/angular.json
@ -11,6 +11,23 @@
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
+            "allowedCommonJsDependencies": [
+              "rxjs",
+              "rxjs-compat",
+              "uuid",
+              "css-tree",
+              "save-svg-as-png",
+              "angular-draggable-droppable",
+              "angular2-hotkeys",
+              "dom-set",
+              "dom-plane",
+              "mousetrap",
+              "@mattlewis92/dom-autoscroller",
+              "rxjs/Rx",
+              "rxjs/add/operator/map",
+              "rxjs-compat/add/operator/map"
+            ],
+            "aot": true,
            "outputPath": "dist",
            "index": "src/index.html",
            "main": "src/main.ts",
@ -27,13 +44,13 @@
              "node_modules/notosans-fontface/css/notosans-fontface.min.css",
              "src/styles.css",
              {
+                "inject": false,
                "input": "src/theme.scss",
-                "lazy": true,
                "bundleName": "theme-default-dark"
              },
              {
+                "inject": false,
                "input": "src/theme-light.scss",
-                "lazy": true,
                "bundleName": "theme-default"
              }
            ],
@ -41,6 +58,12 @@
          },
          "configurations": {
            "production": {
+              "budgets": [
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "6kb"
+                }
+              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": {
@ -62,6 +85,12 @@
              ]
            },
            "electronProd": {
+              "budgets": [
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "6kb"
+                }
+              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
@ -79,6 +108,12 @@
              ]
            },
            "electronDev": {
+              "budgets": [
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "6kb"
+                }
+              ],
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
@ -87,6 +122,12 @@
              ]
            },
            "githubProd": {
+              "budgets": [
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "6kb"
+                }
+              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
@ -162,7 +203,8 @@
              "src/tsconfig.spec.json"
            ],
            "exclude": [
-              "**/node_modules/**"
+              "**/node_modules/**",
+              "**/*.spec.ts"
            ]
          }
        }
@ -198,10 +240,13 @@
  "schematics": {
    "@schematics/angular:component": {
      "prefix": "app",
-      "styleext": "scss"
+      "style": "scss"
    },
    "@schematics/angular:directive": {
      "prefix": "app"
    }
+  },
+  "cli": {
+    "analytics": false
  }
-}
+}
--- a/e2e/tsconfig.e2e.json
+++ b/e2e/tsconfig.e2e.json
@ -1,5 +1,5 @@
 {
-  "extends": "../tsconfig.json",
+  "extends": "../tsconfig.base.json",
  "compilerOptions": {
    "outDir": "../out-tsc/e2e",
    "baseUrl": "./",
--- a/package.json
+++ b/package.json
@ -38,86 +38,91 @@
  },
  "private": true,
  "dependencies": {
-    "@angular/animations": "^8.2.11",
-    "@angular/cdk": "^8.2.3",
-    "@angular/common": "^8.2.11",
-    "@angular/compiler": "^8.2.11",
-    "@angular/core": "^8.2.11",
-    "@angular/forms": "^8.2.11",
-    "@angular/http": "^7.2.15",
-    "@angular/material": "^8.2.3",
-    "@angular/platform-browser": "^8.2.11",
-    "@angular/platform-browser-dynamic": "^8.2.11",
-    "@angular/router": "^8.2.11",
+    "@angular/animations": "^10.0.2",
+    "@angular/cdk": "^10.0.1",
+    "@angular/common": "^10.0.2",
+    "@angular/compiler": "^10.0.2",
+    "@angular/core": "^10.0.2",
+    "@angular/forms": "^10.0.2",
+    "@angular/http": "^7.2.16",
+    "@angular/material": "^10.0.1",
+    "@angular/platform-browser": "^10.0.2",
+    "@angular/platform-browser-dynamic": "^10.0.2",
+    "@angular/router": "^10.0.2",
+    "@types/jest": "^26.0.3",
+    "@types/mocha": "^7.0.2",
+    "angular-draggable-droppable": "^4.5.1",
    "@sentry/browser": "^5.18.0",
-    "angular-draggable-droppable": "^4.3.8",
    "angular-persistence": "^1.0.1",
-    "angular-resizable-element": "^3.2.6",
+    "angular-resizable-element": "^3.3.2",
    "angular2-draggable": "^2.3.2",
-    "angular2-hotkeys": "^2.1.5",
+    "angular2-hotkeys": "^2.2.0",
    "angular2-indexeddb": "^1.2.3",
-    "bootstrap": "4.3.1",
-    "command-exists": "^1.2.8",
-    "core-js": "^3.3.2",
+    "bootstrap": "4.5.0",
+    "command-exists": "^1.2.9",
+    "core-js": "^3.6.5",
    "css-tree": "^1.0.0-alpha.36",
    "d3-ng2-service": "^2.1.0",
    "file-saver": "^2.0.2",
-    "hammerjs": "^2.0.8",
    "ini": "^1.3.5",
    "material-design-icons": "^3.0.1",
    "ng-circle-progress": "^1.5.1",
    "ng2-file-upload": "^1.3.0",
    "ngx-childprocess": "^0.0.6",
-    "ngx-device-detector": "^1.3.18",
+    "ngx-device-detector": "^1.4.5",
    "ngx-electron": "^2.1.1",
    "node-fetch": "^2.6.0",
-    "notosans-fontface": "^1.1.0",
-    "rxjs": "^6.5.3",
-    "rxjs-compat": "^6.5.3",
-    "save-html-as-image": "^1.2.0",
+    "notosans-fontface": "1.1.0",
+    "rxjs": "^6.5.5",
+    "rxjs-compat": "^6.5.5",
+    "save-html-as-image": "^1.3.3",
    "save-svg-as-png": "^1.4.14",
-    "svg-crowbar": "^0.2.4",
+    "svg-crowbar": "^0.6.0",
    "tree-kill": "^1.2.1",
+    "tslib": "^2.0.0",
    "typeface-roboto": "^0.0.75",
    "xterm": "^4.1.0",
-    "xterm-addon-attach": "^0.5.0",
-    "xterm-addon-fit": "^0.3.0",
-    "yargs": "^15.0.2",
-    "zone.js": "^0.10.2"
+    "xterm-addon-attach": "^0.6.0",
+    "xterm-addon-fit": "^0.4.0",
+    "yargs": "^15.3.1",
+    "zone.js": "~0.10.3"
  },
  "devDependencies": {
-    "@angular-devkit/build-angular": "^0.803.10",
-    "@angular/cli": "^8.3.10",
-    "@angular/compiler-cli": "^8.2.11",
-    "@angular/language-service": "^8.2.11",
+    "@angular-devkit/build-angular": "~0.1000.0",
+    "@angular/cli": "^10.0.0",
+    "@angular/compiler-cli": "^10.0.2",
+    "@angular/language-service": "^10.0.2",
    "@sentry/cli": "^1.53.0",
-    "@sentry/electron": "^0.17.4",
-    "@types/jasmine": "^3.4.4",
+    "@sentry/electron": "^1.3.0",
+    "@types/jasmine": "^3.5.11",
    "@types/jasminewd2": "^2.0.8",
-    "@types/node": "^12.12.10",
-    "codelyzer": "^5.1.2",
-    "electron": "7.1.2",
-    "electron-builder": "21.2.0",
-    "jasmine-core": "~3.5.0",
-    "jasmine-spec-reporter": "~4.2.1",
-    "jquery": "^3.4.1",
-    "karma": "~4.4.0",
-    "karma-chrome-launcher": "~3.1.0",
-    "karma-cli": "~2.0.0",
-    "karma-coverage-istanbul-reporter": "^2.1.0",
-    "karma-jasmine": "~2.0.1",
-    "karma-jasmine-html-reporter": "^1.4.2",
+    "@types/node": "12.12.6",
+    "codelyzer": "^5.2.2",
+    "electron": "^9.0.5",
+    "electron-builder": "22.7.0",
+    "file-loader": "^6.0.0",
+    "jasmine-core": "^3.5.0",
+    "jasmine-spec-reporter": "^5.0.2",
+    "jquery": "^3.5.1",
+    "karma": "^5.1.0",
+    "karma-chrome-launcher": "^3.1.0",
+    "karma-cli": "^2.0.0",
+    "karma-coverage-istanbul-reporter": "~3.0.2",
+    "karma-jasmine": "^3.3.1",
+    "karma-jasmine-html-reporter": "^1.5.4",
    "license-checker": "^25.0.1",
-    "node-sass": "^4.12.0",
-    "popper.js": "^1.16.0",
-    "prettier": "^1.18.2",
-    "protractor": "~5.4.2",
-    "replace": "^1.1.1",
-    "ts-mockito": "^2.5.0",
-    "ts-node": "~8.4.1",
-    "tslint": "~5.20.0",
+    "node-sass": "^4.14.1",
+    "popper.js": "^1.16.1",
+    "prettier": "^2.0.5",
+    "protractor": "^7.0.0",
+    "replace": "^1.2.0",
+    "rxjs-tslint": "^0.1.8",
+    "ts-mockito": "^2.6.1",
+    "ts-node": "~8.10.2",
+    "tslint": "^6.1.2",
    "tslint-config-prettier": "^1.18.0",
-    "typescript": ">=3.4.0 <3.6.0"
+    "typescript": "^3.9.5",
+    "webpack": "^4.43.0"
  },
  "greenkeeper": {
    "ignore": [
--- a/src/app/app.component.spec.ts
+++ b/src/app/app.component.spec.ts
@ -9,6 +9,7 @@ import { ElectronService, NgxElectronModule } from 'ngx-electron';
 import createSpyObj = jasmine.createSpyObj;
 import { NO_ERRORS_SCHEMA } from '@angular/core';
 import { ProgressService } from './common/progress/progress.service';
+import 'jasmine';

 describe('AppComponent', () => {
  let component: AppComponent;
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@ -1,5 +1,5 @@
 import { Component, OnInit } from '@angular/core';
-import { MatIconRegistry } from '@angular/material';
+import { MatIconRegistry } from '@angular/material/icon';
 import { DomSanitizer } from '@angular/platform-browser';
 import { ElectronService } from 'ngx-electron';
 import { SettingsService } from './services/settings.service';
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@ -70,7 +70,7 @@ import { SnapshotMenuItemComponent } from './components/snapshots/snapshot-menu-
 import { MATERIAL_IMPORTS } from './material.imports';
 import { DrawingService } from './services/drawing.service';
 import { ProjectNameValidator } from './components/projects/models/projectNameValidator';
-import { MatSidenavModule } from '@angular/material';
+import { MatSidenavModule } from '@angular/material/sidenav';
 import { NodeSelectInterfaceComponent } from './components/project-map/node-select-interface/node-select-interface.component';
 import { DrawLinkToolComponent } from './components/project-map/draw-link-tool/draw-link-tool.component';

--- a/src/app/cartography/cartography.module.ts
+++ b/src/app/cartography/cartography.module.ts
@ -1,6 +1,7 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { MatMenuModule, MatIconModule } from '@angular/material';
+import { MatIconModule } from '@angular/material/icon';
+import { MatMenuModule } from '@angular/material/menu';

 import { CssFixer } from './helpers/css-fixer';
 import { FontFixer } from './helpers/font-fixer';
--- a/src/app/cartography/components/d3-map/d3-map.component.ts
+++ b/src/app/cartography/components/d3-map/d3-map.component.ts
@ -51,8 +51,8 @@ export class D3MapComponent implements OnInit, OnChanges, OnDestroy {
  @Input() width = 1500;
  @Input() height = 600;

-  @ViewChild('svg', {static: false}) svgRef: ElementRef;
-  @ViewChild('textEditor', {static: false}) textEditor: TextEditorComponent;
+  @ViewChild('svg') svgRef: ElementRef;
+  @ViewChild('textEditor') textEditor: TextEditorComponent;

  private parentNativeElement: any;
  private svg: Selection<SVGSVGElement, any, null, undefined>;
--- a/src/app/cartography/components/experimental-map/drawing/drawings/text/text.component.ts
+++ b/src/app/cartography/components/experimental-map/drawing/drawings/text/text.component.ts
@ -13,7 +13,7 @@ export class TextComponent implements OnInit, DoCheck {

  @Input('app-text') text: TextElement;

-  @ViewChild('text', {static: false}) textRef: ElementRef;
+  @ViewChild('text') textRef: ElementRef;

  lines: string[] = [];

--- a/src/app/cartography/components/experimental-map/experimental-map.component.ts
+++ b/src/app/cartography/components/experimental-map/experimental-map.component.ts
@ -43,7 +43,7 @@ export class ExperimentalMapComponent implements OnInit, OnChanges, OnDestroy {
  @Input() width = 1500;
  @Input() height = 600;

-  @ViewChild('svg', {static: false}) svg: ElementRef;
+  @ViewChild('svg') svg: ElementRef;

  private changesDetected: Subscription;

--- a/src/app/cartography/components/experimental-map/interface-label/interface-label.component.ts
+++ b/src/app/cartography/components/experimental-map/interface-label/interface-label.component.ts
@ -10,7 +10,7 @@ import { CssFixer } from '../../../helpers/css-fixer';
 export class InterfaceLabelComponent implements OnInit {
  @Input('app-interface-label') ignore: any;

-  @ViewChild('textSvg', {static: false}) textRef: ElementRef;
+  @ViewChild('textSvg') textRef: ElementRef;

  private label = {
    x: 0,
--- a/src/app/cartography/components/experimental-map/link/link.component.ts
+++ b/src/app/cartography/components/experimental-map/link/link.component.ts
@ -26,7 +26,7 @@ export class LinkComponent implements OnInit, OnDestroy {
  @Input('node-changed') nodeChanged: EventEmitter<Node>;
  @Input('show-interface-labels') showInterfaceLabels: boolean;

-  @ViewChild('path', {static: false}) path: ElementRef;
+  @ViewChild('path') path: ElementRef;

  private ethernetLinkStrategy = new EthernetLinkStrategy();
  private serialLinkStrategy = new SerialLinkStrategy();
--- a/src/app/cartography/components/experimental-map/node/node.component.ts
+++ b/src/app/cartography/components/experimental-map/node/node.component.ts
@ -30,8 +30,8 @@ import { DraggedDataEvent } from '../../../events/event-source';
 export class NodeComponent implements OnInit, OnDestroy, OnChanges, AfterViewInit {
  static NODE_LABEL_MARGIN = 3;

-  @ViewChild('label', {static: false}) label: ElementRef;
-  @ViewChild('image', {static: false}) imageRef: ElementRef;
+  @ViewChild('label') label: ElementRef;
+  @ViewChild('image') imageRef: ElementRef;

  @Input('app-node') node: MapNode;
  @Input('symbols') symbols: Symbol[];
--- a/src/app/cartography/components/text-editor/text-editor.component.ts
+++ b/src/app/cartography/components/text-editor/text-editor.component.ts
@ -27,7 +27,7 @@ import { Font } from '../../models/font';
  styleUrls: ['./text-editor.component.scss']
 })
 export class TextEditorComponent implements OnInit, OnDestroy {
-  @ViewChild('temporaryTextElement', {static: false}) temporaryTextElement: ElementRef;
+  @ViewChild('temporaryTextElement') temporaryTextElement: ElementRef;
  @Input('svg') svg: SVGSVGElement;
  @Input('server') server: Server;

--- a/src/app/cartography/directives/moving-canvas.directive.ts
+++ b/src/app/cartography/directives/moving-canvas.directive.ts
@ -1,4 +1,4 @@
-import { HostListener, ElementRef, Renderer, Directive, Input, OnInit, OnDestroy } from '@angular/core'
+import { HostListener, ElementRef, Directive, Input, OnInit, OnDestroy, Renderer2 } from '@angular/core'
 import { Subscription } from 'rxjs';
 import { MovingEventSource } from '../events/moving-event-source';
 import { Context } from '../models/context';
--- a/src/app/common/error-handlers/toaster-error-handler.ts
+++ b/src/app/common/error-handlers/toaster-error-handler.ts
@ -1,6 +1,8 @@
 import { ToasterService } from '../../services/toaster.service';
+import { Injectable } from "@angular/core";
 import { SentryErrorHandler } from './sentry-error-handler';

+@Injectable()
 export class ToasterErrorHandler extends SentryErrorHandler {
  handleError(err: any): void {
    super.handleError(err);
--- a/src/app/common/progress-dialog/progress-dialog.component.ts
+++ b/src/app/common/progress-dialog/progress-dialog.component.ts
@ -1,5 +1,5 @@
 import { Component, Inject, OnInit } from '@angular/core';
-import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material';
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';

@Component({
  selector: 'app-progress-dialog',
--- a/src/app/common/progress-dialog/progress-dialog.service.ts
+++ b/src/app/common/progress-dialog/progress-dialog.service.ts
@ -1,5 +1,5 @@
 import { Injectable } from '@angular/core';
-import { MatDialog } from '@angular/material';
+import { MatDialog } from '@angular/material/dialog';
 import { ProgressDialogComponent } from './progress-dialog.component';

@Injectable()
--- a/src/app/components/adbutler/adbutler.component.ts
+++ b/src/app/components/adbutler/adbutler.component.ts
@ -10,7 +10,7 @@ import { ToasterService } from '../../services/toaster.service';
  encapsulation: ViewEncapsulation.None
 })
 export class AdbutlerComponent implements OnInit {
-  @ViewChild('ad', {static: false}) ad: ElementRef;
+  @ViewChild('ad') ad: ElementRef;
  theme: string;
  onLoad = new EventEmitter();
  htmlCode: string;
--- a/src/app/components/notification-box/notification-box.component.ts
+++ b/src/app/components/notification-box/notification-box.component.ts
@ -11,7 +11,7 @@ import { Location } from '@angular/common';
    styleUrls: ['./notification-box.component.scss']
 })
 export class NotificationBoxComponent implements OnInit, OnDestroy {
-    @ViewChild('dynamicComponentContainer', {read: ViewContainerRef, static: false}) dynamicComponentContainer;
+    @ViewChild('dynamicComponentContainer', { read: ViewContainerRef }) dynamicComponentContainer;

    timer: Observable<number>;
    viewTimer: Observable<number>;
--- a/src/app/components/preferences/built-in/cloud-nodes/cloud-nodes-templates/cloud-nodes-templates.component.ts
+++ b/src/app/components/preferences/built-in/cloud-nodes/cloud-nodes-templates/cloud-nodes-templates.component.ts
@ -15,7 +15,7 @@ import { DeleteTemplateComponent } from '../../../common/delete-template-compone
 export class CloudNodesTemplatesComponent implements OnInit {
    server: Server;
    cloudNodesTemplates: CloudTemplate[] = [];
-    @ViewChild(DeleteTemplateComponent, {static: false}) deleteComponent: DeleteTemplateComponent;
+    @ViewChild(DeleteTemplateComponent) deleteComponent: DeleteTemplateComponent;

    constructor(
        private route: ActivatedRoute,
--- a/src/app/components/preferences/built-in/ethernet-hubs/ethernet-hubs-templates/ethernet-hubs-templates.component.ts
+++ b/src/app/components/preferences/built-in/ethernet-hubs/ethernet-hubs-templates/ethernet-hubs-templates.component.ts
@ -15,7 +15,7 @@ import { DeleteTemplateComponent } from '../../../common/delete-template-compone
 export class EthernetHubsTemplatesComponent implements OnInit {
    server: Server;
    ethernetHubsTemplates: EthernetHubTemplate[] = [];
-    @ViewChild(DeleteTemplateComponent, {static: false}) deleteComponent: DeleteTemplateComponent;
+    @ViewChild(DeleteTemplateComponent) deleteComponent: DeleteTemplateComponent;

    constructor(
        private route: ActivatedRoute,
--- a/src/app/components/preferences/built-in/ethernet-switches/ethernet-switches-template-details/ethernet-switches-template-details.component.ts
+++ b/src/app/components/preferences/built-in/ethernet-switches/ethernet-switches-template-details/ethernet-switches-template-details.component.ts
@ -16,7 +16,7 @@ import { PortsComponent } from '../../../common/ports/ports.component';
    styleUrls: ['./ethernet-switches-template-details.component.scss', '../../../preferences.component.scss']
 })
 export class EthernetSwitchesTemplateDetailsComponent implements OnInit {
-    @ViewChild(PortsComponent, {static: false}) portsComponent: PortsComponent;
+    @ViewChild(PortsComponent) portsComponent: PortsComponent;
    server: Server;
    ethernetSwitchTemplate: EthernetSwitchTemplate;
    inputForm: FormGroup;
--- a/src/app/components/preferences/built-in/ethernet-switches/ethernet-switches-templates/ethernet-switches-templates.component.ts
+++ b/src/app/components/preferences/built-in/ethernet-switches/ethernet-switches-templates/ethernet-switches-templates.component.ts
@ -15,7 +15,7 @@ import { DeleteTemplateComponent } from '../../../common/delete-template-compone
 export class EthernetSwitchesTemplatesComponent implements OnInit {
    server: Server;
    ethernetSwitchesTemplates: EthernetSwitchTemplate[] = [];
-    @ViewChild(DeleteTemplateComponent, {static: false}) deleteComponent: DeleteTemplateComponent;
+    @ViewChild(DeleteTemplateComponent) deleteComponent: DeleteTemplateComponent;

    constructor(
        private route: ActivatedRoute,
--- a/src/app/components/preferences/common/custom-adapters/custom-adapters.component.ts
+++ b/src/app/components/preferences/common/custom-adapters/custom-adapters.component.ts
@ -14,7 +14,7 @@ export class CustomAdaptersComponent {
    @Output() closeConfiguratorEmitter = new EventEmitter<boolean>();
    @Output() saveConfigurationEmitter =  new EventEmitter<CustomAdapter[]>();

-    @ViewChild("customAdapters", {static: false}) customAdapters: CustomAdaptersTableComponent;
+    @ViewChild("customAdapters") customAdapters: CustomAdaptersTableComponent;

    public adapters: CustomAdapter[];
    public numberOfAdapters: number;
--- a/src/app/components/preferences/common/delete-confirmation-dialog/delete-confirmation-dialog.component.ts
+++ b/src/app/components/preferences/common/delete-confirmation-dialog/delete-confirmation-dialog.component.ts
@ -1,5 +1,5 @@
 import { Component, OnInit, Inject } from '@angular/core';
-import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';
+import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';


@Component({
--- a/src/app/components/preferences/common/delete-template-component/delete-template.component.ts
+++ b/src/app/components/preferences/common/delete-template-component/delete-template.component.ts
@ -1,6 +1,6 @@
 import { Component, Input, Output, EventEmitter } from "@angular/core";
 import { TemplateService } from '../../../../services/template.service';
-import { MatDialog } from '@angular/material';
+import { MatDialog } from '@angular/material/dialog';
 import { DeleteConfirmationDialogComponent } from '../delete-confirmation-dialog/delete-confirmation-dialog.component';
 import { ToasterService } from '../../../../services/toaster.service';
 import { Server } from '../../../../models/server';
--- a/src/app/components/preferences/docker/docker-templates/docker-templates.component.ts
+++ b/src/app/components/preferences/docker/docker-templates/docker-templates.component.ts
@ -15,7 +15,7 @@ import { DockerService } from '../../../../services/docker.service';
 export class DockerTemplatesComponent implements OnInit {
    server: Server;
    dockerTemplates: DockerTemplate[] = [];
-    @ViewChild(DeleteTemplateComponent, {static: false}) deleteComponent: DeleteTemplateComponent;
+    @ViewChild(DeleteTemplateComponent) deleteComponent: DeleteTemplateComponent;

    constructor(
        private route: ActivatedRoute,
--- a/src/app/components/preferences/dynamips/ios-templates/ios-templates.component.ts
+++ b/src/app/components/preferences/dynamips/ios-templates/ios-templates.component.ts
@ -16,7 +16,7 @@ import { VpcsTemplate } from '../../../../models/templates/vpcs-template';
 export class IosTemplatesComponent implements OnInit {
    server: Server;
    iosTemplates: IosTemplate[] = [];
-    @ViewChild(DeleteTemplateComponent, {static: false}) deleteComponent: DeleteTemplateComponent;
+    @ViewChild(DeleteTemplateComponent) deleteComponent: DeleteTemplateComponent;

    constructor(
        private route: ActivatedRoute,
--- a/src/app/components/preferences/ios-on-unix/iou-templates/iou-templates.component.ts
+++ b/src/app/components/preferences/ios-on-unix/iou-templates/iou-templates.component.ts
@ -15,7 +15,7 @@ import { IouService } from '../../../../services/iou.service';
 export class IouTemplatesComponent implements OnInit {
    server: Server;
    iouTemplates: IouTemplate[] = [];
-    @ViewChild(DeleteTemplateComponent, {static: false}) deleteComponent: DeleteTemplateComponent;
+    @ViewChild(DeleteTemplateComponent) deleteComponent: DeleteTemplateComponent;

    constructor(
        private route: ActivatedRoute,
--- a/src/app/components/preferences/qemu/qemu-vm-template-details/qemu-vm-template-details.component.ts
+++ b/src/app/components/preferences/qemu/qemu-vm-template-details/qemu-vm-template-details.component.ts
@ -34,7 +34,7 @@ export class QemuVmTemplateDetailsComponent implements OnInit {
    displayedColumns: string[] = ['adapter_number', 'port_name', 'adapter_type', 'actions'];
    generalSettingsForm: FormGroup;

-    @ViewChild("customAdaptersConfigurator", {static: false}) 
+    @ViewChild("customAdaptersConfigurator") 
        customAdaptersConfigurator: CustomAdaptersComponent;

    constructor(
--- a/src/app/components/preferences/qemu/qemu-vm-templates/qemu-vm-templates.component.ts
+++ b/src/app/components/preferences/qemu/qemu-vm-templates/qemu-vm-templates.component.ts
@ -15,7 +15,7 @@ import { DeleteTemplateComponent } from '../../common/delete-template-component/
 export class QemuVmTemplatesComponent implements OnInit {
    server: Server;
    qemuTemplates: QemuTemplate[] = [];
-    @ViewChild(DeleteTemplateComponent, {static: false}) deleteComponent: DeleteTemplateComponent;
+    @ViewChild(DeleteTemplateComponent) deleteComponent: DeleteTemplateComponent;

    constructor(
        private route: ActivatedRoute,
--- a/src/app/components/preferences/traceng/traceng-templates/traceng-templates.component.ts
+++ b/src/app/components/preferences/traceng/traceng-templates/traceng-templates.component.ts
@ -14,7 +14,7 @@ import { TracengService } from '../../../../services/traceng.service';
 export class TracengTemplatesComponent implements OnInit {
    server: Server;
    tracengTemplates: TracengTemplate[] = [];
-    @ViewChild(DeleteTemplateComponent, {static: false}) deleteComponent: DeleteTemplateComponent;
+    @ViewChild(DeleteTemplateComponent) deleteComponent: DeleteTemplateComponent;

    constructor(
        private route: ActivatedRoute,
--- a/src/app/components/preferences/virtual-box/virtual-box-template-details/virtual-box-template-details.component.ts
+++ b/src/app/components/preferences/virtual-box/virtual-box-template-details/virtual-box-template-details.component.ts
@ -29,7 +29,7 @@ export class VirtualBoxTemplateDetailsComponent implements OnInit {
    generalSettingsForm: FormGroup;
    networkForm: FormGroup

-    @ViewChild("customAdaptersConfigurator", {static: false}) 
+    @ViewChild("customAdaptersConfigurator") 
        customAdaptersConfigurator: CustomAdaptersComponent;

    constructor(
--- a/src/app/components/preferences/virtual-box/virtual-box-templates/virtual-box-templates.component.ts
+++ b/src/app/components/preferences/virtual-box/virtual-box-templates/virtual-box-templates.component.ts
@ -16,7 +16,7 @@ import { VpcsTemplate } from '../../../../models/templates/vpcs-template';
 export class VirtualBoxTemplatesComponent implements OnInit {
    server: Server;
    virtualBoxTemplates: VirtualBoxTemplate[] = [];
-    @ViewChild(DeleteTemplateComponent, {static: false}) deleteComponent: DeleteTemplateComponent;
+    @ViewChild(DeleteTemplateComponent) deleteComponent: DeleteTemplateComponent;

    constructor(
        private route: ActivatedRoute,
--- a/src/app/components/preferences/vmware/vmware-template-details/vmware-template-details.component.ts
+++ b/src/app/components/preferences/vmware/vmware-template-details/vmware-template-details.component.ts
@ -28,7 +28,7 @@ export class VmwareTemplateDetailsComponent implements OnInit {
    onCloseOptions = [];
    networkTypes = [];

-    @ViewChild("customAdaptersConfigurator", {static: false}) 
+    @ViewChild("customAdaptersConfigurator") 
        customAdaptersConfigurator: CustomAdaptersComponent;

    constructor(
--- a/src/app/components/preferences/vmware/vmware-templates/vmware-templates.component.ts
+++ b/src/app/components/preferences/vmware/vmware-templates/vmware-templates.component.ts
@ -15,7 +15,7 @@ import { DeleteTemplateComponent } from '../../common/delete-template-component/
 export class VmwareTemplatesComponent implements OnInit {
    server: Server;
    vmwareTemplates: VmwareTemplate[] = [];
-    @ViewChild(DeleteTemplateComponent, {static: false}) deleteComponent: DeleteTemplateComponent;
+    @ViewChild(DeleteTemplateComponent) deleteComponent: DeleteTemplateComponent;

    constructor(
        private route: ActivatedRoute,
--- a/src/app/components/preferences/vpcs/vpcs-templates/vpcs-templates.component.ts
+++ b/src/app/components/preferences/vpcs/vpcs-templates/vpcs-templates.component.ts
@ -14,7 +14,7 @@ import { DeleteTemplateComponent } from '../../common/delete-template-component/
 export class VpcsTemplatesComponent implements OnInit {
    server: Server;
    vpcsTemplates: VpcsTemplate[] = [];
-    @ViewChild(DeleteTemplateComponent, {static: false}) deleteComponent: DeleteTemplateComponent;
+    @ViewChild(DeleteTemplateComponent) deleteComponent: DeleteTemplateComponent;

    constructor(
        private route: ActivatedRoute,
--- a/src/app/components/project-map/change-hostname-dialog/change-hostname-dialog.component.ts
+++ b/src/app/components/project-map/change-hostname-dialog/change-hostname-dialog.component.ts
@ -4,7 +4,7 @@ import { Node } from '../../../cartography/models/node';
 import { Server } from '../../../models/server';
 import { NodeService } from '../../../services/node.service';
 import { ToasterService } from '../../../services/toaster.service';
-import { MatDialogRef } from '@angular/material';
+import { MatDialogRef } from '@angular/material/dialog';


@Component({
--- a/src/app/components/project-map/change-symbol-dialog/change-symbol-dialog.component.ts
+++ b/src/app/components/project-map/change-symbol-dialog/change-symbol-dialog.component.ts
@ -1,5 +1,5 @@
 import { Component, Input, OnInit } from '@angular/core';
-import { MatDialogRef } from '@angular/material';
+import { MatDialogRef } from '@angular/material/dialog';
 import { Message } from '../../../models/message';
 import { Server } from '../../../models/server';
 import { Node } from '../../../cartography/models/node';
--- a/src/app/components/project-map/context-menu/actions/change-hostname/change-hostname-action.component.ts
+++ b/src/app/components/project-map/context-menu/actions/change-hostname/change-hostname-action.component.ts
@ -1,7 +1,7 @@
 import { Component, OnInit, Input } from '@angular/core';
 import { Server } from '../../../../../models/server';
 import { Node } from '../../../../../cartography/models/node';
-import { MatDialog } from '@angular/material';
+import { MatDialog } from '@angular/material/dialog';
 import { ChangeHostnameDialogComponent } from '../../../change-hostname-dialog/change-hostname-dialog.component';

@Component({
--- a/src/app/components/project-map/context-menu/actions/change-symbol/change-symbol-action.component.ts
+++ b/src/app/components/project-map/context-menu/actions/change-symbol/change-symbol-action.component.ts
@ -1,7 +1,7 @@
 import { Component, OnInit, Input } from '@angular/core';
 import { Server } from '../../../../../models/server';
 import { Node } from '../../../../../cartography/models/node';
-import { MatDialog } from '@angular/material';
+import { MatDialog } from '@angular/material/dialog';
 import { ChangeSymbolDialogComponent } from '../../../change-symbol-dialog/change-symbol-dialog.component';

@Component({
--- a/src/app/components/project-map/context-menu/actions/config-action/config-action.component.ts
+++ b/src/app/components/project-map/context-menu/actions/config-action/config-action.component.ts
@ -1,7 +1,7 @@
 import { Component, Input, OnInit, OnChanges } from '@angular/core';
 import { Server } from '../../../../../models/server';
 import { Node } from '../../../../../cartography/models/node';
-import { MatDialog, MatDialogRef } from '@angular/material';
+import { MatDialog, MatDialogRef } from '@angular/material/dialog';
 import { ConfiguratorDialogVpcsComponent } from '../../../node-editors/configurator/vpcs/configurator-vpcs.component';
 import { ConfiguratorDialogEthernetHubComponent } from '../../../node-editors/configurator/ethernet_hub/configurator-ethernet-hub.component';
 import { ConfiguratorDialogEthernetSwitchComponent } from '../../../node-editors/configurator/ethernet-switch/configurator-ethernet-switch.component';
--- a/src/app/components/project-map/context-menu/actions/edit-config/edit-config-action.component.ts
+++ b/src/app/components/project-map/context-menu/actions/edit-config/edit-config-action.component.ts
@ -3,7 +3,7 @@ import { Node } from '../../../../../cartography/models/node';
 import { Project } from '../../../../../models/project';
 import { Server } from '../../../../../models/server';
 import { ConfigEditorDialogComponent } from '../../../node-editors/config-editor/config-editor.component';
-import { MatDialog } from '@angular/material';
+import { MatDialog } from '@angular/material/dialog';

@Component({
    selector: 'app-edit-config-action',
--- a/src/app/components/project-map/context-menu/actions/edit-style-action/edit-style-action.component.ts
+++ b/src/app/components/project-map/context-menu/actions/edit-style-action/edit-style-action.component.ts
@ -1,7 +1,7 @@
 import { Component, Input, OnChanges } from '@angular/core';
 import { Drawing } from '../../../../../cartography/models/drawing';
 import { Server } from '../../../../../models/server';
-import { MatDialog } from '@angular/material';
+import { MatDialog } from '@angular/material/dialog';
 import { Project } from '../../../../../models/project';
 import { StyleEditorDialogComponent } from '../../../drawings-editors/style-editor/style-editor.component';
 import { ImageElement } from '../../../../../cartography/models/drawings/image-element';
--- a/src/app/components/project-map/context-menu/actions/edit-text-action/edit-text-action.component.ts
+++ b/src/app/components/project-map/context-menu/actions/edit-text-action/edit-text-action.component.ts
@ -2,7 +2,7 @@ import { Component, OnInit, Input } from '@angular/core';
 import { Server } from '../../../../../models/server';
 import { Project } from '../../../../../models/project';
 import { Drawing } from '../../../../../cartography/models/drawing';
-import { MatDialog } from '@angular/material';
+import { MatDialog } from '@angular/material/dialog';
 import { TextEditorDialogComponent } from '../../../drawings-editors/text-editor/text-editor.component';
 import { Label } from '../../../../../cartography/models/label';
 import { Node } from '../../../../../cartography/models/node';
--- a/src/app/components/project-map/context-menu/actions/export-config/export-config-action.component.ts
+++ b/src/app/components/project-map/context-menu/actions/export-config/export-config-action.component.ts
@ -2,7 +2,7 @@ import { Component, Input } from '@angular/core';
 import { Node } from '../../../../../cartography/models/node';
 import { NodeService } from '../../../../../services/node.service';
 import { Server } from '../../../../../models/server';
-import { MatDialog } from '@angular/material';
+import { MatDialog } from '@angular/material/dialog';
 import { ConfigDialogComponent } from '../../dialogs/config-dialog/config-dialog.component';

@Component({
--- a/src/app/components/project-map/context-menu/actions/import-config/import-config-action.component.ts
+++ b/src/app/components/project-map/context-menu/actions/import-config/import-config-action.component.ts
@ -3,7 +3,7 @@ import { Node } from '../../../../../cartography/models/node';
 import { NodeService } from '../../../../../services/node.service';
 import { Server } from '../../../../../models/server';
 import { ToasterService } from '../../../../../services/toaster.service';
-import { MatDialog } from '@angular/material';
+import { MatDialog } from '@angular/material/dialog';
 import { ConfigDialogComponent } from '../../dialogs/config-dialog/config-dialog.component';

@Component({
@ -14,7 +14,7 @@ import { ConfigDialogComponent } from '../../dialogs/config-dialog/config-dialog
 export class ImportConfigActionComponent {
    @Input() server: Server;
    @Input() node: Node;
-    @ViewChild('fileInput', {static: false}) fileInput: ElementRef;
+    @ViewChild('fileInput') fileInput: ElementRef;
    configType: string;

    constructor(
--- a/src/app/components/project-map/context-menu/actions/open-file-explorer/open-file-explorer-action.component.ts
+++ b/src/app/components/project-map/context-menu/actions/open-file-explorer/open-file-explorer-action.component.ts
@ -19,6 +19,6 @@ export class OpenFileExplorerActionComponent implements OnInit {
  ngOnInit() {}

  open() {
-    this.electronService.shell.openItem(this.node.node_directory);
+    this.electronService.shell.openPath(this.node.node_directory);
  }
 }
--- a/src/app/components/project-map/context-menu/actions/packet-filters-action/packet-filters-action.component.ts
+++ b/src/app/components/project-map/context-menu/actions/packet-filters-action/packet-filters-action.component.ts
@ -2,7 +2,7 @@ import { Component, Input } from "@angular/core";
 import { Link } from '../../../../../models/link';
 import { Server } from '../../../../../models/server';
 import { Project } from '../../../../../models/project';
-import { MatDialog } from '@angular/material';
+import { MatDialog } from '@angular/material/dialog';
 import { PacketFiltersDialogComponent } from '../../../packet-capturing/packet-filters/packet-filters.component';

@Component({
--- a/src/app/components/project-map/context-menu/actions/show-node-action/show-node-action.component.ts
+++ b/src/app/components/project-map/context-menu/actions/show-node-action/show-node-action.component.ts
@ -1,6 +1,6 @@
 import { Component, Input, OnInit, OnChanges } from '@angular/core';
 import { Node } from '../../../../../cartography/models/node';
-import { MatDialog } from '@angular/material';
+import { MatDialog } from '@angular/material/dialog';
 import { InfoDialogComponent } from '../../../info-dialog/info-dialog.component';
 import { Server } from '../../../../../models/server';

--- a/src/app/components/project-map/context-menu/actions/start-capture/start-capture-action.component.ts
+++ b/src/app/components/project-map/context-menu/actions/start-capture/start-capture-action.component.ts
@ -1,7 +1,7 @@
 import { Component, Input } from '@angular/core';
 import { Server } from '../../../../../models/server';
 import { Link } from '../../../../../models/link';
-import { MatDialog } from '@angular/material';
+import { MatDialog } from '@angular/material/dialog';
 import { StartCaptureDialogComponent } from '../../../packet-capturing/start-capture/start-capture.component';
 import { Project } from '../../../../../models/project';

--- a/src/app/components/project-map/context-menu/context-menu.component.ts
+++ b/src/app/components/project-map/context-menu/context-menu.component.ts
@ -1,5 +1,5 @@
 import { ChangeDetectorRef, Component, Input, OnInit, ViewChild } from '@angular/core';
-import { MatMenuTrigger } from '@angular/material';
+import { MatMenuTrigger } from '@angular/material/menu';
 import { DomSanitizer } from '@angular/platform-browser';
 import { Node } from '../../../cartography/models/node';
 import { Server } from '../../../models/server';
@ -22,7 +22,7 @@ export class ContextMenuComponent implements OnInit {
  @Input() project: Project;
  @Input() server: Server;

-  @ViewChild(MatMenuTrigger, {static: false}) contextMenu: MatMenuTrigger;
+  @ViewChild(MatMenuTrigger) contextMenu: MatMenuTrigger;

  topPosition;
  leftPosition;
--- a/src/app/components/project-map/context-menu/dialogs/config-dialog/config-dialog.component.ts
+++ b/src/app/components/project-map/context-menu/dialogs/config-dialog/config-dialog.component.ts
@ -1,5 +1,5 @@
 import { Component, Input } from '@angular/core';
-import { MatDialogRef } from '@angular/material';
+import { MatDialogRef } from '@angular/material/dialog';

@Component({
    selector: 'app-config-dialog',
--- a/src/app/components/project-map/draw-link-tool/draw-link-tool.component.ts
+++ b/src/app/components/project-map/draw-link-tool/draw-link-tool.component.ts
@ -19,7 +19,7 @@ import { NodeToMapNodeConverter } from '../../../cartography/converters/map/node
 })
 export class DrawLinkToolComponent implements OnInit, OnDestroy {
  @Input() links: Link[];
-  @ViewChild(NodeSelectInterfaceComponent, {static: false}) nodeSelectInterfaceMenu: NodeSelectInterfaceComponent;
+  @ViewChild(NodeSelectInterfaceComponent) nodeSelectInterfaceMenu: NodeSelectInterfaceComponent;

  private nodeClicked$: Subscription;

--- a/src/app/components/project-map/drawings-editors/style-editor/style-editor.component.ts
+++ b/src/app/components/project-map/drawings-editors/style-editor/style-editor.component.ts
@ -2,7 +2,7 @@ import { Component, OnInit, Injectable } from '@angular/core';
 import { Server } from '../../../../models/server';
 import { Project } from '../../../../models/project';
 import { Drawing } from '../../../../cartography/models/drawing';
-import { MatDialogRef } from '@angular/material';
+import { MatDialogRef } from '@angular/material/dialog';
 import { DrawingToMapDrawingConverter } from '../../../../cartography/converters/map/drawing-to-map-drawing-converter';
 import { MapDrawingToSvgConverter } from '../../../../cartography/converters/map/map-drawing-to-svg-converter';
 import { DrawingService } from '../../../../services/drawing.service';
--- a/src/app/components/project-map/drawings-editors/text-editor/text-editor.component.ts
+++ b/src/app/components/project-map/drawings-editors/text-editor/text-editor.component.ts
@ -2,7 +2,7 @@ import { Component, OnInit, ViewChild, ElementRef, Renderer2 } from '@angular/co
 import { Project } from '../../../../models/project';
 import { Drawing } from '../../../../cartography/models/drawing';
 import { Server } from '../../../../models/server';
-import { MatDialogRef } from '@angular/material';
+import { MatDialogRef } from '@angular/material/dialog';
 import { DrawingToMapDrawingConverter } from '../../../../cartography/converters/map/drawing-to-map-drawing-converter';
 import { MapDrawingToSvgConverter } from '../../../../cartography/converters/map/map-drawing-to-svg-converter';
 import { DrawingService } from '../../../../services/drawing.service';
--- a/src/app/components/project-map/help-dialog/help-dialog.component.ts
+++ b/src/app/components/project-map/help-dialog/help-dialog.component.ts
@ -1,5 +1,5 @@
 import { Component, Input } from '@angular/core';
-import { MatDialogRef } from '@angular/material';
+import { MatDialogRef } from '@angular/material/dialog';
 import { Message } from '../../../models/message';

@Component({
--- a/src/app/components/project-map/info-dialog/info-dialog.component.ts
+++ b/src/app/components/project-map/info-dialog/info-dialog.component.ts
@ -1,5 +1,5 @@
 import { Component, Input, OnInit } from '@angular/core';
-import { MatDialogRef } from '@angular/material';
+import { MatDialogRef } from '@angular/material/dialog';
 import { Node } from '../../../cartography/models/node';
 import { InfoService } from '../../../services/info.service';
 import { Server } from '../../../models/server';
--- a/src/app/components/project-map/log-console/log-console.component.ts
+++ b/src/app/components/project-map/log-console/log-console.component.ts
@ -28,7 +28,7 @@ export class LogConsoleComponent implements OnInit, AfterViewInit, OnDestroy {
    @Input() server: Server;
    @Input() project: Project;

-    @ViewChild('console', {static: false}) console: ElementRef;
+    @ViewChild('console') console: ElementRef;

    private version = version;
    private nodeSubscription: Subscription;
--- a/src/app/components/project-map/new-template-dialog/appliance-info-dialog/appliance-info-dialog.component.ts
+++ b/src/app/components/project-map/new-template-dialog/appliance-info-dialog/appliance-info-dialog.component.ts
@ -1,5 +1,5 @@
 import { Component, Inject } from '@angular/core';
-import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';
+import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
 import { Appliance } from '../../../../models/appliance';

@Component({
--- a/src/app/components/project-map/new-template-dialog/new-template-dialog.component.html
+++ b/src/app/components/project-map/new-template-dialog/new-template-dialog.component.html
@ -1,7 +1,7 @@
 <h1 mat-dialog-title>Add new template</h1>

 <mat-horizontal-stepper [linear]="false" #stepper>
-    <mat-step [stepControl]="firstFormGroup">
+    <mat-step>
        <ng-template matStepLabel>Please select how you want to create new template</ng-template>

        <mat-radio-group class="radio-group">
@ -15,7 +15,7 @@
        </div>
    </mat-step>

-    <mat-step [stepControl]="secondFormGroup">
+    <mat-step>
        <ng-template matStepLabel>{{actionTitle}}</ng-template>

        <mat-card [hidden]="!(action==='install')">
--- a/src/app/components/project-map/new-template-dialog/new-template-dialog.component.ts
+++ b/src/app/components/project-map/new-template-dialog/new-template-dialog.component.ts
@ -1,5 +1,10 @@
 import { Component, Input, OnInit, ChangeDetectorRef, ViewChild } from '@angular/core';
-import { MatDialogRef, Sort, MatTableDataSource, MatPaginator, MatDialog, MatStepper, MatSelectionList, MatSelectionListChange } from '@angular/material';
+import { MatDialogRef, MatDialog } from '@angular/material/dialog';
+import { MatSelectionList, MatSelectionListChange } from '@angular/material/list';
+import { MatPaginator } from '@angular/material/paginator';
+import { Sort } from '@angular/material/sort';
+import { MatStepper } from '@angular/material/stepper';
+import { MatTableDataSource } from '@angular/material/table';
 import { Server } from '../../../models/server';
 import { Node } from '../../../cartography/models/node';
 import { Project } from '../../../models/project';
--- a/src/app/components/project-map/node-editors/config-editor/config-editor.component.ts
+++ b/src/app/components/project-map/node-editors/config-editor/config-editor.component.ts
@ -2,7 +2,7 @@ import { Component, OnInit } from '@angular/core';
 import { Node } from '../../../../cartography/models/node';
 import { Project } from '../../../../models/project';
 import { Server } from '../../../../models/server';
-import { MatDialogRef } from '@angular/material';
+import { MatDialogRef } from '@angular/material/dialog';
 import { NodeService } from '../../../../services/node.service';
 import { ToasterService } from '../../../../services/toaster.service';

--- a/src/app/components/project-map/node-editors/configurator/atm_switch/configurator-atm-switch.component.ts
+++ b/src/app/components/project-map/node-editors/configurator/atm_switch/configurator-atm-switch.component.ts
@ -4,7 +4,7 @@ import { Node } from '../../../../../cartography/models/node';
 import { Server } from '../../../../../models/server';
 import { NodeService } from '../../../../../services/node.service';
 import { ToasterService } from '../../../../../services/toaster.service';
-import { MatDialogRef } from '@angular/material';
+import { MatDialogRef } from '@angular/material/dialog';


@Component({
--- a/src/app/components/project-map/node-editors/configurator/cloud/configurator-cloud.component.ts
+++ b/src/app/components/project-map/node-editors/configurator/cloud/configurator-cloud.component.ts
@ -4,7 +4,7 @@ import { Node } from '../../../../../cartography/models/node';
 import { Server } from '../../../../../models/server';
 import { NodeService } from '../../../../../services/node.service';
 import { ToasterService } from '../../../../../services/toaster.service';
-import { MatDialogRef } from '@angular/material';
+import { MatDialogRef } from '@angular/material/dialog';
 import { CustomAdaptersTableComponent } from '../../../../../components/preferences/common/custom-adapters-table/custom-adapters-table.component';
 import { QemuBinary } from '../../../../../models/qemu/qemu-binary';
 import { BuiltInTemplatesConfigurationService } from '../../../../../services/built-in-templates-configuration.service';
@ -38,7 +38,7 @@ export class ConfiguratorDialogCloudComponent implements OnInit {
    ethernetInterface: string = '';
    ethernetInterfaces: string[] = ['Ethernet 2', 'Ethernet 3'];

-    @ViewChild("udpTunnels", {static: false}) udpTunnels: UdpTunnelsComponent;
+    @ViewChild("udpTunnels") udpTunnels: UdpTunnelsComponent;

    constructor(
        public dialogRef: MatDialogRef<ConfiguratorDialogCloudComponent>,
--- a/src/app/components/project-map/node-editors/configurator/docker/configurator-docker.component.ts
+++ b/src/app/components/project-map/node-editors/configurator/docker/configurator-docker.component.ts
@ -4,7 +4,7 @@ import { Node } from '../../../../../cartography/models/node';
 import { Server } from '../../../../../models/server';
 import { NodeService } from '../../../../../services/node.service';
 import { ToasterService } from '../../../../../services/toaster.service';
-import { MatDialogRef } from '@angular/material';
+import { MatDialogRef } from '@angular/material/dialog';
 import { DockerConfigurationService } from '../../../../../services/docker-configuration.service';


--- a/src/app/components/project-map/node-editors/configurator/ethernet-switch/configurator-ethernet-switch.component.ts
+++ b/src/app/components/project-map/node-editors/configurator/ethernet-switch/configurator-ethernet-switch.component.ts
@ -4,7 +4,7 @@ import { Node } from '../../../../../cartography/models/node';
 import { Server } from '../../../../../models/server';
 import { NodeService } from '../../../../../services/node.service';
 import { ToasterService } from '../../../../../services/toaster.service';
-import { MatDialogRef } from '@angular/material';
+import { MatDialogRef } from '@angular/material/dialog';
 import { BuiltInTemplatesConfigurationService } from '../../../../../services/built-in-templates-configuration.service';
 import { PortsComponent } from '../../../../../components/preferences/common/ports/ports.component';

@ -15,7 +15,7 @@ import { PortsComponent } from '../../../../../components/preferences/common/por
    styleUrls: ['../configurator.component.scss']
 })
 export class ConfiguratorDialogEthernetSwitchComponent implements OnInit {
-    @ViewChild(PortsComponent, {static: false}) portsComponent: PortsComponent;
+    @ViewChild(PortsComponent) portsComponent: PortsComponent;
    server: Server;
    node: Node;
    name: string;
--- a/src/app/components/project-map/node-editors/configurator/ethernet_hub/configurator-ethernet-hub.component.ts
+++ b/src/app/components/project-map/node-editors/configurator/ethernet_hub/configurator-ethernet-hub.component.ts
@ -5,7 +5,7 @@ import { Node } from '../../../../../cartography/models/node';
 import { Server } from '../../../../../models/server';
 import { NodeService } from '../../../../../services/node.service';
 import { ToasterService } from '../../../../../services/toaster.service';
-import { MatDialogRef } from '@angular/material';
+import { MatDialogRef } from '@angular/material/dialog';


@Component({
--- a/src/app/components/project-map/node-editors/configurator/ios/configurator-ios.component.ts
+++ b/src/app/components/project-map/node-editors/configurator/ios/configurator-ios.component.ts
@ -4,7 +4,7 @@ import { Node } from '../../../../../cartography/models/node';
 import { Server } from '../../../../../models/server';
 import { NodeService } from '../../../../../services/node.service';
 import { ToasterService } from '../../../../../services/toaster.service';
-import { MatDialogRef } from '@angular/material';
+import { MatDialogRef } from '@angular/material/dialog';
 import { IosConfigurationService } from '../../../../../services/ios-configuration.service';


--- a/src/app/components/project-map/node-editors/configurator/iou/configurator-iou.component.ts
+++ b/src/app/components/project-map/node-editors/configurator/iou/configurator-iou.component.ts
@ -4,7 +4,7 @@ import { Node } from '../../../../../cartography/models/node';
 import { Server } from '../../../../../models/server';
 import { NodeService } from '../../../../../services/node.service';
 import { ToasterService } from '../../../../../services/toaster.service';
-import { MatDialogRef } from '@angular/material';
+import { MatDialogRef } from '@angular/material/dialog';
 import { IouConfigurationService } from '../../../../../services/iou-configuration.service';


--- a/src/app/components/project-map/node-editors/configurator/nat/configurator-nat.component.ts
+++ b/src/app/components/project-map/node-editors/configurator/nat/configurator-nat.component.ts
@ -4,7 +4,7 @@ import { Node } from '../../../../../cartography/models/node';
 import { Server } from '../../../../../models/server';
 import { NodeService } from '../../../../../services/node.service';
 import { ToasterService } from '../../../../../services/toaster.service';
-import { MatDialogRef } from '@angular/material';
+import { MatDialogRef } from '@angular/material/dialog';


@Component({
--- a/src/app/components/project-map/node-editors/configurator/qemu/configurator-qemu.component.ts
+++ b/src/app/components/project-map/node-editors/configurator/qemu/configurator-qemu.component.ts
@ -4,7 +4,7 @@ import { Node } from '../../../../../cartography/models/node';
 import { Server } from '../../../../../models/server';
 import { NodeService } from '../../../../../services/node.service';
 import { ToasterService } from '../../../../../services/toaster.service';
-import { MatDialogRef, MatDialog } from '@angular/material';
+import { MatDialogRef, MatDialog } from '@angular/material/dialog';
 import { CustomAdaptersTableComponent } from '../../../../../components/preferences/common/custom-adapters-table/custom-adapters-table.component';
 import { QemuService } from '../../../../../services/qemu.service';
 import { QemuConfigurationService } from '../../../../../services/qemu-configuration.service';
@ -40,7 +40,7 @@ export class ConfiguratorDialogQemuComponent implements OnInit {
    };
    dialogRefQemuImageCreator;

-    @ViewChild("customAdapters", {static: false}) customAdapters: CustomAdaptersTableComponent;
+    @ViewChild("customAdapters") customAdapters: CustomAdaptersTableComponent;

    constructor(
        private dialog: MatDialog,
--- a/src/app/components/project-map/node-editors/configurator/qemu/qemu-image-creator/qemu-image-creator.component.ts
+++ b/src/app/components/project-map/node-editors/configurator/qemu/qemu-image-creator/qemu-image-creator.component.ts
@ -3,7 +3,7 @@ import { FormBuilder, FormGroup, Validators, FormControl } from '@angular/forms'
 import { Server } from '../../../../../../models/server';
 import { NodeService } from '../../../../../../services/node.service';
 import { ToasterService } from '../../../../../../services/toaster.service';
-import { MatDialogRef } from '@angular/material';
+import { MatDialogRef } from '@angular/material/dialog';
 import { QemuService } from '../../../../../../services/qemu.service';
 import { QemuImg } from '../../../../../../models/qemu/qemu-img';

--- a/src/app/components/project-map/node-editors/configurator/switch/configurator-switch.component.ts
+++ b/src/app/components/project-map/node-editors/configurator/switch/configurator-switch.component.ts
@ -4,7 +4,7 @@ import { Node } from '../../../../../cartography/models/node';
 import { Server } from '../../../../../models/server';
 import { NodeService } from '../../../../../services/node.service';
 import { ToasterService } from '../../../../../services/toaster.service';
-import { MatDialogRef } from '@angular/material';
+import { MatDialogRef } from '@angular/material/dialog';


@Component({
--- a/src/app/components/project-map/node-editors/configurator/traceng/configurator-traceng.component.ts
+++ b/src/app/components/project-map/node-editors/configurator/traceng/configurator-traceng.component.ts
@ -4,7 +4,7 @@ import { Node } from '../../../../../cartography/models/node';
 import { Server } from '../../../../../models/server';
 import { NodeService } from '../../../../../services/node.service';
 import { ToasterService } from '../../../../../services/toaster.service';
-import { MatDialogRef } from '@angular/material';
+import { MatDialogRef } from '@angular/material/dialog';


@Component({
--- a/src/app/components/project-map/node-editors/configurator/virtualbox/configurator-virtualbox.component.ts
+++ b/src/app/components/project-map/node-editors/configurator/virtualbox/configurator-virtualbox.component.ts
@ -4,7 +4,7 @@ import { Node } from '../../../../../cartography/models/node';
 import { Server } from '../../../../../models/server';
 import { NodeService } from '../../../../../services/node.service';
 import { ToasterService } from '../../../../../services/toaster.service';
-import { MatDialogRef } from '@angular/material';
+import { MatDialogRef } from '@angular/material/dialog';
 import { VirtualBoxConfigurationService } from '../../../../../services/virtual-box-configuration.service';
 import { CustomAdaptersTableComponent } from '../../../../../components/preferences/common/custom-adapters-table/custom-adapters-table.component';

@ -25,7 +25,7 @@ export class ConfiguratorDialogVirtualBoxComponent implements OnInit {
    displayedColumns: string[] = ['adapter_number', 'port_name', 'adapter_type', 'actions'];
    networkTypes = [];

-    @ViewChild("customAdapters", {static: false}) customAdapters: CustomAdaptersTableComponent;
+    @ViewChild("customAdapters") customAdapters: CustomAdaptersTableComponent;

    constructor(
        public dialogRef: MatDialogRef<ConfiguratorDialogVirtualBoxComponent>,
--- a/src/app/components/project-map/node-editors/configurator/vmware/configurator-vmware.component.ts
+++ b/src/app/components/project-map/node-editors/configurator/vmware/configurator-vmware.component.ts
@ -4,7 +4,7 @@ import { Node } from '../../../../../cartography/models/node';
 import { Server } from '../../../../../models/server';
 import { NodeService } from '../../../../../services/node.service';
 import { ToasterService } from '../../../../../services/toaster.service';
-import { MatDialogRef } from '@angular/material';
+import { MatDialogRef } from '@angular/material/dialog';
 import { CustomAdaptersTableComponent } from '../../../../../components/preferences/common/custom-adapters-table/custom-adapters-table.component';
 import { VmwareConfigurationService } from '../../../../../services/vmware-configuration.service';

@ -25,7 +25,7 @@ export class ConfiguratorDialogVmwareComponent implements OnInit {
    displayedColumns: string[] = ['adapter_number', 'port_name', 'adapter_type', 'actions'];
    networkTypes = [];

-    @ViewChild("customAdapters", {static: false}) customAdapters: CustomAdaptersTableComponent;
+    @ViewChild("customAdapters") customAdapters: CustomAdaptersTableComponent;

    constructor(
        public dialogRef: MatDialogRef<ConfiguratorDialogVmwareComponent>,
--- a/src/app/components/project-map/node-editors/configurator/vpcs/configurator-vpcs.component.ts
+++ b/src/app/components/project-map/node-editors/configurator/vpcs/configurator-vpcs.component.ts
@ -5,7 +5,7 @@ import { Node } from '../../../../../cartography/models/node';
 import { Server } from '../../../../../models/server';
 import { NodeService } from '../../../../../services/node.service';
 import { ToasterService } from '../../../../../services/toaster.service';
-import { MatDialogRef } from '@angular/material';
+import { MatDialogRef } from '@angular/material/dialog';


@Component({
--- a/src/app/components/project-map/node-select-interface/node-select-interface.component.ts
+++ b/src/app/components/project-map/node-select-interface/node-select-interface.component.ts
@ -1,5 +1,5 @@
 import { ChangeDetectorRef, Component, EventEmitter, Input, OnInit, Output, ViewChild, ViewEncapsulation } from '@angular/core';
-import { MatMenuTrigger } from '@angular/material';
+import { MatMenuTrigger } from '@angular/material/menu';
 import { DomSanitizer } from '@angular/platform-browser';
 import { Node } from '../../../cartography/models/node';
 import { Port } from '../../../models/port';
@ -15,7 +15,7 @@ export class NodeSelectInterfaceComponent implements OnInit {
  @Input() links: Link[];
  @Output() onChooseInterface = new EventEmitter<any>();

-  @ViewChild(MatMenuTrigger, {static: false}) contextMenu: MatMenuTrigger;
+  @ViewChild(MatMenuTrigger) contextMenu: MatMenuTrigger;

  protected topPosition;
  protected leftPosition;
--- a/src/app/components/project-map/packet-capturing/packet-filters/packet-filters.component.ts
+++ b/src/app/components/project-map/packet-capturing/packet-filters/packet-filters.component.ts
@ -2,7 +2,7 @@ import { Component, OnInit } from '@angular/core';
 import { Link } from '../../../../models/link';
 import { Server } from '../../../../models/server';
 import { Project } from '../../../../models/project';
-import { MatDialogRef, MatDialog } from '@angular/material';
+import { MatDialogRef, MatDialog } from '@angular/material/dialog';
 import { LinkService } from '../../../../services/link.service';
 import { FilterDescription } from '../../../../models/filter-description';
 import { HelpDialogComponent } from '../../help-dialog/help-dialog.component';
--- a/src/app/components/project-map/packet-capturing/start-capture/start-capture.component.ts
+++ b/src/app/components/project-map/packet-capturing/start-capture/start-capture.component.ts
@ -1,7 +1,7 @@
 import { Component, OnInit } from '@angular/core';
 import { Server } from '../../../../models/server';
 import { Link } from '../../../../models/link';
-import { MatDialogRef } from '@angular/material';
+import { MatDialogRef } from '@angular/material/dialog';
 import { PacketFiltersDialogComponent } from '../packet-filters/packet-filters.component';
 import { LinkService } from '../../../../services/link.service';
 import { CapturingSettings } from '../../../../models/capturingSettings';
--- a/src/app/components/project-map/project-map-menu/project-map-menu.component.ts
+++ b/src/app/components/project-map/project-map-menu/project-map-menu.component.ts
@ -9,7 +9,7 @@ import { SymbolService } from '../../../services/symbol.service';
 import { select } from 'd3-selection';
 import downloadSvg from 'svg-crowbar';
 import { ElectronService } from 'ngx-electron';
-import { MatDialog } from '@angular/material';
+import { MatDialog } from '@angular/material/dialog';
 import { ScreenshotDialogComponent, Screenshot } from '../screenshot-dialog/screenshot-dialog.component';
 import { saveAsPng, saveAsJpeg } from 'save-html-as-image';
 import { ThemeService } from '../../../services/theme.service';
--- a/src/app/components/project-map/project-map.component.ts
+++ b/src/app/components/project-map/project-map.component.ts
@ -53,7 +53,9 @@ import { MapLinkNodeToLinkNodeConverter } from '../../cartography/converters/map
 import { ProjectMapMenuComponent } from './project-map-menu/project-map-menu.component';
 import { ToasterService } from '../../services/toaster.service';
 import { ImportProjectDialogComponent } from '../projects/import-project-dialog/import-project-dialog.component';
-import { MatDialog, MatBottomSheet, mixinColor } from '@angular/material';
+import { MatBottomSheet } from '@angular/material/bottom-sheet';
+import { mixinColor } from '@angular/material/core';
+import { MatDialog } from '@angular/material/dialog';
 import { AddBlankProjectDialogComponent } from '../projects/add-blank-project-dialog/add-blank-project-dialog.component';
 import { SaveProjectDialogComponent } from '../projects/save-project-dialog/save-project-dialog.component';
 import { MapNodesDataSource, MapLinksDataSource, MapDrawingsDataSource, MapSymbolsDataSource, Indexed } from '../../cartography/datasources/map-datasource';
@ -109,9 +111,9 @@ export class ProjectMapComponent implements OnInit, OnDestroy {
  private scrollEnabled: boolean = false;
  public isLightThemeEnabled: boolean = false;

-  @ViewChild(ContextMenuComponent, {static: false}) contextMenu: ContextMenuComponent;
-  @ViewChild(D3MapComponent, {static: false}) mapChild: D3MapComponent;
-  @ViewChild(ProjectMapMenuComponent, {static: false}) projectMapMenuComponent: ProjectMapMenuComponent;
+  @ViewChild(ContextMenuComponent) contextMenu: ContextMenuComponent;
+  @ViewChild(D3MapComponent) mapChild: D3MapComponent;
+  @ViewChild(ProjectMapMenuComponent) projectMapMenuComponent: ProjectMapMenuComponent;

  private projectMapSubscription: Subscription =  new Subscription();

--- a/src/app/components/project-map/screenshot-dialog/screenshot-dialog.component.ts
+++ b/src/app/components/project-map/screenshot-dialog/screenshot-dialog.component.ts
@ -1,5 +1,5 @@
 import { Component, OnInit } from '@angular/core';
-import { MatDialogRef } from '@angular/material';
+import { MatDialogRef } from '@angular/material/dialog';
 import { FormBuilder, FormGroup, Validators, FormControl } from '@angular/forms';
 import { ToasterService } from '../../../services/toaster.service';
 import { ElectronService } from 'ngx-electron';
--- a/src/app/components/project-map/web-console/web-console.component.ts
+++ b/src/app/components/project-map/web-console/web-console.component.ts
@ -23,7 +23,7 @@ export class WebConsoleComponent implements OnInit, AfterViewInit {
    public fitAddon: FitAddon = new FitAddon();
    private copiedText: string = '';

-    @ViewChild('terminal', {static: false}) terminal: ElementRef;
+    @ViewChild('terminal') terminal: ElementRef;

    constructor(
        private consoleService: NodeConsoleService
--- a/src/app/components/projects/add-blank-project-dialog/add-blank-project-dialog.component.ts
+++ b/src/app/components/projects/add-blank-project-dialog/add-blank-project-dialog.component.ts
@ -1,6 +1,6 @@
 import { Component, OnInit, EventEmitter } from '@angular/core';
 import { Router } from '@angular/router';
-import { MatDialog, MatDialogRef } from '@angular/material';
+import { MatDialog, MatDialogRef } from '@angular/material/dialog';
 import { FormBuilder, FormGroup, Validators, FormControl } from '@angular/forms';
 import { Project } from '../../../models/project';
 import { Server } from '../../../models/server';
--- a/src/app/components/projects/choose-name-dialog/choose-name-dialog.component.ts
+++ b/src/app/components/projects/choose-name-dialog/choose-name-dialog.component.ts
@ -1,5 +1,5 @@
 import { Component, Input, OnInit } from '@angular/core';
-import { MatDialogRef } from '@angular/material';
+import { MatDialogRef } from '@angular/material/dialog';
 import { Server } from '../../../models/server';
 import { ProjectService } from '../../../services/project.service';
 import { Project } from '../../../models/project';
--- a/src/app/components/projects/confirmation-bottomsheet/confirmation-bottomsheet.component.ts
+++ b/src/app/components/projects/confirmation-bottomsheet/confirmation-bottomsheet.component.ts
@ -1,5 +1,6 @@
 import { Component, OnInit, Inject } from '@angular/core';
-import { MatDialogRef, MAT_DIALOG_DATA, MatBottomSheetRef } from '@angular/material';
+import { MatBottomSheetRef } from '@angular/material/bottom-sheet';
+import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
 import { ThemeService } from '../../../services/theme.service';

@Component({
--- a/src/app/components/projects/confirmation-dialog/confirmation-dialog.component.ts
+++ b/src/app/components/projects/confirmation-dialog/confirmation-dialog.component.ts
@ -1,5 +1,5 @@
 import { Component, OnInit, Inject } from '@angular/core';
-import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';
+import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
 import { Project } from '../../../models/project';

@Component({
--- a/src/app/components/projects/edit-project-dialog/edit-project-dialog.component.ts
+++ b/src/app/components/projects/edit-project-dialog/edit-project-dialog.component.ts
@ -1,5 +1,5 @@
 import { Component, OnInit, Injectable } from '@angular/core';
-import { MatDialogRef } from '@angular/material';
+import { MatDialogRef } from '@angular/material/dialog';
 import { FormGroup, FormBuilder, FormControl, Validators } from '@angular/forms';
 import { Server } from '../../../models/server';
 import { Project, ProjectVariable } from '../../../models/project';
--- a/src/app/components/projects/import-project-dialog/import-project-dialog.component.ts
+++ b/src/app/components/projects/import-project-dialog/import-project-dialog.component.ts
@ -1,5 +1,5 @@
 import { Component, OnInit, Inject, EventEmitter } from '@angular/core';
-import { MatDialogRef, MAT_DIALOG_DATA, MatDialog } from '@angular/material';
+import { MatDialogRef, MAT_DIALOG_DATA, MatDialog } from '@angular/material/dialog';
 import { FileUploader, ParsedResponseHeaders, FileItem } from 'ng2-file-upload';
 import { Server } from '../../../models/server';
 import { v4 as uuid } from 'uuid';
--- a/src/app/components/projects/navigation-dialog/navigation-dialog.component.ts
+++ b/src/app/components/projects/navigation-dialog/navigation-dialog.component.ts
@ -1,5 +1,6 @@
 import { Component, OnInit, Inject } from '@angular/core';
-import { MatDialogRef, MAT_DIALOG_DATA, MatBottomSheetRef } from '@angular/material';
+import { MatBottomSheetRef } from '@angular/material/bottom-sheet';
+import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
 import { ThemeService } from '../../../services/theme.service';

@Component({
--- a/src/app/components/projects/projects.component.ts
+++ b/src/app/components/projects/projects.component.ts
@ -1,6 +1,8 @@
 import { Component, OnInit, ViewChild } from '@angular/core';
 import { ActivatedRoute, ParamMap, Router } from '@angular/router';
-import { MatSort, MatSortable, MatDialog, MatBottomSheet } from '@angular/material';
+import { MatBottomSheet } from '@angular/material/bottom-sheet';
+import { MatDialog } from '@angular/material/dialog';
+import { MatSort, MatSortable } from '@angular/material/sort';

 import { DataSource } from '@angular/cdk/collections';

--- a/src/app/components/projects/save-project-dialog/save-project-dialog.component.ts
+++ b/src/app/components/projects/save-project-dialog/save-project-dialog.component.ts
@ -1,6 +1,6 @@
 import { Component, OnInit, EventEmitter } from '@angular/core';
 import { Router } from '@angular/router';
-import { MatDialog, MatDialogRef } from '@angular/material';
+import { MatDialog, MatDialogRef } from '@angular/material/dialog';
 import { FormBuilder, FormGroup, Validators, FormControl } from '@angular/forms';
 import { Project } from '../../../models/project';
 import { Server } from '../../../models/server';
--- a/src/app/components/servers/add-server-dialog/add-server-dialog.component.ts
+++ b/src/app/components/servers/add-server-dialog/add-server-dialog.component.ts
@ -1,5 +1,5 @@
 import { Component, Inject, OnInit } from '@angular/core';
-import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';
+import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
 import { Server } from '../../../models/server';
 import { ElectronService } from 'ngx-electron';
 import { FormGroup, FormControl, Validators } from '@angular/forms';
--- a/src/app/components/servers/configure-gns3vm-dialog/configure-gns3vm-dialog.component.ts
+++ b/src/app/components/servers/configure-gns3vm-dialog/configure-gns3vm-dialog.component.ts
@ -1,5 +1,5 @@
 import { Component, OnInit } from '@angular/core';
-import { MatDialogRef} from '@angular/material';
+import { MatDialogRef } from '@angular/material/dialog';

@Component({
  selector: 'app-configure-gns3-vm-dialog',
--- a/src/app/components/servers/servers.component.ts
+++ b/src/app/components/servers/servers.component.ts
@ -1,6 +1,7 @@
 import { Component, Inject, OnInit, OnDestroy, ChangeDetectorRef } from '@angular/core';
 import { DataSource } from '@angular/cdk/collections';
-import { MatDialog, MatDialogRef, MAT_DIALOG_DATA, MatBottomSheet } from '@angular/material';
+import { MatBottomSheet } from '@angular/material/bottom-sheet';
+import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
 import { Observable, merge, Subscription } from 'rxjs';
 import { map } from 'rxjs/operators';
 import { Router } from '@angular/router';
--- a/src/app/components/snapshots/create-snapshot-dialog/create-snapshot-dialog.component.ts
+++ b/src/app/components/snapshots/create-snapshot-dialog/create-snapshot-dialog.component.ts
@ -1,6 +1,6 @@
 import { Component, Inject } from '@angular/core';
 import { Snapshot } from '../../../models/snapshot';
-import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';
+import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
 import { Server } from '../../../models/server';
 import { Project } from '../../../models/project';
 import { FormBuilder, FormGroup, Validators, FormControl } from '@angular/forms';
--- a/src/app/components/snapshots/list-of-snapshots/list-of-snapshots.component.ts
+++ b/src/app/components/snapshots/list-of-snapshots/list-of-snapshots.component.ts
@ -4,7 +4,7 @@ import { ServerService } from '../../../services/server.service';
 import { ActivatedRoute } from '@angular/router';
 import { Server } from '../../..//models/server';
 import { Snapshot } from '../../../models/snapshot';
-import { Sort } from '@angular/material';
+import { Sort } from '@angular/material/sort';
 import { ProgressDialogService } from '../../../common/progress-dialog/progress-dialog.service';
 import { ToasterService } from '../../../services/toaster.service';
 import { Project } from '../../../models/project';
--- a/Show More
+++ b/Show More