A challenge arises with the SecretService provided, as it is built using the UniversityModule's last imported module in the App Module. To update SecretService correctly with BaseService, both BaseService and SecretService must be provided in the university and school components like so in school.component.ts:
import { SchoolService } from './school.service'
import { BaseService } from '../shared/base.service'
import { SecretService } from '../shared/secret.service'
@Component({
selector: 'app-school',
template: `SchoolName :: <app-shared></app-shared>`,
providers: [
{ provide: BaseService, useClass: SchoolService },
SecretService]
})
export class SchoolComponent implements OnInit {
constructor() { }
ngOnInit() {
}
}
In university.component.ts:
import { UniversityService } from './university.service'
import { BaseService } from '../shared/base.service'
import { SecretService } from '../shared/secret.service'
@Component({
selector: 'app-university',
template: `UniversityName :: <app-shared></app-shared>`,
providers: [{ provide: BaseService, useClass: UniversityService },
SecretService]
})
export class UniversityComponent implements OnInit {
constructor() { }
ngOnInit() {
}
}
However, it may be more efficient to use BaseService directly in the shared component instead of wrapping it in SecretService.
Consider using BaseService directly in shared.component.ts:
import { Component, OnInit } from '@angular/core';
import { BaseService } from './base.service'
@Component({
selector: 'app-shared',
template: `{{name}}`
})
export class SharedComponent implements OnInit {
name: string
constructor(private ss: BaseService) {
this.name = ss.getName()
}
ngOnInit() {
}
}
By utilizing BaseService in this manner, the injection issue can be resolved without relying on SecretService as a workaround.