I'm experimenting with dynamically importing modules in Angular 14 where the module paths are determined at runtime, but encountering the following error:
Error: Cannot find module 'src/app/plugin1/plugin1.module'
Manually specifying the import path works fine:
let module = await import("src/app/plugin1/plugin1.module").then(m => (m as any)[Object.keys(m)[0]]);
However, dynamic values pose a problem:
@Input() path: string;
...
let module = await import(this.path).then(m => (m as any)[Object.keys(m)[0]]);
The plugin module has been included in tsconfig, tsconfig.app.json:
{
"extends": "./tsconfig.json",
"compilerOptions": {
"outDir": "./out-tsc/app",
"types": [],
"module": "esnext"
},
"files": [
"src/main.ts",
"src/polyfills.ts"
],
"include": [
"src/**/*.d.ts",
"src/**/*.ts",
"src/app/plugin1/plugin1.module"
],
"exclude": [
"src/**/*.spec.ts",
"src/test.ts",
"src/environments/*"
]
}
tsconfig.json
{
"compileOnSave": false,
"compilerOptions": {...}
[...]
<hr />
<h1>Update</h1>
<p>In an attempt to make it work, I created this solution. However, since the strings must be explicitly typed out, they cannot be loaded through a loop. The entries are not added to any tsconfig files.</p>
<p>Any alternative solutions would be greatly appreciated.</p>
<pre><code>@Injectable({ providedIn: "root" })
export class ModuleLoaderService {
[...]
import { Component [...] from "@angular/core";
import { ModuleLoaderService } from "../services/module-loader.service";
@Component({...})
export class HeroLoaderTempComponent {...}