How to give a lazy loaded Angular standalone component's providers to another component that...

I have been converting my Module based Ionic/Angular project to standalone.

I Have a lazy load component, that then displays another component using Ionics ModalController

const modal = await this.modalController.create({
component: EditComponent,
backdropDismiss: false,
componentProps: {
data
fullScreen,
}
});


However now, when I go to open this, I get an error

ngrx/store: The feature name "myFeatureState" does not exist in the state, therefore createFeatureSelector cannot access it


I am sure if it is not this one, I would get the same for all other services that I provide in the component that is running the above model.

I did try creati8ng a constant in the features routes file, eg

export const featureProviders: Array<Provider | EnvironmentProviders> = [
}


This still works in the routes file

export const routes: Routes = [
{
path: '',
component: FeaturePage,
canDeactivate: [CanDeactivateGuard],
providers: featureProviders,
},


But if I import and use this constant in the component used in the popup like...

@Component({
selector: 'app--edit',
templateUrl: './edit.component.html',
styleUrls: ['./edit.component.scss'],
providers: featureProviders as Provider[],


I get the error

root_effect_scheduler.mjs:3583 ERROR ReferenceError: Cannot access 'featureProviders' before initialization
at Module.featureProviders (escape-key-handler.ts:45:3)
at 72538 (edit.component.ts:157:14)
at __webpack_require__ (bootstrap:19:1)
at 35959 (feature.reducer.ts:2004:2)
at __webpack_require__ (bootstrap:19:1)
at 4298 (edit.component.scss:114:1)
at __webpack_require__ (bootstrap:19:1)
at 18532 (helper.service.ts:260:2)
at __webpack_require__ (bootstrap:19:1)
at 58229 (escape-key-handler.ts:45:3)


So my question is how do I now pass/provide to this component used in the popup, hoepfully without having to manually write each out in the providers array?

Continue reading...