How to read dynamically external templates in Angular 5

Question

Greetings to the community

Normally in Angular 5, I have the following format from @Component when I use an external template, it works ok

@Component({
selector: 'app-home',
templateUrl: '../tpl/default/home.html',
styleUrls: ['./home.component.css']
})

I am needing that, according to data obtained from an api, the name of the folders where I look for the html, are dynamic

I have tried several ways to pass the route dynamically, but it always returns the following error:

Failed to compile. ./src/app/home/home.component.ts Module not found: Error: Can't resolve './{{template}}' in 'C:\angular\src\app\home'

Is there any way to solve this?

Thanks for the help

Answer 1

You can't update code dynamically to load new template in angular, because of angular AOT compilation.

Resolving your issue: You can create dynamic components for each view and an base controller which contains logic for each view. Your base controller can be extended by each components controller individually. So now your components can have their logic as well as base controller logic. Use angular routing to change the view dynamically at run time.