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

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?

1 post - 1 participant

Read full topic