Angular how to provide and overwrite a service with "useClass"?

146 Views Asked by At

I have problems to "overwrite" a service with provide: ... useClass: ....

There is a component EditComponent that uses a service SettingsService. See below:

@Injectable( {
    providedIn: 'root',
})
export class SettingsService {
    public test: boolean = false;
}


@Component({
    selector: 'edit-reminders',
    templateUrl: './edit-reminders.component.html',
})
export class EditComponent implements OnInit {
    //
    constructor ( private settingsService: SettingsService ) {
        console.log( '-----', this.settingsService )
    }
}

The component is registered and exported in a module in a pretty simple way, like this:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { EditComponent } from './edit.component';

@NgModule({
    imports: [
        CommonModule,
        FormsModule
    ],
    declarations: [EditComponent],
    exports: [EditComponent]
})
export class EditModule {}

This EditModule module is now lazy loaded in a module (ViewModule) like:

const routes: Routes = [
    {
        path: '',
        component: ViewComponent,
        children: [
            {
                path: 'edit',
                loadChildren: () => import( '@app/edit.module' ).then( m => m.EditModule ),
            }
    }
]

So far everything works fine. But what I would need now is to "overwrite" the SettingsService with a different class. Therefore I tried to define in the ViewModule, something like

@Injectable( {
    providedIn: 'root',
})
export class NewSettingsService {
    public test: boolean = true;
}


@NgModule({
    imports: [CommonModule],
    declarations: [ViewComponent],
    providers: [{ provide: SettingsService, useClass: NewSettingsService }],
})
export class ViewModule {}

But this doesn't work. I don't get any error messages but the NewSettingsService is not used in the EditModule. Please can somebody tell me what I'm doing wrong and how I can achieve that the NewSettingsService is applied in the EditModule?

Thnak you!

0

There are 0 best solutions below