fix(console): angular 13, grpc web 1.3.0, dependencies (#2688)

* cli core, migrations * material * input directive * fresh lock * update oidc lib * use angular-eslint next for ng 13 * clean lock * change qrcode lib, env * eslint * deps * grpc libs update, grpc web 1.0.3, rev env * remove grpc-web from build/zitadel/Dockerfile Co-authored-by: Livio Amstutz <livio.a@gmail.com>
2025-08-11 16:47:32 +00:00 · 2021-11-29 10:31:56 +01:00
parent 77a3f848e5
commit 33ae935bf6
37 changed files with 6517 additions and 12531 deletions
--- a/build/console/Dockerfile
+++ b/build/console/Dockerfile
@@ -18,7 +18,7 @@ ENV PROTOC_ARCH x86_64
 FROM ${BUILDARCH}-base AS base
 ARG PROTOC_VERSION=3.13.0
 ARG PROTOC_ZIP=protoc-${PROTOC_VERSION}-linux-${PROTOC_ARCH}.zip
-ARG GRPC_WEB_VERSION=1.2.1
+ARG GRPC_WEB_VERSION=1.3.0
 # no arm specific version available and x86 works fine at the moment:
 ARG GRPC_WEB=protoc-gen-grpc-web-${GRPC_WEB_VERSION}-linux-x86_64

--- a/build/zitadel/Dockerfile
+++ b/build/zitadel/Dockerfile
@@ -12,17 +12,13 @@ ENV PROTOC_ARCH x86_64
 #######################
 ## This step sets up the folder structure,
 ## initalices go mods,
-## downloads the protofiles,
-## protoc and protoc-gen-grpc-web for later use
+## downloads the protofiles and protoc for later use
 #######################
 FROM ${BUILDARCH}-base AS base
 ARG PROTOC_VERSION=3.18.0
 ARG PROTOC_ZIP=protoc-${PROTOC_VERSION}-linux-${PROTOC_ARCH}.zip
 ARG GATEWAY_VERSION=2.6.0
 ARG VALIDATOR_VERSION=0.6.2
-ARG GRPC_WEB_VERSION=1.2.1
-# no arm specific version available and x86 works fine at the moment:
-ARG GRPC_WEB=protoc-gen-grpc-web-${GRPC_WEB_VERSION}-linux-x86_64

 RUN apk add tar curl
 WORKDIR /proto
@@ -33,9 +29,6 @@ RUN apk add tar curl \
    && unzip -o $PROTOC_ZIP -d /usr/local bin/protoc \
    && unzip -o $PROTOC_ZIP -d /proto include/* \
    && rm -f $PROTOC_ZIP \
-    && curl -OL https://github.com/grpc/grpc-web/releases/download/${GRPC_WEB_VERSION}/${GRPC_WEB} \
-    && mv ${GRPC_WEB} /usr/local/bin/protoc-gen-grpc-web \
-    && chmod +x /usr/local/bin/protoc-gen-grpc-web \
    && curl https://raw.githubusercontent.com/envoyproxy/protoc-gen-validate/v${VALIDATOR_VERSION}/validate/validate.proto --create-dirs -o include/validate/validate.proto  \
    && curl https://raw.githubusercontent.com/grpc-ecosystem/grpc-gateway/v${GATEWAY_VERSION}/protoc-gen-openapiv2/options/annotations.proto --create-dirs -o include/protoc-gen-openapiv2/options/annotations.proto \
    && curl https://raw.githubusercontent.com/grpc-ecosystem/grpc-gateway/v${GATEWAY_VERSION}/protoc-gen-openapiv2/options/openapiv2.proto --create-dirs -o include/protoc-gen-openapiv2/options/openapiv2.proto \
--- a/console/.gitignore
+++ b/console/.gitignore
@@ -30,6 +30,7 @@ speed-measure-plugin*.json
 .history/*

 # misc
+/.angular/cache
 /.sass-cache
 /connect.lock
 /coverage
--- a/console/angular.json
+++ b/console/angular.json
@@ -22,22 +22,15 @@
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.app.json",
-            "assets": [
-              "src/favicon.ico",
-              "src/assets",
-              "src/manifest.webmanifest"
-            ],
-            "styles": [
-              "src/styles.scss"
-            ],
-            "scripts": [
-              "./node_modules/tinycolor2/dist/tinycolor-min.js"
-            ],
+            "assets": ["src/favicon.ico", "src/assets", "src/manifest.webmanifest"],
+            "styles": ["src/styles.scss"],
+            "scripts": ["./node_modules/tinycolor2/dist/tinycolor-min.js"],
            "allowedCommonJsDependencies": [
              "@angular/common/locales/de",
              "src/app/proto/generated/zitadel/admin_pb",
              "src/app/proto/generated/zitadel/management_pb",
              "src/app/proto/generated/**",
+              "google-protobuf/google/protobuf/empty_pb",
              "file-saver",
              "qrcode"
            ],
@@ -126,27 +119,15 @@
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.spec.json",
            "karmaConfig": "karma.conf.js",
-            "assets": [
-              "src/favicon.ico",
-              "src/assets",
-              "src/manifest.webmanifest"
-            ],
-            "styles": [
-              "./node_modules/@angular/material/prebuilt-themes/pink-bluegrey.css",
-              "src/styles.scss"
-            ],
-            "scripts": [
-              "./node_modules/tinycolor2/dist/tinycolor-min.js"
-            ]
+            "assets": ["src/favicon.ico", "src/assets", "src/manifest.webmanifest"],
+            "styles": ["./node_modules/@angular/material/prebuilt-themes/pink-bluegrey.css", "src/styles.scss"],
+            "scripts": ["./node_modules/tinycolor2/dist/tinycolor-min.js"]
          }
        },
        "lint": {
          "builder": "@angular-eslint/builder:lint",
          "options": {
-            "lintFilePatterns": [
-              "src/**/*.ts",
-              "src/**/*.html"
-            ]
+            "lintFilePatterns": ["src/**/*.ts", "src/**/*.html"]
          }
        },
        "e2e": {
--- a/console/package-lock.json
+++ b/console/package-lock.json
--- a/console/package.json
+++ b/console/package.json
@@ -10,60 +10,59 @@
  },
  "private": true,
  "dependencies": {
-    "@angular/animations": "~12.2.12",
-    "@angular/cdk": "~12.2.12",
-    "@angular/common": "~12.2.12",
-    "@angular/compiler": "~12.2.12",
-    "@angular/core": "~12.2.12",
-    "@angular/forms": "~12.2.12",
-    "@angular/material": "^12.2.12",
-    "@angular/material-moment-adapter": "^12.2.12",
-    "@angular/platform-browser": "~12.2.12",
-    "@angular/platform-browser-dynamic": "~12.2.12",
-    "@angular/router": "~12.2.12",
-    "@angular/service-worker": "~12.2.12",
+    "@angular/animations": "~13.0.2",
+    "@angular/cdk": "~13.0.2",
+    "@angular/common": "~13.0.2",
+    "@angular/compiler": "~13.0.2",
+    "@angular/core": "~13.0.2",
+    "@angular/forms": "~13.0.2",
+    "@angular/material": "^13.0.2",
+    "@angular/material-moment-adapter": "^13.0.2",
+    "@angular/platform-browser": "~13.0.2",
+    "@angular/platform-browser-dynamic": "~13.0.2",
+    "@angular/router": "~13.0.2",
+    "@angular/service-worker": "~13.0.2",
    "@grpc/grpc-js": "^1.3.2",
    "@ngx-translate/core": "^13.0.0",
    "@ngx-translate/http-loader": "^6.0.0",
    "@types/file-saver": "^2.0.2",
    "@types/google-protobuf": "^3.15.3",
    "@types/uuid": "^8.3.0",
-    "angular-oauth2-oidc": "^12.1.0",
-    "angularx-qrcode": "^11.0.0",
+    "angular-oauth2-oidc": "^13.0.1",
    "cors": "^2.8.5",
    "file-saver": "^2.0.5",
-    "google-proto-files": "^2.4.0",
+    "google-proto-files": "^2.5.0",
    "google-protobuf": "^3.19.1",
-    "grpc-web": "^1.2.1",
+    "grpc-web": "^1.3.0",
    "libphonenumber-js": "^1.9.34",
    "moment": "^2.29.1",
+    "ng-qrcode": "^6.0.0",
    "ngx-color": "^7.2.0",
    "ngx-image-cropper": "^3.3.5",
    "ngx-quicklink": "^0.2.6",
-    "rxjs": "~7.3.0",
+    "rxjs": "~7.4.0",
    "tinycolor2": "^1.4.2",
-    "ts-protoc-gen": "^0.14.0",
    "tslib": "^2.2.0",
    "uuid": "^8.3.2",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
-    "@angular-eslint/builder": "12.6.1",
-    "@angular-eslint/eslint-plugin": "12.5.0",
-    "@angular-eslint/eslint-plugin-template": "12.5.0",
-    "@angular-eslint/schematics": "12.6.1",
-    "@angular-eslint/template-parser": "12.5.0",
-    "@typescript-eslint/eslint-plugin": "4.28.2",
-    "@typescript-eslint/parser": "4.28.2",
-    "eslint": "^7.26.0",
-    "@angular-devkit/build-angular": "~12.2.12",
-    "@angular/cli": "~12.2.12",
-    "@angular/compiler-cli": "~12.2.12",
-    "@angular/language-service": "~12.2.12",
+    "@angular-devkit/build-angular": "~13.0.2",
+    "@angular-eslint/builder": "^13.0.1",
+    "@angular-eslint/eslint-plugin": "^13.0.1",
+    "@angular-eslint/eslint-plugin-template": "^13.0.1",
+    "@angular-eslint/schematics": "^13.0.1",
+    "@angular-eslint/template-parser": "^13.0.1",
+    "@angular/cli": "~13.0.2",
+    "@angular/compiler-cli": "~13.0.2",
+    "@angular/language-service": "~13.0.2",
    "@types/jasmine": "~3.9.1",
    "@types/jasminewd2": "~2.0.10",
    "@types/node": "^16.10.2",
+    "@typescript-eslint/eslint-plugin": "5.3.0",
+    "@typescript-eslint/parser": "5.3.0",
    "codelyzer": "^6.0.0",
+    "eslint": "^8.2.0",
    "jasmine-core": "~3.9.0",
    "jasmine-spec-reporter": "~7.0.0",
    "karma": "~6.3.6",
@@ -77,6 +76,6 @@
    "stylelint-config-standard": "^22.0.0",
    "stylelint-scss": "^3.21.0",
    "ts-node": "~10.2.1",
-    "typescript": "^4.2.4"
+    "typescript": "^4.4.4"
  }
 }
