How to provide DI services in a Angular stand alone component that is created via a lazy loaded component that uses ModelController.create

Ionic Framework Ionic Angular
1

Hi I am converting my modules bases Ionic/Angular application to standalone. I have a number of lazy loaded

components (previously modules), that have services “private” to that component, that is they are provided ion the lazy loaded components route rather than in root.

So I have code such as this in the lazy component..

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

And my “EditCompoent” has quite a few constructor injections…

constructor(
    private store: Store.
    private modalController: ModalController,
    private translate: TranslateService,
    private logger: Logger,
    private userMessageService: UserMessageService,
    ...

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 I didn’t’ get the error regarding the ngrx store, I would get the same for all other services that I provide in the component that is running the above modal.

I did try creati8ng a constant in the features routes file, e,g.

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, hopefully without having to manually write each out in the providers array?

I have a simple example of this setup here

2

My work around has been to get the injector from the main component.

protected environmentInjector = inject(EnvironmentInjector);

and then pass this in as a property on the modalController.create options object, and then in the popup component use it to get the services. I put an instance count in the service to assure it does not create another.

No where as neat as in the modules when it all just worked, but not sure what lese to do at this stage.