Angular Individual Service Injection - Decouple bootstrap service (#1457)

* change services to be individually injected into angular

* messing around with injection

* change angular bootstrapping to factory style

* formatting

* formatting

* fix imports

* fix build errors

* fix testsw

* fix tests

* fix compile errors
This commit is contained in:
Anthony Dresser
2018-05-23 16:51:02 -07:00
committed by GitHub
parent cd0f9b71c5
commit 1359354387
68 changed files with 1011 additions and 1116 deletions

View File

@@ -21,10 +21,11 @@ import * as types from 'vs/base/common/types';
import { QueryResultsInput } from 'sql/parts/query/common/queryResultsInput';
import { IQueryModelService } from 'sql/parts/query/execution/queryModel';
import { IBootstrapService } from 'sql/services/bootstrap/bootstrapService';
import { QueryComponentParams } from 'sql/services/bootstrap/bootstrapParams';
import { bootstrapAngular } from 'sql/services/bootstrap/bootstrapService';
import { IQueryComponentParams } from 'sql/services/bootstrap/bootstrapParams';
import { QueryOutputModule } from 'sql/parts/query/views/queryOutput.module';
import { QUERY_OUTPUT_SELECTOR } from 'sql/parts/query/views/queryOutput.component';
import { IInstantiationService } from 'vs/platform/instantiation/common/instantiation';
export const RESULTS_GRID_DEFAULTS = {
cellPadding: [6, 10, 5],
@@ -99,8 +100,8 @@ export class QueryResultsEditor extends BaseEditor {
@ITelemetryService telemetryService: ITelemetryService,
@IThemeService themeService: IThemeService,
@IQueryModelService private _queryModelService: IQueryModelService,
@IBootstrapService private _bootstrapService: IBootstrapService,
@IConfigurationService private _configurationService: IConfigurationService
@IConfigurationService private _configurationService: IConfigurationService,
@IInstantiationService private _instantiationService: IInstantiationService
) {
super(QueryResultsEditor.ID, telemetryService, themeService);
this._rawOptions = BareResultsGridInfo.createFromRawSettings(this._configurationService.getValue('resultsGrid'), getZoomLevel());
@@ -168,8 +169,8 @@ export class QueryResultsEditor extends BaseEditor {
// Note: pass in input so on disposal this is cleaned up.
// Otherwise many components will be left around and be subscribed
// to events from the backing data service
let params: QueryComponentParams = { dataService: dataService };
this._bootstrapService.bootstrap(
let params: IQueryComponentParams = { dataService: dataService };
this._instantiationService.invokeFunction(bootstrapAngular,
QueryOutputModule,
this.getContainer().getHTMLElement(),
QUERY_OUTPUT_SELECTOR,

View File

@@ -12,8 +12,8 @@ import 'vs/css!sql/parts/grid/media/slick.grid';
import 'vs/css!sql/parts/grid/media/slickGrid';
import { ElementRef, ChangeDetectorRef, OnInit, OnDestroy, Component, Inject, forwardRef, ViewChild } from '@angular/core';
import { IBootstrapService, BOOTSTRAP_SERVICE_ID } from 'sql/services/bootstrap/bootstrapService';
import { QueryComponentParams } from 'sql/services/bootstrap/bootstrapParams';
import { IBootstrapParams } from 'sql/services/bootstrap/bootstrapService';
import { IQueryComponentParams } from 'sql/services/bootstrap/bootstrapParams';
import { QueryComponent } from 'sql/parts/grid/views/query/query.component';
import { QueryPlanComponent } from 'sql/parts/queryPlan/queryPlan.component';
import { TopOperationsComponent } from 'sql/parts/queryPlan/topOperations.component';
@@ -61,16 +61,13 @@ export class QueryOutputComponent implements OnDestroy {
showTabsWhenOne: false
};
public queryParameters: QueryComponentParams;
private _disposables: Array<IDisposable> = [];
constructor(
@Inject(forwardRef(() => ElementRef)) el: ElementRef,
@Inject(forwardRef(() => ChangeDetectorRef)) private _cd: ChangeDetectorRef,
@Inject(BOOTSTRAP_SERVICE_ID) bootstrapService: IBootstrapService
@Inject(IBootstrapParams) public queryParameters: IQueryComponentParams
) {
this.queryParameters = bootstrapService.getBootstrapParams(el.nativeElement.tagName);
}
/**

View File

@@ -4,7 +4,7 @@
*--------------------------------------------------------------------------------------------*/
import { ApplicationRef, ComponentFactoryResolver, forwardRef, NgModule, Inject } from '@angular/core';
import { ApplicationRef, ComponentFactoryResolver, forwardRef, NgModule, Inject, Type } from '@angular/core';
import { CommonModule } from '@angular/common';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
@@ -13,7 +13,7 @@ import { ChartsModule } from 'ng2-charts/ng2-charts';
const BrowserAnimationsModule = (<any>require.__$__nodeRequire('@angular/platform-browser/animations')).BrowserAnimationsModule;
import { IBootstrapService, BOOTSTRAP_SERVICE_ID } from 'sql/services/bootstrap/bootstrapService';
import { IBootstrapParams } from 'sql/services/bootstrap/bootstrapService';
import { Extensions, IInsightRegistry } from 'sql/platform/dashboard/common/insightRegistry';
import { Registry } from 'vs/platform/registry/common/platform';
@@ -41,42 +41,48 @@ let baseComponents = [QueryComponent, ComponentHostDirective, QueryOutputCompone
/* Insights */
let insightComponents = Registry.as<IInsightRegistry>(Extensions.InsightContribution).getAllCtors();
@NgModule({
imports: [
CommonModule,
BrowserModule,
FormsModule,
BrowserAnimationsModule,
ChartsModule,
PanelModule
],
declarations: [
...baseComponents,
...insightComponents,
SlickGrid,
ScrollDirective,
MouseDownDirective,
Checkbox,
SelectBox,
InputBox
],
entryComponents: [
QueryOutputComponent,
...insightComponents
]
})
export class QueryOutputModule {
export const QueryOutputModule = (params: IBootstrapParams, selector: string): Type<any> => {
constructor(
@Inject(forwardRef(() => ComponentFactoryResolver)) private _resolver: ComponentFactoryResolver,
@Inject(BOOTSTRAP_SERVICE_ID) private _bootstrapService: IBootstrapService
) {
@NgModule({
imports: [
CommonModule,
BrowserModule,
FormsModule,
BrowserAnimationsModule,
ChartsModule,
PanelModule
],
declarations: [
...baseComponents,
...insightComponents,
SlickGrid,
ScrollDirective,
MouseDownDirective,
Checkbox,
SelectBox,
InputBox
],
entryComponents: [
QueryOutputComponent,
...insightComponents
],
providers: [
{ provide: IBootstrapParams, useValue: params }
]
})
class ModuleClass {
constructor(
@Inject(forwardRef(() => ComponentFactoryResolver)) private _resolver: ComponentFactoryResolver
) {
}
ngDoBootstrap(appRef: ApplicationRef) {
const factory = this._resolver.resolveComponentFactory(QueryOutputComponent);
(<any>factory).factory.selector = selector;
appRef.bootstrap(factory);
}
}
ngDoBootstrap(appRef: ApplicationRef) {
const factory = this._resolver.resolveComponentFactory(QueryOutputComponent);
const uniqueSelector: string = this._bootstrapService.getUniqueSelector(QUERY_OUTPUT_SELECTOR);
(<any>factory).factory.selector = uniqueSelector;
appRef.bootstrap(factory);
}
}
return ModuleClass;
};