Angular dynamic component loading through a config file

Question

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

Andrei · Accepted Answer · 2025-03-21 15:54:15Z

1

in all modern build tools static analysis for paths is almost essential. i.e. you can't import(randomString) (you can, but it is a hard and restrictive way and you probably shouldn't). but you can make a function with import and leverage it afterwards

routes: [
  {
    name: 'auth/logout',
    // this way bundler will handle the import correctly
    loadComponent: () => import('../../components/logout/logout.component').then(m => m.LogoutComponent),
  },
....
]

async loadDynamicComponent(route: { name: string, loadComponent: () => Promise<Type<unknown>> }) {
    this.container.createComponent(await route.loadComponent(), { injector: this.injector });
}

edited Mar 21 at 15:54

answered Mar 21 at 14:53

Andrei

12.8k1 gold badge16 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Damian Mar 22 at 8:40

So because of webpack I can't in any way loop through my config routes and create these imports dynamically in another file?

Andrei Mar 22 at 9:02

yes. it just won't see your imports unless there is a string with a path inside of import statement itself

Collectives™ on Stack Overflow

Angular dynamic component loading through a config file

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related