Dynamically Import Component From Variable (AngularJS)

Question

I'm trying to load a component based off of a variable but I get a "Uncaught Error: Template parse errors". How would I go about doing something like this?

<app-{{ this.plugin.component }}></app-{{ this.plugin.component }}>

Answer 1

I don't think that is possible to do it on template, but you certainly can do it on your controller/component try to do something like:

var scope = $rootScope.$new();
var element = angular.element('<app' + variable + '></app' + variable + '>');
element = $compile(element)(scope);

To print the element in your template you'll need to use $sce:

How do you use $sce.trustAsHtml(string) to replicate ng-bind-html-unsafe in Angular 1.2+

Answer 2

Have to add each path manually to the "app.module" but everything seems to operate by using child paths. Wish there was a way to more dynamically use components with the tags but this will work for what I'm doing now.

{
    path: 'mypath', 
    component: MyComponent,
    children: [
      {
        path: 'childpath',
        component: ChildComponent
      }
    ]
}