Angular dynamic component loading through a config file

I have a question about angular dynamic component loading through an environment config file.

Below is a sample of my environment file:

routes: [
{
name: 'auth/logout',
path: '../../components/logout/logout.component',
class: 'LogoutComponent',
},
{
name: 'base/home',
path: '../../components/home/home.component',
class: 'LogoutComponent',
}
]


and in my app.component.ts:

...
@ViewChild('dynamicComponentContainerPage', { read: ViewContainerRef, static: true }) container!: ViewContainerRef;

constructor(private injector: Injector) { }

ngOnInit(): void {
this.loadThemeComponent(routeFromBackend);
}

async loadDynamicComponent(route: { name: string, path: string, class: string }) {
this.container.createComponent(import(route.path).then(m => m[route.class]), { injector: this.injector });
}
...



The error I am getting is: ERROR TypeError: Failed to fetch dynamically imported module: http://localhost:4200/page404/page404.component?import

Thank you for your time, Damian

Continue reading...