Angular, compile and create components at runtime

Question

I'm trying to make a document generation tool in angular and I'm hitting a challenge with how I would allow a user to dynamically create content.

My components I want to create could have arbitrary models and behavior so I don't think I could use a shared component.

The components I'm describing would not exist at compile time.

I see some documentation for rendering dynamic components. However it mentions that you must list the "dynamic" component in entryComponents in the ngModule. which will not work for my scenario.

Is there another mechanism to get this effect?

Max Koretskyi · Accepted Answer · 2017-10-05 04:48:21Z

17

You can create a module and a component on-the-fly, apply decorators to it and then compile it all. Then you will be able to access the compiled components:

@ViewChild('vc', {read: ViewContainerRef}) vc: ViewContainerRef;

constructor(private _compiler: Compiler,
            private _injector: Injector,
            private _m: NgModuleRef<any>) {
}

ngAfterViewInit() {
  const template = '<span>generated on the fly: {{name}}</span>';

  const tmpCmp = Component({template: template})(class {
  });
  const tmpModule = NgModule({declarations: [tmpCmp]})(class {
  });

  this._compiler.compileModuleAndAllComponentsAsync(tmpModule)
    .then((factories) => {
      const f = factories.componentFactories[0];
      const cmpRef = f.create(this._injector, [], null, this._m);
      cmpRef.instance.name = 'dynamic';
      this.vc.insert(cmpRef.hostView);
    })
}

For this approach to work you need to bring compiler to the runtime. For more details on dynamic components read the article:

Here is what you need to know about dynamic components in Angular

answered Oct 5, 2017 at 4:48

Max Koretskyi

106k69 gold badges356 silver badges524 bronze badges

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

9 Comments

user5328504 Over a year ago

Hi. Thanks for the info. Do you happen to know how will this change for angular 8/ivy ? I beliave you now can have both AOT for your core and JIT for code generated on the fly

Max Koretskyi Over a year ago

@user5328504, it's still unclear. We need to wait a little for this information until Ivy is released

Jan B. Over a year ago

In Angular8 I do get the error message "Error: Runtime Compiler not loaded", when calling compileModuleAndAllComponentsAsync in your code. Any clue?

mvermand Over a year ago

@MaxKoretskyi, now Ivy is here, is it possible to give a direction on the question of @user5328504?

Max Koretskyi Over a year ago

@U.P, haven't explored that yet, I will at some point

|

Piotr B. · Accepted Answer · 2022-04-20 14:29:49Z

2

I find out solution that works with Angular 13, and want to share with you.

const importedFile = await import('pathToModule');
const module: NgModuleRef<E> = createNgModuleRef<E>(importedFile[moduleClassName], this._injector);
this.containerRef.createComponent(importedFile[componentClassName], { ngModuleRef: module });

In Angular 13 the Compiler is depracated. The entire compilation process is done under the hood, even if we dynamically import some module/component.

My solution require add an export with component we want to create in the imported module file.

export * from './containers/container.component';

**Instead of importing file you can create component and modules on the fly (like example above) but instead of compiler use just createNgModuleRef and createComponent functions **

answered Apr 20, 2022 at 14:29

Piotr B.

211 bronze badge

2 Comments

Kobi Hari Over a year ago

Piotr, this is very interesting, can you expand on how to dynamically create component from a template string?

Shikhar Ambashta Over a year ago

While creating component on fly, can implements "OnInit, AfterViewInit" be added?

Collectives™ on Stack Overflow

Angular, compile and create components at runtime

2 Answers 2

9 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

9 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related