--- a/console/src/app/app.component.scss
+++ b/console/src/app/app.component.scss
@@ -1,4 +1,4 @@
-@use '~@angular/material' as mat;
+@use '@angular/material' as mat;

 .root-header {
  position: fixed;
--- a/console/src/app/app.module.ts
+++ b/console/src/app/app.module.ts
@@ -40,6 +40,7 @@ import { WarnDialogModule } from './modules/warn-dialog/warn-dialog.module';
 import { SignedoutComponent } from './pages/signedout/signedout.component';
 import { HasFeaturePipeModule } from './pipes/has-feature-pipe/has-feature-pipe.module';
 import { HasRolePipeModule } from './pipes/has-role-pipe/has-role-pipe.module';
+import { AdminService } from './services/admin.service';
 import { AuthenticationService } from './services/authentication.service';
 import { GrpcAuthService } from './services/grpc-auth.service';
 import { GrpcService } from './services/grpc.service';
@@ -47,6 +48,7 @@ import { AuthInterceptor } from './services/interceptors/auth.interceptor';
 import { GRPC_INTERCEPTORS } from './services/interceptors/grpc-interceptor';
 import { I18nInterceptor } from './services/interceptors/i18n.interceptor';
 import { OrgInterceptor } from './services/interceptors/org.interceptor';
+import { ManagementService } from './services/mgmt.service';
 import { RefreshService } from './services/refresh.service';
 import { SeoService } from './services/seo.service';
 import { StatehandlerProcessorService, StatehandlerProcessorServiceImpl } from './services/statehandler-processor.service';
@@ -183,6 +185,8 @@ const authConfig: AuthConfig = {
    GrpcService,
    AuthenticationService,
    GrpcAuthService,
+    ManagementService,
+    AdminService,
    SubscriptionService,
    AssetService,
    { provide: 'windowObject', useValue: window },
--- a/console/src/app/modules/app-card/app-card.component.scss
+++ b/console/src/app/modules/app-card/app-card.component.scss
@@ -1,4 +1,4 @@
-@use '~@angular/material' as mat;
+@use '@angular/material' as mat;

@mixin app-card-theme($theme) {
  /* stylelint-disable */
--- a/console/src/app/modules/app-radio/app-auth-method-radio/app-auth-method-radio.component.scss
+++ b/console/src/app/modules/app-radio/app-auth-method-radio/app-auth-method-radio.component.scss
@@ -1,4 +1,4 @@
-@use '~@angular/material' as mat;
+@use '@angular/material' as mat;

 .radio-button-wrapper {
  display: flex;
--- a/console/src/app/modules/app-radio/app-type-radio/app-type-radio.component.scss
+++ b/console/src/app/modules/app-radio/app-type-radio/app-type-radio.component.scss
@@ -1,4 +1,4 @@
-@use '~@angular/material' as mat;
+@use '@angular/material' as mat;

 .radio-button-wrapper {
  display: flex;
--- a/console/src/app/modules/avatar/avatar.component.scss
+++ b/console/src/app/modules/avatar/avatar.component.scss
@@ -1,4 +1,4 @@
-@use '~@angular/material' as mat;
+@use '@angular/material' as mat;

@mixin avatar-theme($theme) {
  $primary: map-get($theme, primary);
--- a/console/src/app/modules/card/card.scss
+++ b/console/src/app/modules/card/card.scss
@@ -1,4 +1,4 @@
-@use '~@angular/material' as mat;
+@use '@angular/material' as mat;

@mixin card-theme($theme) {
  /* stylelint-disable */
--- a/console/src/app/modules/changes/changes.component.scss
+++ b/console/src/app/modules/changes/changes.component.scss
@@ -1,4 +1,4 @@
-@use '~@angular/material' as mat;
+@use '@angular/material' as mat;

 .change-header {
  display: flex;
--- a/console/src/app/modules/detail-layout/detail-layout.component.scss
+++ b/console/src/app/modules/detail-layout/detail-layout.component.scss
@@ -1,4 +1,4 @@
-@use '~@angular/material' as mat;
+@use '@angular/material' as mat;

@mixin detail-layout-theme($theme) {
  /* stylelint-disable */
--- a/console/src/app/modules/form-field/form-field.component.scss
+++ b/console/src/app/modules/form-field/form-field.component.scss
@@ -1,4 +1,4 @@
-@use '~@angular/material' as mat;
+@use '@angular/material' as mat;

@mixin cnsl-form-field-theme($theme) {
  $primary: map-get($theme, primary);
--- a/console/src/app/modules/idp-create/idp-type-radio/idp-type-radio.component.scss
+++ b/console/src/app/modules/idp-create/idp-type-radio/idp-type-radio.component.scss
@@ -1,4 +1,4 @@
-@use '~@angular/material' as mat;
+@use '@angular/material' as mat;

 .idp-radio-button-wrapper {
  display: flex;
--- a/console/src/app/modules/info-row/info-row.component.scss
+++ b/console/src/app/modules/info-row/info-row.component.scss
@@ -1,4 +1,4 @@
-@use '~@angular/material' as mat;
+@use '@angular/material' as mat;

@mixin info-row-theme($theme) {
  $foreground: map-get($theme, foreground);
--- a/console/src/app/modules/info-section/info-section.component.scss
+++ b/console/src/app/modules/info-section/info-section.component.scss
@@ -1,4 +1,4 @@
-@use '~@angular/material' as mat;
+@use '@angular/material' as mat;

@mixin info-section-theme($theme) {
  $primary: map-get($theme, primary);
--- a/console/src/app/modules/input/input.directive.ts
+++ b/console/src/app/modules/input/input.directive.ts
@@ -16,38 +16,27 @@ import {
  Self,
 } from '@angular/core';
 import { FormGroupDirective, NgControl, NgForm } from '@angular/forms';
-import { CanUpdateErrorState, CanUpdateErrorStateCtor, ErrorStateMatcher, mixinErrorState } from '@angular/material/core';
+import { CanUpdateErrorState, ErrorStateMatcher, mixinErrorState } from '@angular/material/core';
 import { MAT_FORM_FIELD, MatFormField, MatFormFieldControl } from '@angular/material/form-field';
 import { getMatInputUnsupportedTypeError, MAT_INPUT_VALUE_ACCESSOR } from '@angular/material/input';
 import { Subject } from 'rxjs';

-
 // Invalid input type. Using one of these will throw an MatInputUnsupportedTypeError.
-const MAT_INPUT_INVALID_TYPES = [
-    'button',
-    'checkbox',
-    'file',
-    'hidden',
-    'image',
-    'radio',
-    'range',
-    'reset',
-    'submit',
-];
+const MAT_INPUT_INVALID_TYPES = ['button', 'checkbox', 'file', 'hidden', 'image', 'radio', 'range', 'reset', 'submit'];

 let nextUniqueId = 0;

-// Boilerplate for applying mixins to MatInput.
-/** @docs-private */
-class MatInputBase {
-    constructor(public _defaultErrorStateMatcher: ErrorStateMatcher,
+const _MatInputBase = mixinErrorState(
+  class {
+    constructor(
+      public _defaultErrorStateMatcher: ErrorStateMatcher,
      public _parentForm: NgForm,
      public _parentFormGroup: FormGroupDirective,
      /** @docs-private */
-        public ngControl: NgControl) { }
-}
-const _MatInputMixinBase: CanUpdateErrorStateCtor & typeof MatInputBase =
-    mixinErrorState(MatInputBase);
+      public ngControl: NgControl,
+    ) {}
+  },
+);

 /** Directive that allows a native input to work inside a `MatFormField`. */
@Directive({
@@ -74,11 +63,20 @@ const _MatInputMixinBase: CanUpdateErrorStateCtor & typeof MatInputBase =
  },
  providers: [{ provide: MatFormFieldControl, useExisting: InputDirective }],
 })
-export class InputDirective extends _MatInputMixinBase implements MatFormFieldControl<any>, OnChanges,
-    OnDestroy, AfterViewInit, DoCheck, CanUpdateErrorState {
+export class InputDirective
+  extends _MatInputBase
+  implements
+    MatFormFieldControl<any>,
+    OnChanges,
+    CanUpdateErrorState,
+    OnDestroy,
+    AfterViewInit,
+    DoCheck,
+    CanUpdateErrorState
+{
  protected _uid: string = `cnsl-input-${nextUniqueId++}`;
  protected _previousNativeValue: any;
-    private _inputValueAccessor: { value: any; };
+  private _inputValueAccessor: { value: any };
  private _previousPlaceholder!: string | null;

  /** Whether the component is being rendered on the server. */
@@ -142,8 +140,12 @@ export class InputDirective extends _MatInputMixinBase implements MatFormFieldCo
   * @docs-private
   */
  @Input()
-    get id(): string { return this._id; }
-    set id(value: string) { this._id = value || this._uid; }
+  get id(): string {
+    return this._id;
+  }
+  set id(value: string) {
+    this._id = value || this._uid;
+  }
  protected _id!: string;

  /**
@@ -157,13 +159,19 @@ export class InputDirective extends _MatInputMixinBase implements MatFormFieldCo
   * @docs-private
   */
  @Input()
-    get required(): boolean { return this._required; }
-    set required(value: boolean) { this._required = coerceBooleanProperty(value); }
+  get required(): boolean {
+    return this._required;
+  }
+  set required(value: boolean) {
+    this._required = coerceBooleanProperty(value);
+  }
  protected _required: boolean = false;

  /** Input type of the element. */
  @Input()
-    get type(): string { return this._type; }
+  get type(): string {
+    return this._type;
+  }
  set type(value: string) {
    this._type = value || 'text';
    this._validateType();
@@ -192,7 +200,9 @@ export class InputDirective extends _MatInputMixinBase implements MatFormFieldCo
   * @docs-private
   */
  @Input()
-    get value(): string { return this._inputValueAccessor.value; }
+  get value(): string {
+    return this._inputValueAccessor.value;
+  }
  set value(value: string) {
    if (value !== this.value) {
      this._inputValueAccessor.value = value;
@@ -202,18 +212,17 @@ export class InputDirective extends _MatInputMixinBase implements MatFormFieldCo

  /** Whether the element is readonly. */
  @Input()
-    get readonly(): boolean { return this._readonly; }
-    set readonly(value: boolean) { this._readonly = coerceBooleanProperty(value); }
+  get readonly(): boolean {
+    return this._readonly;
+  }
+  set readonly(value: boolean) {
+    this._readonly = coerceBooleanProperty(value);
+  }
  private _readonly: boolean = false;

-    protected _neverEmptyInputTypes: string[] = [
-        'date',
-        'datetime',
-        'datetime-local',
-        'month',
-        'time',
-        'week',
-    ].filter(t => getSupportedInputTypes().has(t));
+  protected _neverEmptyInputTypes: string[] = ['date', 'datetime', 'datetime-local', 'month', 'time', 'week'].filter((t) =>
+    getSupportedInputTypes().has(t),
+  );

  constructor(
    protected _elementRef: ElementRef<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>,
@@ -226,8 +235,8 @@ export class InputDirective extends _MatInputMixinBase implements MatFormFieldCo
    @Optional() @Self() @Inject(MAT_INPUT_VALUE_ACCESSOR) inputValueAccessor: any,
    private _autofillMonitor: AutofillMonitor,
    ngZone: NgZone,
-        @Optional() @Inject(MAT_FORM_FIELD) private _formField?: MatFormField) {
-
+    @Optional() @Inject(MAT_FORM_FIELD) private _formField?: MatFormField,
+  ) {
    super(_defaultErrorStateMatcher, _parentForm, _parentFormGroup, ngControl);

    const element = this._elementRef.nativeElement;
@@ -266,14 +275,13 @@ export class InputDirective extends _MatInputMixinBase implements MatFormFieldCo
    this._isTextarea = nodeName === 'textarea';

    if (this._isNativeSelect) {
-            this.controlType = (element as HTMLSelectElement).multiple ? 'mat-native-select-multiple' :
-                'mat-native-select';
+      this.controlType = (element as HTMLSelectElement).multiple ? 'mat-native-select-multiple' : 'mat-native-select';
    }
  }

  ngAfterViewInit(): void {
    if (this._platform.isBrowser) {
-            this._autofillMonitor.monitor(this._elementRef.nativeElement).subscribe(event => {
+      this._autofillMonitor.monitor(this._elementRef.nativeElement).subscribe((event) => {
        this.autofilled = event.isAutofilled;
        this.stateChanges.next();
      });
@@ -353,8 +361,7 @@ export class InputDirective extends _MatInputMixinBase implements MatFormFieldCo
    if (placeholder !== this._previousPlaceholder) {
      const element = this._elementRef.nativeElement;
      this._previousPlaceholder = placeholder;
-            placeholder ?
-                element.setAttribute('placeholder', placeholder) : element.removeAttribute('placeholder');
+      placeholder ? element.setAttribute('placeholder', placeholder) : element.removeAttribute('placeholder');
    }
  }

@@ -392,8 +399,7 @@ export class InputDirective extends _MatInputMixinBase implements MatFormFieldCo
   * @docs-private
   */
  get empty(): boolean {
-        return !this._isNeverEmpty() && !this._elementRef.nativeElement.value && !this._isBadInput() &&
-            !this.autofilled;
+    return !this._isNeverEmpty() && !this._elementRef.nativeElement.value && !this._isBadInput() && !this.autofilled;
  }

  /**
@@ -410,8 +416,12 @@ export class InputDirective extends _MatInputMixinBase implements MatFormFieldCo

      // On most browsers the `selectedIndex` will always be 0, however on IE and Edge it'll be
      // -1 if the `value` is set to something, that isn't in the list of options, at a later point.
-            return this.focused || selectElement.multiple || !this.empty ||
-                !!(selectElement.selectedIndex > -1 && firstOption && firstOption.label);
+      return (
+        this.focused ||
+        selectElement.multiple ||
+        !this.empty ||
+        !!(selectElement.selectedIndex > -1 && firstOption && firstOption.label)
+      );
    } else {
      return this.focused || !this.empty;
    }
--- a/console/src/app/modules/label/label.component.scss
+++ b/console/src/app/modules/label/label.component.scss
@@ -1,4 +1,4 @@
-@use '~@angular/material' as mat;
+@use '@angular/material' as mat;

@mixin cnsl-label-theme($theme) {
  $primary: map-get($theme, primary);
--- a/console/src/app/modules/onboarding/onboarding.component.scss
+++ b/console/src/app/modules/onboarding/onboarding.component.scss
@@ -1,4 +1,4 @@
-@use '~@angular/material' as mat;
+@use '@angular/material' as mat;

@mixin onboarding-theme($theme) {
  /* stylelint-disable */
--- a/console/src/app/modules/policies/private-labeling-policy/private-labeling-policy.component.scss
+++ b/console/src/app/modules/policies/private-labeling-policy/private-labeling-policy.component.scss
@@ -1,4 +1,4 @@
-@use '~@angular/material' as mat;
+@use '@angular/material' as mat;

@import './preview/preview.component.scss';

--- a/console/src/app/pages/users/user-detail/auth-user-detail/auth-factor-dialog/auth-factor-dialog.component.html
+++ b/console/src/app/pages/users/user-detail/auth-user-detail/auth-factor-dialog/auth-factor-dialog.component.html
@@ -29,7 +29,7 @@
    <p class="desc">{{'USER.MFA.OTP_DIALOG_DESCRIPTION' | translate}}</p>

    <div class="qrcode-wrapper">
-            <qrcode *ngIf="otpurl" class="qrcode" [qrdata]="otpurl" [width]="150" [errorCorrectionLevel]="'M'"></qrcode>
+      <qr-code *ngIf="otpurl" class="qrcode" [value]="otpurl" [size]="150" [errorCorrectionLevel]="'M'"></qr-code>
    </div>

    <cnsl-form-field class="formfield" label="Access Code" required="true">
--- a/console/src/app/pages/users/user-detail/auth-user-detail/auth-passwordless/dialog-passwordless/dialog-passwordless.component.html
+++ b/console/src/app/pages/users/user-detail/auth-user-detail/auth-passwordless/dialog-passwordless/dialog-passwordless.component.html
@@ -55,7 +55,8 @@
    <p>{{'USER.PASSWORDLESS.DIALOG.QRCODE_SCAN' | translate}}</p>

    <div class="qrcode-wrapper">
-      <qrcode *ngIf="qrcodeLink" class="qrcode" [qrdata]="qrcodeLink" [width]="150" [errorCorrectionLevel]="'M'"></qrcode>
+      <qr-code *ngIf="qrcodeLink" class="qrcode" [value]="qrcodeLink" [size]="150" [errorCorrectionLevel]="'M'">
+      </qr-code>
    </div>
  </div>

--- a/console/src/app/pages/users/user-detail/auth-user-detail/theme-setting/theme-card.scss
+++ b/console/src/app/pages/users/user-detail/auth-user-detail/theme-setting/theme-card.scss
@@ -1,4 +1,4 @@
-@use '~@angular/material' as mat;
+@use '@angular/material' as mat;

@mixin theme-card($theme) {
  /* stylelint-disable */
--- a/console/src/app/pages/users/user-detail/memberships/memberships.component.scss
+++ b/console/src/app/pages/users/user-detail/memberships/memberships.component.scss
@@ -1,4 +1,4 @@
-@use '~@angular/material' as mat;
+@use '@angular/material' as mat;

@mixin membership-theme($theme) {
  /* stylelint-disable */
--- a/console/src/app/pages/users/user-detail/user-detail.module.ts
+++ b/console/src/app/pages/users/user-detail/user-detail.module.ts
@@ -12,7 +12,7 @@ import { MatTableModule } from '@angular/material/table';
 import { MatTabsModule } from '@angular/material/tabs';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import { TranslateModule } from '@ngx-translate/core';
-import { QRCodeModule } from 'angularx-qrcode';
+import { QrCodeModule } from 'ng-qrcode';
 import { CopyToClipboardModule } from 'src/app/directives/copy-to-clipboard/copy-to-clipboard.module';
 import { HasRoleModule } from 'src/app/directives/has-role/has-role.module';
 import { MemberCreateDialogModule } from 'src/app/modules/add-member-dialog/member-create-dialog.module';
@@ -93,7 +93,7 @@ import { UserMfaComponent } from './user-detail/user-mfa/user-mfa.component';
    DetailFormMachineModule,
    WarnDialogModule,
    MatDialogModule,
-    QRCodeModule,
+    QrCodeModule,
    MetaLayoutModule,
    MatCheckboxModule,
    HasRolePipeModule,
--- a/console/src/polyfills.ts
+++ b/console/src/polyfills.ts
@@ -18,16 +18,6 @@
 * BROWSER POLYFILLS
 */

-/** IE10 and IE11 requires the following for NgClass support on SVG elements */
-// import 'classlist.js';  // Run `npm install --save classlist.js`.
-
-/**
- * Web Animations `@angular/platform-browser/animations`
- * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari.
- * Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0).
- */
-// import 'web-animations-js';  // Run `npm install --save web-animations-js`.
-
 /**
 * By default, zone.js will patch all possible macroTask and DomEvents
 * user can disable parts of macroTask/DomEvents patch by setting following flags
--- a/console/src/styles.scss
+++ b/console/src/styles.scss
@@ -1,7 +1,7 @@
-@use '~@angular/material' as mat;
+@use '@angular/material' as mat;

@import './component-themes';
-@import '~@angular/material/theming';
+@import '@angular/material/theming';

 // Plus imports for other components in your app.

--- a/console/src/styles/error.scss
+++ b/console/src/styles/error.scss
@@ -1,4 +1,4 @@
-@use '~@angular/material' as mat;
+@use '@angular/material' as mat;

@mixin cnsl-error-theme($theme) {
  $warn: map-get($theme, warn);
--- a/console/src/styles/input.scss
+++ b/console/src/styles/input.scss
@@ -1,4 +1,4 @@
-@use '~@angular/material' as mat;
+@use '@angular/material' as mat;

@mixin input-theme($theme) {
  /* stylelint-disable */
--- a/console/src/styles/link.scss
+++ b/console/src/styles/link.scss
@@ -1,4 +1,4 @@
-@use '~@angular/material' as mat;
+@use '@angular/material' as mat;

@mixin link-theme($theme) {
  /* stylelint-disable */
--- a/console/src/styles/sidenav-list.scss
+++ b/console/src/styles/sidenav-list.scss
@@ -1,4 +1,4 @@
-@use '~@angular/material' as mat;
+@use '@angular/material' as mat;

@mixin sidenav-list-theme($theme) {
  /* stylelint-disable */
--- a/console/src/styles/table.scss
+++ b/console/src/styles/table.scss
@@ -1,4 +1,4 @@
-@use '~@angular/material' as mat;
+@use '@angular/material' as mat;

@mixin table-theme($theme) {
  /* stylelint-disable */
--- a/console/src/test.ts
+++ b/console/src/test.ts
@@ -7,7 +7,9 @@ import { BrowserDynamicTestingModule, platformBrowserDynamicTesting } from '@ang
 declare const require: any;

 // First, initialize the Angular testing environment.
-getTestBed().initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting());
+getTestBed().initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting(), {
+    teardown: { destroyAfterEach: false }
+});
 // Then we find all the tests.
 const context = require.context('./', true, /\.spec\.ts$/);
 // And load the modules.