Currently, I am working on sharing a value between two components in Angular. The setup involves a ProjectView component that renders a ProjectViewBudget component as a "child" (created within a dynamic tab component using ComponentFactoryResolver) with the help of a service. The child component is responsible for modifying this shared value, while the parent component simply subscribes to it. Although I have only implemented the functionality in the child component to test its behavior, I encountered an error. Why did this error occur?

[ Service ]

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

@Injectable()
export class BudgetYearSelectionService {
    private yearSource = new BehaviorSubject(undefined);
    selectedYear = this.yearSource.asObservable();

    selectYear(year: number): void {
        this.yearSource.next(year);
    }
}

[ Child ]

...
import { BudgetYearSelectionService, ProjectPrintService } from 'app/modules/project/service';
import { Subscription } from 'rxjs';

@Component({
    selector: 'ain-project-view-budget',
    templateUrl: './budget.component.html',
    styleUrls: ['./budget.component.scss'],
    encapsulation: ViewEncapsulation.None,
    changeDetection: ChangeDetectionStrategy.OnPush
})
export class ProjectViewBudgetComponent implements OnInit, OnDestroy {

    years: Array<number>;
    year: number;

    private subscriptions: Array<Subscription> = [];

    constructor(
        private store: Store<any>,
        private ref: ChangeDetectorRef,
        private printService: ProjectPrintService,
        private budgetYearSelection: BudgetYearSelectionService
    ) { }

    ngOnInit(): void {
        ...
        this.subscriptions.push(this.budgetYearSelection.selectedYear.subscribe(year => this.year = year));
    }

    ngOnDestroy(): void {
        this.subscriptions.forEach(subscription => {
            subscription.unsubscribe();
        });
    }

    onYearChange(year?: number): void {
        this.budgetYearSelection.selectYear(year);
        this.component = year === undefined ? ProjectViewBudgetOverviewComponent : ProjectViewBudgetYearComponent;
    }
    ...
}

[ app.module.ts ]

import { registerLocaleData } from '@angular/common';
import { HttpClient, HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import localeNl from '@angular/common/locales/en-NL';
import localeNlExtra from '@angular/common/locales/extra/en-NL';
import { LOCALE_ID, NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { RouteReuseStrategy } from '@angular/router';
import { ServiceWorkerModule } from '@angular/service-worker';
import { EffectsModule } from '@ngrx/effects';
import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
import { PerfectScrollbarModule } from 'ngx-perfect-scrollbar';
import { environment } from '../environments/environment';
import { RoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { AppInterceptor } from './app.interceptor';
import { LayoutModule } from './layout';
import { MaterialModule } from './material';
import { AinModule } from './modules/ain.module';
import { NotificationModule } from './modules/notification/notification.module';
import { PermissionModule } from './modules/permission';
import { CustomRouteReuseStategy } from './modules/shared/custom-route-reuse.strategy';
import { OfflineComponent, PageNotFoundComponent } from './pages';
import { AppEffects } from './redux/app.effects';

export function createTranslateLoader(http: HttpClient): TranslateHttpLoader {
    return new TranslateHttpLoader(http, 'assets/i18n/', '.json');
}

registerLocaleData(localeNl, localeNlExtra);

@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        FormsModule,
        ReactiveFormsModule,
        MaterialModule,
        HttpClientModule,
        TranslateModule.forRoot({
            loader: {
                provide: TranslateLoader,
                useFactory: (createTranslateLoader),
                deps: [HttpClient]
            }
        }),
        EffectsModule.forFeature([AppEffects]),
        PerfectScrollbarModule,
        MaterialModule,
        AinModule,
        NotificationModule,
        PermissionModule.forFeature(),
        RoutingModule,
        LayoutModule,
        ServiceWorkerModule.register('ngsw-worker.js', { enabled: environment.production })
    ],
    declarations: [
        AppComponent,
        OfflineComponent,
        PageNotFoundComponent
    ],
    bootstrap: [AppComponent],
    providers: [
        { provide: HTTP_INTERCEPTORS, useClass: AppInterceptor, multi: true },
        { provide: LOCALE_ID, useValue: 'en-NL' },
        { provide: RouteReuseStrategy, useClass: CustomRouteReuseStategy }
    ]
})
export class AppModule {
}

[ Error ]

core.js:5873 ERROR NullInjectorError: R3InjectorError(AppModule)[BudgetYearSelectionService -> BudgetYearSelectionService -> BudgetYearSelectionService]: 
  NullInjectorError: No provider for BudgetYearSelectionService!

To implement this functionality, I referred to the fourth example outlined in this guide: