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!