Dynamic import Webpack/Injects

Help Requests
1

Hey all,

I’ve an (maybe odd) question. We’re currently building a ‘report’ page for our application. The current situation is that all the reports are scattered all over the application on different places. Also the services that contains the generate functions of them, are in different Areas of the application.

We want to build a ‘central’ report page, that contains multiple reports of the different Areas. As we want it dynamic, we retrieve the different reports with a call from the back-end. Containing which report and also the function to generate it. So we get the Area, Service and Method dynamically with a string. Now I want to import the corresponding Service and call the Method when performing the ‘download’ action on those reports. I’ve tried to set up the webpack dynamic import, which seems to work fine. I get a dynamic chunk loaded in and I can call the method given by the reportload.

The issue now, is that the imported service, ofcourse also has imports in it. For example, in the service I import a Business Service with the call to the back-end to generate the report. I Inject this BS and use that inside the function there. Unfortunately the BS is still ‘undefined’ when using the dynamic import. Can someone help me any further or push me into a different direction? I looked into the Aurelia Dependency Injection and the registering part, but without luck at the moment.

Example method:

	startDownload() {
		const self = this;
		this.ReportIsGenerating = true;

		import('Areas/' + this.currentReport.Area + '/ReportService').then((e) => {
			const reportClass = new e.default(self.AppStorage);

			reportClass[this.currentReport.Method]()
				.then(() => {
					//Success
				}).finally(() => {
					self.ReportIsGenerating = false;
				});
		});
	}

Thanks in advance!