Skip to content

bug: Seems to be no way to pass an Angular lazy loaded components providers to another component via ModalController #30638

@pjc2007

Description

@pjc2007

Prerequisites

Ionic Framework Version

v8.x

Current Behavior

When using Modules, I could open another component in my lazy module using the ModalController, and it would have all providers from the lazy component available (as well as all root components).

However, now, I now get the error

Image

There in a minimal example here

If you open feature 1, then click the "Open Popup button, and look in the devtools console, we will see the error I am getting in my application

Image

I can't find any way to "pass" the providers to the popup when using the controller.

I did put the providers in a exported variable, and tried to add this the popup component's providers, but you will then see a differrent error..

`@Component({
selector: 'app-popup1',
templateUrl: './popup1.component.html',
styleUrls: ['./popup1.component.scss'],

// Does not work
//providers: feature1Providers,
})`

Expected Behavior

To be able to open a popup in lazy leaded feature module in s standalone project as I could previously in a modules based

Steps to Reproduce

  1. Goto https://stackblitz.com/~/github.com/pjc2007/modal-from-lazy-component
  2. Click the GO TO FEATUE 1 button
  3. Open devtools so can see any errors
  4. Click the OPEN popup button, and will see the error
    .webcontainer@runtime.96435430.js:26 Error opening popup: ɵNotFound: NG0201: No provider found for_Feature1Service1. Source: Environment

Code Reproduction URL

https://stackblitz.com/~/github.com/pjc2007/modal-from-lazy-component

Ionic Info

$ ionic info
[WARN] Error loading @capacitor/ios package.json: Error: Cannot find module '@capacitor/ios/package.json'

   Require stack:
   - C:\Users\Peter\AppData\Roaming\npm\node_modules\@ionic\cli\lib\project\index.js
   - C:\Users\Peter\AppData\Roaming\npm\node_modules\@ionic\cli\lib\index.js
   - C:\Users\Peter\AppData\Roaming\npm\node_modules\@ionic\cli\index.js
   - C:\Users\Peter\AppData\Roaming\npm\node_modules\@ionic\cli\bin\ionic

[WARN] Error loading @capacitor/android package.json: Error: Cannot find module '@capacitor/android/package.json'

   Require stack:
   - C:\Users\Peter\AppData\Roaming\npm\node_modules\@ionic\cli\lib\project\index.js
   - C:\Users\Peter\AppData\Roaming\npm\node_modules\@ionic\cli\lib\index.js
   - C:\Users\Peter\AppData\Roaming\npm\node_modules\@ionic\cli\index.js
   - C:\Users\Peter\AppData\Roaming\npm\node_modules\@ionic\cli\bin\ionic

Ionic:

Ionic CLI : 7.2.1 (C:\Users\Peter\AppData\Roaming\npm\node_modules@ionic\cli)
Ionic Framework : @ionic/angular 8.7.2
@angular-devkit/build-angular : 20.1.6
@angular-devkit/schematics : 20.1.6
@angular/cli : 20.1.6
@ionic/angular-toolkit : 12.3.0

Capacitor:

Capacitor CLI : 7.4.2
@capacitor/android : not installed
@capacitor/core : 7.4.2
@capacitor/ios : not installed

Utility:

cordova-res : not installed globally
native-run : 2.0.1

System:

NodeJS : v22.17.1 (C:\Program Files\nodejs\node.exe)
npm : 10.9.2
OS : Windows 10

(I am actually on Windows 11, not 10)

Additional Information

https://stackoverflow.com/questions/79736250/how-to-give-a-lazy-loaded-angular-standalone-components-providers-to-another-co

https://forum.ionicframework.com/t/how-to-provide-di-services-in-a-angular-stand-alone-component-that-is-created-via-a-lazy-loaded-component-that-uses-modelcontroller-create/248992

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions