CODEWITHSUNDEEP
angular
char m
char m

Reputation: 8336

How to extend angular service from a lib so that constructor parameter type defined in same lib is passed to it?

I'm trying to extend MultiWindowService service from https://www.npmjs.com/package/ngx-multi-window:

import { Injectable } from '@angular/core';
import { Location } from '@angular/common';
import { MultiWindowService, MultiWindowConfig, StorageService, WindowRef } from 'ngx-multi-window';
import { Router } from '@angular/router';
import { AuthService } from './auth.service';

@Injectable({
  providedIn: 'root'
})
export class MyMultiwindowService extends MultiWindowService{
  public myExtraThing: boolean;

  constructor(location: Location, storageService: StorageService, windowRef: WindowRef, router: Router, authService: AuthService, customConfig: MultiWindowConfig) { 
    super(customConfig, location, storageService, windowRef);
    // do some extra stuff
}

However the last parameter causes trouble when built --aot:

customConfig: MultiWindowConfig

Warning: Can't resolve all parameters for MyMultiwindowService in C:/dev/web/multiwindowproto/src/app/my-multiwindow.service.ts: ([object Object], [object Object], [object Object], [object Object], [object Object], ?).

In app.module i have:

// core etc imports omited
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { MapviewComponent } from './mapview/mapview.component';
import { ContentComponent } from './content/content.component';
import { ThreedeegraphicsComponent } from './threedeegraphics/threedeegraphics.component';

import { MultiWindowConfig, MultiWindowModule, WindowSaveStrategy, NGXMW_CONFIG } from 'ngx-multi-window';

const config: MultiWindowConfig = {windowSaveStrategy: WindowSaveStrategy.SAVE_WHEN_EMPTY};

@NgModule({
  declarations: [
    AppComponent,
    MapviewComponent,
    ContentComponent,
    ThreedeegraphicsComponent
  ],
  imports: [
    BrowserModule,
    FormsModule, ReactiveFormsModule,
    MultiWindowModule.forRoot(config),
    AppRoutingModule,

  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { 
}

So how can I define / provide the config to my extended service?

Upvotes: 0

Views: 173

Answers (1)

Chirag Patel
Chirag Patel

Reputation: 374

This is because MultiWindowConfig object has not been created. you need to have the MultiWindowConfig in your providers if it is @Injectable. If not you can create the object by using the factory model (https://angular.io/guide/dependency-injection-providers). First create a factory and provider for your class:

const MyMultiwindowServiceFactory = (location: Location, storageService: StorageService, windowRef: WindowRef, router: Router, authService: AuthService) => {
    const config: new MyMultiWindowConfig();
    return new MyMultiwindowService(location, storageService, windowRef, router, authService, config)
}

export let MyMultiwindowServiceProvider = {
   provide: MyMultiwindowService,
   useFactory: MyMultiwindowServiceFactory,
   deps: [Location, StorageService, WindowRef, Router, AuthService]
}

Then in your app.module.ts you will import the Provider and provide it:

import {MyMultiwindowServiceProvider } from './services/my-multi-window.service.ts'
    @NgModule({
  .....other code
  providers: [MyMultiwindowServiceProvider, ....other services],
  bootstrap: [AppComponent]
})

Now whenever you reference MyMultiwindowService the provider will provide a instance of the service with the config you set in the Factory.

Upvotes: 1

Related Questions