Error encountered resolving symbol values statically. Calling function 'CreateCustomComponent', function calls are not supported

Question

I am getting below error when creating my custom component.

Error encountered resolving symbol values statically. Calling function 'CreateCustomComponent', function calls are not supporte d. Consider replacing the function or lambda with a reference to an exported function, resolving symbol cus_input

my file like as below. Any one please give me a answer for below my code ?

export class MyComponent {   

constructor() {
   console.log("Component created");
}
}
export function CreateCustomComponent( componentArgs: {
selector: string,
inputs: Array<string>,
template: string 

 }): Type<any> {

let comp = Component(componentArgs);
return comp.Class({
    extends: MyComponent,
    constructor: []
});
}

export let cus_input :any = CreateCustomComponent({selector: 'cus-inp',inputs : ["myinput"],template : '<input [value]="myinput" />'})

export const MY_INP_Component: any = [cus_input];

Importing like as below in "app.modeule.ts"

 import { MY_INP_Component} from './customcomponent/core';

 import { AppComponent } from './app.component';


 @NgModule({
    imports: [BrowserModule, FormsModule, HttpModule,       RouterModule.forRoot(rootRouterConfig, { useHash: true })],
    declarations: [AppComponent, 
     MY_INP_Component
   ],
  bootstrap: [AppComponent],

   })
export class AppModule { }

Here why m creating component dynamically means i have set of jquery plugins for that m creating component dynamically and using these component inputs and outputs in jquery plugin.

Answer 1

I had this problem too after upgrading my CLI version. It has something to do with the AOT compiler.

You can fix this by exporting and wrapping your function in another function in your app module (must be app module), and then using the exported function like so:

export function doCreateCustomComponent(){
  return CreateCustomComponent(...);
}

@NgModule({ ... 
declarations: [doCreateCustomComponent], 
bootstrap: [doCreateCustomComponent]
... })
export class AppModule { }

(I've simplified your code slightly)