0

I am building an angular 7 application and dynamically creating components (form controls) at runtime depending on data type.

Following is an excerpt from my dynamically-loading-component.ts file enter image description here

this.componentRef.instance.form = this.form;
const dynamicComponent = this.componentRef.instance;

I am binding some functions to this dynamicComponent like below:

dynamicComponent.onKeyUp = function (value) {
            self.onValueChangeOfControl(dynamicComponent, value);
        };

In one of the control types for example, in number.component.html file, I have following code

<input type='number' [value]="metadata.Value" [name]="metadata.Name" [id]="metadata.Name"
  (keyup)="onKeyUp($event.target.value)">

Whenever a keyupevent occurs, it correctly calls the globally assigned dynamicComponent.onKeyUp function and everything works fine locally.

However, when I build this using ng build --prod it gives me below error - number\number.component.html(2,3): : Property 'onKeyUp' does not exist on type 'NumberComponent'.

Angular is expecting onKeyUp() definition in my number.components.ts file however, I have this bounded to dynamic component above. I don't want to write duplicate code in each and every control component file for such events.

What are the options to resolve this? ng build works fine but I need ng build --prod to work to get optimized bits to deploy.

Thoughts?

Deepak Agarwal
  • 458
  • 1
  • 4
  • 18
  • Please post code instead of images. And why are you using `onKeyUp` instead of `(keyUp)` eventemitter in your template file? If you have it in a parent component, have you set it up so that `NumberComponents` extends it? – Daniel B May 22 '19 at 12:01
  • This is not a parent-child relation case. I am trying to build a form dynamically based on data type of controls. (keyup) event is bound in individual control template as you see in my post. I can't paste the complete code as this is just a small part of entire application. You can refer several links on the approach which I used to create these dynamic components. For example https://netbasal.com/dynamically-creating-components-with-angular-a7346f4a982d – Deepak Agarwal May 22 '19 at 15:02
  • I'm not talking parent/child sructure wise, I'm referring to your component classes. What do you mean with "dynamic component above", it's very unclear. I've used dynamic component creation alot and I've never had this problem. The error clearly states `Property 'onKeyUp' does not exist on type 'NumberComponent'` so that is what you should look at. Does the component have that property or not? – Daniel B May 22 '19 at 15:16

1 Answers1

0

Have you tried specifying the dynamic components on the entryComponents section of the defining module? Refer to What is the difference between declarations and entryComponents

And from the Angular docs:

[...] if your app happens to bootstrap or dynamically load a component by type imperatively, you must add it to entryComponents explicitly.

Bruno Di Giuseppe
  • 83
  • 1
  • 1
  • 6