How to create dynamic template to compile dynamic component?


#1

I want to dynamically create a template.
I found a resolution that works with Angular 2.0, this resolution uses a JiT compiler.
Link to resolution in Angular 2.0

My question is, how to make dynamically created template using Ionic 2?
Can I use JiT compiler like in Angular 2.0?


#2

I would strongly suggest doing pretty much anything possible to avoid this. Production mode is going to cause you nightmares. I have yet to see a situation where this can’t be faked using a (potentially heterogeneous) array, a loop and switch. See this for an example.


#3

@rapropos Some time ago you gave me the same answer here: Clickable elements in text
Where it made perfectly sense.

But now I am facing a different situation where this approach turns out as a “problem” for me:
Think about a very modular app which has modules reused in other apps. Since my example would be rather complicated to explain, think about following example which will have the same problem:

Imagine some generic “feed” module (similar a facebook feed) and some other modules which cause “actions” which shall be displayed in the feed. You want to avoid specific implementations for other-module specific actions within the feed module, since it shall be used in several apps.

You now have 2 options:

  1. Make all the feed items look basically the same (sure you can play with some extra icons, css classes, etc. based on type somehow)
  2. Support individual feed items per action type. Each action type might require other elements to be displayed, different layouts, extra information and actions for sub-components within the feed entry.

If you can implement case 1, you are lucky. But with case 2 things get complicated. Ideally, you would register the types on the feed module when starting another module, and tell the feed module how to render each action. But without dynamic templates I think this is not posisble.

Unfortunately, I am now on case 2 and melting my brain looking for some generic solution.:cold_sweat:
So I consider dynamic templating as quite important in some cases. Any further ideas which could help here?


#4

Not really, I guess. I still think truly dynamic components are going to run into trouble with the AoT compiler, and that it’s better to think in terms of laying out a bunch of potential static building blocks in the template, and selecting which to use based on values in elements of a heterogeneous list.

Perhaps if you can think of factors that your “actions” may share in common and ways that various “feeds” can make use of them, something will shake loose. Best of luck.


#5

In Angular2 you can include components dynamically without a compiler, and without having a big if/then switch with all components (which I think is what your link suggests). This link gives the module which supports dynamic components.
However I have issues when trying to use Ionic components - the dynamically included components don’t seem to be able to access to Ionic directives.
https://www.npmjs.com/package/angular2-dynamic-component


#6

You can access Ionic components with that library like this:

import {IonicModule} from 'ionic-angular';
export class DynamicPage {
extraModules = [IonicModule];
}

Then in your template:

<template dynamic-component
          [componentModules]="extraModules"></template>

So far this doesn’t work with aot compiling for me, I have to use a dev build. However, the author says aot is possible: https://github.com/apoterenko/angular2-dynamic-component/issues/17


#7

I’m not sure, but that looks to me like it’s faking out the compiler and forcibly disabling AoT, not actually working with AoT.