diff --git a/ui-ngx/src/app/modules/home/components/alias/aliases-entity-select.component.ts b/ui-ngx/src/app/modules/home/components/alias/aliases-entity-select.component.ts index ae6eeaadf9..ad7b3c6a11 100644 --- a/ui-ngx/src/app/modules/home/components/alias/aliases-entity-select.component.ts +++ b/ui-ngx/src/app/modules/home/components/alias/aliases-entity-select.component.ts @@ -14,14 +14,23 @@ /// limitations under the License. /// -import { Component, Input, OnDestroy, OnInit, ViewChild, ViewContainerRef } from '@angular/core'; +import { + Component, + Injector, + Input, + OnDestroy, + OnInit, + StaticProvider, + ViewChild, + ViewContainerRef +} from '@angular/core'; import { TooltipPosition } from '@angular/material/tooltip'; import { AliasInfo, IAliasController } from '@core/api/widget-api.models'; import { CdkOverlayOrigin, ConnectedPosition, Overlay, OverlayConfig, OverlayRef } from '@angular/cdk/overlay'; import { TranslateService } from '@ngx-translate/core'; import { Subscription } from 'rxjs'; import { BreakpointObserver } from '@angular/cdk/layout'; -import { ComponentPortal, PortalInjector } from '@angular/cdk/portal'; +import { ComponentPortal } from '@angular/cdk/portal'; import { ALIASES_ENTITY_SELECT_PANEL_DATA, AliasesEntitySelectPanelComponent, @@ -136,12 +145,12 @@ export class AliasesEntitySelectComponent implements OnInit, OnDestroy { overlayRef.attach(new ComponentPortal(AliasesEntitySelectPanelComponent, this.viewContainerRef, injector)); } - private _createAliasesEntitySelectPanelInjector(overlayRef: OverlayRef, data: AliasesEntitySelectPanelData): PortalInjector { - const injectionTokens = new WeakMap([ - [ALIASES_ENTITY_SELECT_PANEL_DATA, data], - [OverlayRef, overlayRef] - ]); - return new PortalInjector(this.viewContainerRef.injector, injectionTokens); + private _createAliasesEntitySelectPanelInjector(overlayRef: OverlayRef, data: AliasesEntitySelectPanelData): Injector { + const providers: StaticProvider[] = [ + {provide: ALIASES_ENTITY_SELECT_PANEL_DATA, useValue: data}, + {provide: OverlayRef, useValue: overlayRef} + ]; + return Injector.create({parent: this.viewContainerRef.injector, providers}); } private updateDisplayValue() { diff --git a/ui-ngx/src/app/modules/home/components/attribute/attribute-table.component.ts b/ui-ngx/src/app/modules/home/components/attribute/attribute-table.component.ts index 6ad889ef0e..6456e6d6ed 100644 --- a/ui-ngx/src/app/modules/home/components/attribute/attribute-table.component.ts +++ b/ui-ngx/src/app/modules/home/components/attribute/attribute-table.component.ts @@ -19,9 +19,11 @@ import { ChangeDetectionStrategy, Component, ElementRef, + Injector, Input, NgZone, OnInit, + StaticProvider, ViewChild, ViewContainerRef } from '@angular/core'; @@ -62,7 +64,7 @@ import { EditAttributeValuePanelComponent, EditAttributeValuePanelData } from './edit-attribute-value-panel.component'; -import { ComponentPortal, PortalInjector } from '@angular/cdk/portal'; +import { ComponentPortal } from '@angular/cdk/portal'; import { TelemetryWebsocketService } from '@core/ws/telemetry-websocket.service'; import { WidgetsBundle } from '@shared/models/widgets-bundle.model'; import { DataKey, Datasource, DatasourceType, Widget, widgetType } from '@shared/models/widget.models'; @@ -319,13 +321,19 @@ export class AttributeTableComponent extends PageComponent implements AfterViewI overlayRef.backdropClick().subscribe(() => { overlayRef.dispose(); }); - const injectionTokens = new WeakMap([ - [EDIT_ATTRIBUTE_VALUE_PANEL_DATA, { - attributeValue: attribute.value - } as EditAttributeValuePanelData], - [OverlayRef, overlayRef] - ]); - const injector = new PortalInjector(this.viewContainerRef.injector, injectionTokens); + const providers: StaticProvider[] = [ + { + provide: EDIT_ATTRIBUTE_VALUE_PANEL_DATA, + useValue: { + attributeValue: attribute.value + } as EditAttributeValuePanelData + }, + { + provide: OverlayRef, + useValue: overlayRef + } + ]; + const injector = Injector.create({parent: this.viewContainerRef.injector, providers}); const componentRef = overlayRef.attach(new ComponentPortal(EditAttributeValuePanelComponent, this.viewContainerRef, injector)); componentRef.onDestroy(() => { diff --git a/ui-ngx/src/app/modules/home/components/filter/filters-edit.component.ts b/ui-ngx/src/app/modules/home/components/filter/filters-edit.component.ts index e5023e624b..73d2954572 100644 --- a/ui-ngx/src/app/modules/home/components/filter/filters-edit.component.ts +++ b/ui-ngx/src/app/modules/home/components/filter/filters-edit.component.ts @@ -14,7 +14,16 @@ /// limitations under the License. /// -import { Component, Input, OnDestroy, OnInit, ViewChild, ViewContainerRef } from '@angular/core'; +import { + Component, + Injector, + Input, + OnDestroy, + OnInit, + StaticProvider, + ViewChild, + ViewContainerRef +} from '@angular/core'; import { TooltipPosition } from '@angular/material/tooltip'; import { IAliasController } from '@core/api/widget-api.models'; import { CdkOverlayOrigin, ConnectedPosition, Overlay, OverlayConfig, OverlayRef } from '@angular/cdk/overlay'; @@ -28,7 +37,7 @@ import { FiltersEditPanelComponent, FiltersEditPanelData } from '@home/components/filter/filters-edit-panel.component'; -import { ComponentPortal, PortalInjector } from '@angular/cdk/portal'; +import { ComponentPortal } from '@angular/cdk/portal'; import { UserFilterDialogComponent, UserFilterDialogData } from '@home/components/filter/user-filter-dialog.component'; import { MatDialog } from '@angular/material/dialog'; @@ -153,12 +162,12 @@ export class FiltersEditComponent implements OnInit, OnDestroy { } } - private _createFiltersEditPanelInjector(overlayRef: OverlayRef, data: FiltersEditPanelData): PortalInjector { - const injectionTokens = new WeakMap([ - [FILTER_EDIT_PANEL_DATA, data], - [OverlayRef, overlayRef] - ]); - return new PortalInjector(this.viewContainerRef.injector, injectionTokens); + private _createFiltersEditPanelInjector(overlayRef: OverlayRef, data: FiltersEditPanelData): Injector { + const providers: StaticProvider[] = [ + {provide: FILTER_EDIT_PANEL_DATA, useValue: data}, + {provide: OverlayRef, useValue: overlayRef} + ]; + return Injector.create({parent: this.viewContainerRef.injector, providers}); } private updateFiltersInfo() { diff --git a/ui-ngx/src/app/modules/home/components/widget/legend-config.component.ts b/ui-ngx/src/app/modules/home/components/widget/legend-config.component.ts index e16749191e..6072bf7eaf 100644 --- a/ui-ngx/src/app/modules/home/components/widget/legend-config.component.ts +++ b/ui-ngx/src/app/modules/home/components/widget/legend-config.component.ts @@ -14,11 +14,22 @@ /// limitations under the License. /// -import { Component, forwardRef, Inject, Input, OnDestroy, OnInit, ViewChild, ViewContainerRef } from '@angular/core'; +import { + Component, + forwardRef, + Inject, + Injector, + Input, + OnDestroy, + OnInit, + StaticProvider, + ViewChild, + ViewContainerRef +} from '@angular/core'; import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'; import { DOCUMENT } from '@angular/common'; import { CdkOverlayOrigin, ConnectedPosition, Overlay, OverlayConfig, OverlayRef } from '@angular/cdk/overlay'; -import { ComponentPortal, PortalInjector } from '@angular/cdk/portal'; +import { ComponentPortal } from '@angular/cdk/portal'; import { MediaBreakpoints } from '@shared/models/constants'; import { BreakpointObserver } from '@angular/cdk/layout'; import { WINDOW } from '@core/services/window.service'; @@ -140,12 +151,12 @@ export class LegendConfigComponent implements OnInit, OnDestroy, ControlValueAcc overlayRef.attach(new ComponentPortal(LegendConfigPanelComponent, this.viewContainerRef, injector)); } - private _createLegendConfigPanelInjector(overlayRef: OverlayRef, data: LegendConfigPanelData): PortalInjector { - const injectionTokens = new WeakMap([ - [LEGEND_CONFIG_PANEL_DATA, data], - [OverlayRef, overlayRef] - ]); - return new PortalInjector(this.viewContainerRef.injector, injectionTokens); + private _createLegendConfigPanelInjector(overlayRef: OverlayRef, data: LegendConfigPanelData): Injector { + const providers: StaticProvider[] = [ + {provide: LEGEND_CONFIG_PANEL_DATA, useValue: data}, + {provide: OverlayRef, useValue: overlayRef} + ]; + return Injector.create({parent: this.viewContainerRef.injector, providers}); } registerOnChange(fn: any): void { diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/alarms-table-widget.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/alarms-table-widget.component.ts index d5ba2aca5b..d58ace0a6b 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/alarms-table-widget.component.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/alarms-table-widget.component.ts @@ -19,9 +19,11 @@ import { Component, ElementRef, EventEmitter, + Injector, Input, NgZone, OnInit, + StaticProvider, ViewChild, ViewContainerRef } from '@angular/core'; @@ -64,7 +66,7 @@ import { widthStyle } from '@home/components/widget/lib/table-widget.models'; import { ConnectedPosition, Overlay, OverlayConfig, OverlayRef } from '@angular/cdk/overlay'; -import { ComponentPortal, PortalInjector } from '@angular/cdk/portal'; +import { ComponentPortal } from '@angular/cdk/portal'; import { DISPLAY_COLUMNS_PANEL_DATA, DisplayColumnsPanelComponent, @@ -452,20 +454,26 @@ export class AlarmsTableWidgetComponent extends PageComponent implements OnInit, }; }); - const injectionTokens = new WeakMap([ - [DISPLAY_COLUMNS_PANEL_DATA, { - columns, - columnsUpdated: (newColumns) => { - this.displayedColumns = newColumns.filter(column => column.display).map(column => column.def); - if (this.enableSelection) { - this.displayedColumns.unshift('select'); + const providers: StaticProvider[] = [ + { + provide: DISPLAY_COLUMNS_PANEL_DATA, + useValue: { + columns, + columnsUpdated: (newColumns) => { + this.displayedColumns = newColumns.filter(column => column.display).map(column => column.def); + if (this.enableSelection) { + this.displayedColumns.unshift('select'); + } + this.displayedColumns.push('actions'); } - this.displayedColumns.push('actions'); - } - } as DisplayColumnsPanelData], - [OverlayRef, overlayRef] - ]); - const injector = new PortalInjector(this.viewContainerRef.injector, injectionTokens); + } as DisplayColumnsPanelData + }, + { + provide: OverlayRef, + useValue: overlayRef + } + ]; + const injector = Injector.create({parent: this.viewContainerRef.injector, providers}); overlayRef.attach(new ComponentPortal(DisplayColumnsPanelComponent, this.viewContainerRef, injector)); this.ctx.detectChanges(); @@ -492,15 +500,21 @@ export class AlarmsTableWidgetComponent extends PageComponent implements OnInit, overlayRef.backdropClick().subscribe(() => { overlayRef.dispose(); }); - const injectionTokens = new WeakMap([ - [ALARM_FILTER_PANEL_DATA, { - statusList: this.pageLink.statusList, - severityList: this.pageLink.severityList, - typeList: this.pageLink.typeList - } as AlarmFilterPanelData], - [OverlayRef, overlayRef] - ]); - const injector = new PortalInjector(this.viewContainerRef.injector, injectionTokens); + const providers: StaticProvider[] = [ + { + provide: ALARM_FILTER_PANEL_DATA, + useValue: { + statusList: this.pageLink.statusList, + severityList: this.pageLink.severityList, + typeList: this.pageLink.typeList + } as AlarmFilterPanelData + }, + { + provide: OverlayRef, + useValue: overlayRef + } + ]; + const injector = Injector.create({parent: this.viewContainerRef.injector, providers}); const componentRef = overlayRef.attach(new ComponentPortal(AlarmFilterPanelComponent, this.viewContainerRef, injector)); componentRef.onDestroy(() => { diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/date-range-navigator/date-range-navigator.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/date-range-navigator/date-range-navigator.component.ts index 7edd0506b3..e3b51c61cb 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/date-range-navigator/date-range-navigator.component.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/date-range-navigator/date-range-navigator.component.ts @@ -18,9 +18,11 @@ import { Component, Inject, InjectionToken, + Injector, Input, OnDestroy, OnInit, + StaticProvider, ViewChild, ViewContainerRef, ViewEncapsulation @@ -41,7 +43,7 @@ import { import { KeyValue } from '@angular/common'; import * as _moment from 'moment'; import { ConnectedPosition, Overlay, OverlayConfig, OverlayRef } from '@angular/cdk/overlay'; -import { ComponentPortal, PortalInjector } from '@angular/cdk/portal'; +import { ComponentPortal } from '@angular/cdk/portal'; import { MatSelect } from '@angular/material/select'; import { Subscription } from 'rxjs'; import { HistoryWindowType, TimewindowType } from '@shared/models/time/time.models'; @@ -142,18 +144,24 @@ export class DateRangeNavigatorWidgetComponent extends PageComponent implements overlayRef.backdropClick().subscribe(() => { overlayRef.dispose(); }); - const injectionTokens = new WeakMap([ - [DATE_RANGE_NAVIGATOR_PANEL_DATA, { - model: cloneDateRangeNavigatorModel(this.advancedModel), - settings: this.settings, - onChange: model => { - this.advancedModel = model; - this.triggerChange(); - } - } as DateRangeNavigatorPanelData], - [OverlayRef, overlayRef] - ]); - const injector = new PortalInjector(this.viewContainerRef.injector, injectionTokens); + const providers: StaticProvider[] = [ + { + provide: DATE_RANGE_NAVIGATOR_PANEL_DATA, + useValue: { + model: cloneDateRangeNavigatorModel(this.advancedModel), + settings: this.settings, + onChange: model => { + this.advancedModel = model; + this.triggerChange(); + } + } as DateRangeNavigatorPanelData + }, + { + provide: OverlayRef, + useValue: overlayRef + } + ]; + const injector = Injector.create({parent: this.viewContainerRef.injector, providers}); overlayRef.attach(new ComponentPortal(DateRangeNavigatorPanelComponent, this.viewContainerRef, injector)); this.ctx.detectChanges(); diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/entities-table-widget.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/entities-table-widget.component.ts index f75f07ae69..25b036a467 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/entities-table-widget.component.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/entities-table-widget.component.ts @@ -18,9 +18,11 @@ import { AfterViewInit, Component, ElementRef, + Injector, Input, NgZone, OnInit, + StaticProvider, ViewChild, ViewContainerRef } from '@angular/core'; @@ -70,7 +72,7 @@ import { widthStyle } from '@home/components/widget/lib/table-widget.models'; import { ConnectedPosition, Overlay, OverlayConfig, OverlayRef } from '@angular/cdk/overlay'; -import { ComponentPortal, PortalInjector } from '@angular/cdk/portal'; +import { ComponentPortal } from '@angular/cdk/portal'; import { DISPLAY_COLUMNS_PANEL_DATA, DisplayColumnsPanelComponent, @@ -422,17 +424,23 @@ export class EntitiesTableWidgetComponent extends PageComponent implements OnIni }; }); - const injectionTokens = new WeakMap([ - [DISPLAY_COLUMNS_PANEL_DATA, { - columns, - columnsUpdated: (newColumns) => { - this.displayedColumns = newColumns.filter(column => column.display).map(column => column.def); - this.displayedColumns.push('actions'); - } - } as DisplayColumnsPanelData], - [OverlayRef, overlayRef] - ]); - const injector = new PortalInjector(this.viewContainerRef.injector, injectionTokens); + const providers: StaticProvider[] = [ + { + provide: DISPLAY_COLUMNS_PANEL_DATA, + useValue: { + columns, + columnsUpdated: (newColumns) => { + this.displayedColumns = newColumns.filter(column => column.display).map(column => column.def); + this.displayedColumns.push('actions'); + } + } as DisplayColumnsPanelData + }, + { + provide: OverlayRef, + useValue: overlayRef + } + ]; + const injector = Injector.create({parent: this.viewContainerRef.injector, providers}); overlayRef.attach(new ComponentPortal(DisplayColumnsPanelComponent, this.viewContainerRef, injector)); this.ctx.detectChanges(); diff --git a/ui-ngx/src/app/shared/components/dashboard-select.component.ts b/ui-ngx/src/app/shared/components/dashboard-select.component.ts index 7357a1aa5a..64a8eb42c1 100644 --- a/ui-ngx/src/app/shared/components/dashboard-select.component.ts +++ b/ui-ngx/src/app/shared/components/dashboard-select.component.ts @@ -14,7 +14,17 @@ /// limitations under the License. /// -import { Component, forwardRef, Inject, Input, OnInit, ViewChild, ViewContainerRef } from '@angular/core'; +import { + Component, + forwardRef, + Inject, + Injector, + Input, + OnInit, + StaticProvider, + ViewChild, + ViewContainerRef +} from '@angular/core'; import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'; import { Observable, of } from 'rxjs'; import { PageLink } from '@shared/models/page/page-link'; @@ -32,7 +42,7 @@ import { CdkOverlayOrigin, ConnectedPosition, Overlay, OverlayConfig, OverlayRef import { BreakpointObserver } from '@angular/cdk/layout'; import { DOCUMENT } from '@angular/common'; import { WINDOW } from '@core/services/window.service'; -import { ComponentPortal, PortalInjector } from '@angular/cdk/portal'; +import { ComponentPortal } from '@angular/cdk/portal'; import { DASHBOARD_SELECT_PANEL_DATA, DashboardSelectPanelComponent, @@ -186,12 +196,12 @@ export class DashboardSelectComponent implements ControlValueAccessor, OnInit { overlayRef.attach(new ComponentPortal(DashboardSelectPanelComponent, this.viewContainerRef, injector)); } - private _createDashboardSelectPanelInjector(overlayRef: OverlayRef, data: DashboardSelectPanelData): PortalInjector { - const injectionTokens = new WeakMap([ - [DASHBOARD_SELECT_PANEL_DATA, data], - [OverlayRef, overlayRef] - ]); - return new PortalInjector(this.viewContainerRef.injector, injectionTokens); + private _createDashboardSelectPanelInjector(overlayRef: OverlayRef, data: DashboardSelectPanelData): Injector { + const providers: StaticProvider[] = [ + {provide: DASHBOARD_SELECT_PANEL_DATA, useValue: data}, + {provide: OverlayRef, useValue: overlayRef} + ]; + return Injector.create({parent: this.viewContainerRef.injector, providers}); } private updateView() { diff --git a/ui-ngx/src/app/shared/components/time/timewindow.component.ts b/ui-ngx/src/app/shared/components/time/timewindow.component.ts index 6e61680b09..e1be42eff3 100644 --- a/ui-ngx/src/app/shared/components/time/timewindow.component.ts +++ b/ui-ngx/src/app/shared/components/time/timewindow.component.ts @@ -14,7 +14,18 @@ /// limitations under the License. /// -import { Component, forwardRef, Inject, Input, OnDestroy, OnInit, ViewChild, ViewContainerRef } from '@angular/core'; +import { + Component, + forwardRef, + Inject, + Injector, + Input, + OnDestroy, + OnInit, + StaticProvider, + ViewChild, + ViewContainerRef +} from '@angular/core'; import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'; import { TranslateService } from '@ngx-translate/core'; import { MillisecondsToTimeStringPipe } from '@shared/pipe/milliseconds-to-time-string.pipe'; @@ -32,7 +43,7 @@ import { TimewindowPanelComponent, TimewindowPanelData } from '@shared/components/time/timewindow-panel.component'; -import { ComponentPortal, PortalInjector } from '@angular/cdk/portal'; +import { ComponentPortal } from '@angular/cdk/portal'; import { MediaBreakpoints } from '@shared/models/constants'; import { BreakpointObserver } from '@angular/cdk/layout'; import { WINDOW } from '@core/services/window.service'; @@ -229,12 +240,12 @@ export class TimewindowComponent implements OnInit, OnDestroy, ControlValueAcces }); } - private _createTimewindowPanelInjector(overlayRef: OverlayRef, data: TimewindowPanelData): PortalInjector { - const injectionTokens = new WeakMap([ - [TIMEWINDOW_PANEL_DATA, data], - [OverlayRef, overlayRef] - ]); - return new PortalInjector(this.viewContainerRef.injector, injectionTokens); + private _createTimewindowPanelInjector(overlayRef: OverlayRef, data: TimewindowPanelData): Injector { + const providers: StaticProvider[] = [ + {provide: TIMEWINDOW_PANEL_DATA, useValue: data}, + {provide: OverlayRef, useValue: overlayRef} + ]; + return Injector.create({parent: this.viewContainerRef.injector, providers}); } registerOnChange(fn: any): void { diff --git a/ui-ngx/src/app/shared/components/toast.directive.ts b/ui-ngx/src/app/shared/components/toast.directive.ts index af4494338d..addecfb57a 100644 --- a/ui-ngx/src/app/shared/components/toast.directive.ts +++ b/ui-ngx/src/app/shared/components/toast.directive.ts @@ -20,9 +20,11 @@ import { Directive, ElementRef, HostBinding, Inject, + Injector, Input, NgZone, OnDestroy, Optional, + StaticProvider, ViewChild, ViewContainerRef } from '@angular/core'; @@ -34,7 +36,6 @@ import { BreakpointObserver } from '@angular/cdk/layout'; import { MediaBreakpoints } from '@shared/models/constants'; import { MatButton } from '@angular/material/button'; import Timeout = NodeJS.Timeout; -import { PortalInjector } from '@angular/cdk/portal'; @Directive({ selector: '[tb-toast]' @@ -138,10 +139,10 @@ export class ToastDirective implements AfterViewInit, OnDestroy { this.toastComponentRef.destroy(); } }; - const injectionTokens = new WeakMap([ - [MAT_SNACK_BAR_DATA, data] - ]); - const injector = new PortalInjector(this.viewContainerRef.injector, injectionTokens); + const providers: StaticProvider[] = [ + {provide: MAT_SNACK_BAR_DATA, useValue: data} + ]; + const injector = Injector.create({parent: this.viewContainerRef.injector, providers}); this.toastComponentRef = this.viewContainerRef.createComponent(componentFactory, 0, injector); this.cd.detectChanges();