Merge pull request #3113 from Akshat55/modal-enviornment-injector

fix: pass EnvironmentInjector to provide current module services to modals

Author: Akshat55

src/modal/base-modal.service.ts

@@ -1,7 +1,9 @@
 import {
 	ComponentRef,
 	Injector,
-	Injectable
+	Injectable,
+	inject,
+	EnvironmentInjector
 } from "@angular/core";
 import { PlaceholderService } from "carbon-components-angular/placeholder";
 import { tap, delay } from "rxjs/operators";
@@ -16,6 +18,23 @@ export class BaseModalService {
 	// track all our open modals
 	protected static modalList: Array<ComponentRef<any>> = [];
 
+	/**
+	 * Current module/component injection enviornment
+	 * Allows modules to use providers from calling component
+	 *
+	 * Root Module/
+	 * └── Lazy loaded Feature Module/
+	 * 	 ├── Provides Service & imports modules
+	 * 	 ├── Modal component (component that extends base component)
+	 * 	 └── Modal component launcher (dynamically creates modal component)
+	 *
+	 * Passing EnvironmentInjector in `createComponent` will look for provider declaration in feature
+	 * module instead of root module. This is required to pass correct context in a lazy-loaded applications.
+	 * Services injected in root, will also be available as feature module enviornment will also hierarchically inherit
+	 * the root services.
+	 */
+	protected environment: EnvironmentInjector = inject(EnvironmentInjector);
+
 	/**
 	 * Creates an instance of `ModalService`.
 	 */
@@ -34,7 +53,12 @@ export class BaseModalService {
 			useValue: data.inputs[inputName]
 		}));
 		const injector = Injector.create({ providers: inputProviders });
-		const component = this.placeholderService.createComponent(data.component, injector);
+		const component = this.placeholderService.createComponent(
+			data.component,
+			injector,
+			undefined,
+			this.environment
+		);
 		let focusedElement = document.activeElement as HTMLElement;
 		setTimeout(() => {
 			component.instance.open = true;

src/placeholder/placeholder.service.ts

@@ -1,7 +1,9 @@
 import {
 	ComponentRef,
 	ViewContainerRef,
-	Injector
+	Injector,
+	EnvironmentInjector,
+	inject
 } from "@angular/core";
 import { Injectable } from "@angular/core";
 
@@ -33,7 +35,12 @@ export class PlaceholderService {
 	/**
 	 * Creates and returns component in the view.
 	 */
-	createComponent(component: ComponentRef<any>, injector: Injector, id?: any): ComponentRef<any> {
+	createComponent(
+		component: ComponentRef<any>,
+		injector: Injector,
+		id?: any,
+		environment: EnvironmentInjector = undefined
+	): ComponentRef<any> {
 		if (id) {
 			if (!this.viewContainerMap.has(id)) {
 				console.error(`No view container with id ${id} found`);
@@ -45,7 +52,13 @@ export class PlaceholderService {
 			console.error("No view container defined! Likely due to a missing `cds-placeholder`");
 			return;
 		}
-		return this.viewContainerRef.createComponent(component as any, { index: this.viewContainerRef.length, injector });
+		return this.viewContainerRef.createComponent(component as any,
+			{
+				index: this.viewContainerRef.length,
+				injector,
+				environmentInjector: environment
+			}
+		);
 	}
 
 	destroyComponent(component: ComponentRef<any>) {