Ngx-formly: Error during template compile of 'module'. Function calls are not supported in decorators but 'FormlyModule' was called.

[danielmhair]

I'm submitting a ... (check one with "x")

[x] bug report => The issues that are similiar talk about aot compilation issues, but we don't have aot set to true
[ ] feature request
[ ] support request

Current behavior
My team has a build process that will run @angular/compiler-cli/src/main.js --project src/tsconfig.app.json. Keep in mind that running this has been working for us until I updated to Angular 6. The error we receive seems to be from the FormlyModule, because it started failing once I updated @ngx-formly/core from 2.x.x to 4.4.4 since I am using Angular 6. Also, note that I have tried to use every 4.x version (4.0.0, 4.0.1, 4.0.2, 4.0.3, 4.1.0, 4.4.2, 4.4.4, etc). I am receiving the following error:

Error during template compile of 'FormViewerDefaultsModule'
  Function calls are not supported in decorators but 'FormlyModule' was called.

In further investigation, it looks like it gives the error when I call forRoot on the FormlyModule. Here is the module that its failing on:

import { CommonModule } from "@angular/common"
import { NgModule } from "@angular/core"
import { FormsModule, ReactiveFormsModule } from "@angular/forms"
import { FormlyModule } from "@ngx-formly/core"
import { TranslateModule } from "@ngx-translate/core"
...
import { DEFAULT_FORMLY_CONFIG, DEFAULT_VIEWER_CONFIG, FIELD_TYPE_COMPONENTS } from "./form-viewer-defaults.config"

@NgModule({
  declarations: FIELD_TYPE_COMPONENTS,
  exports: [
    ...,
    FormlyModule,
  ],
  imports: [
    CommonModule,
    FormsModule,
    ...,
    ReactiveFormsModule,
    FormlyModule.forRoot(DEFAULT_FORMLY_CONFIG),
  ],
  providers: [
    LineItemService,
  ],
})
export class FormViewerDefaultsModule {}

Notice that I call forRoot. This is when I receive the error above. However, when I remove the forRoot like below, it works:

  imports: [
    ...,
    FormlyModule,
  ],

Expected behavior
I need to pass in the config, for obvious reasons.

Minimal reproduction of the problem with instructions
Due to the fact that this is a compiler issue, I can't use stackblitz. Running ng serve works perfectly, so stackblitz isn't useful. I'm hoping what I have posted is enough for get some help.

Please tell us about your environment:

• Windows 10
• Yarn 1.7.0
• Angular 6.0.4
• @angular/compiler-cli 6.0.4
• TypeScript 2.7.2
• Node 8.11.2

Any ideas on what this could be?

[aitboudad]

does it work without passing DEFAULT_FORMLY_CONFIG ?

FormlyModule.forRoot(),

[danielmhair]

Sadly, it does not work with:

FormlyModule.forRoot()

[aitboudad]

it's difficult to guess what's going wrong :(, can provide me a simple repo where I can reproduce the issue. thanks!

[danielmhair]

Okay, I will try to create a simple-repo. I'm also updating my code to use Angular 6's CLI instead of a manual way of calling @angular/compiler-cli/src/main.js. Once I update the code and see that this error still occurs, then I will make a simple repo. Will keep you posted.

[aitboudad]

feel free to reopen if the problem persist with CLI.

[danielmhair]

@aitboudad this problem is persisting on my end. But I now have researched enough. Here is what I have found:
The most insightful is the issue:
https://github.com/angular/angular/issues/23609#issuecomment-385505984

Showing that many are receiving this error:
https://github.com/dherges/ng-packagr/issues?q=is%3Aissue+function+calls+is%3Aopen

I'm curious what your thoughts are? It seems like its an angular bug.

[danielmhair]

I'm not sure if your end has an issue like this one, but I'm investigating this as a possibility
https://github.com/dherges/ng-packagr/issues/382#issuecomment-385543892

[aitboudad]

can you try exporting FORMLY_CONFIG_TOKEN from this lib to see if it can solve the issue

[danielmhair]

I assume you mean to add it to exports in FormlyModule? I have tried that and same issue occurred.

Also, I tried adding FORMLY_CONFIG_TOKEN to exports in my-lib module too. Same error.

[danielmhair]

@aitboudad I realized that I was mistaken -- you were meaning to export that TOKEN in my index file where ng-packagr picks it up. I am trying that now

[danielmhair]

So I tried this in the lib/index.ts, and it failed:

export * from "./common/index"
...
export * from "./defaults-material.module"
export { FORMLY_CONFIG_TOKEN } from "@ngx-formly/core/lib/services/formly.config"

[aitboudad]

the only option you've right now is to remove angularCompilerOptions in your tsconfig basically it should work

[danielmhair]

So what I did to resolve this was to move all the services and tokens that were in the forRoot and add them to the module that was failing like so:

providers: [
    // TODO: Angular throws the following error when we call FormlyModule.forRoot(DEFAULT_FORMLY_CONFIG) in the imports:
    // Error during template compile of 'FormViewerDefaultsModule'
    //   Function calls are not supported in decorators but 'FormlyModule' was called.
    // Generally this occurs when you call forRoot and the forRoot method provides an InjectionToken
    // (such as the FORM_CONFIG_TOKEN below)
    // In order to bypass this bug until Angular fixes it, we are adding the providers from the forRoot method below:
    // For more info, see https://github.com/angular/angular/issues/23609
    // and https://github.com/formly-js/ngx-formly/issues/996
    // START OF TEMPORARY FIX FOR FormlyModule
    FormlyFormBuilder,
    FormlyFormExpression,
    FormlyConfig,
    {
      multi: true,
      provide: FORMLY_CONFIG_TOKEN,
      useValue: { types: [{ name: "formly-group", component: FormlyGroup }] },
    },
    { provide: FORMLY_CONFIG_TOKEN, useValue: DEFAULT_FORMLY_CONFIG, multi: true },
    { provide: ANALYZE_FOR_ENTRY_COMPONENTS, useValue: DEFAULT_FORMLY_CONFIG, multi: true },
    // END OF TEMPORARY FIX for FormlyModule
]

I know that this is a really bad solution and is only temporary until the angular issue is fixed, but it will at least allow me to move on while having the compiler tell me the errors from Angular.

[danielmhair]

@aitboudad I'm now having issues with importing these needed files (as my temporary fix). I would love to just remove angularCompilerOptions, but that would not go well, seeing as those are vital to catching bad code in our project.

Note, this only occurs when running ng test my-lib. ng build my-lib works fine. The spec files do `import { ... } from "my-lib"

Here's the imports that it's not liking

import { FormlyGroup } from "@ngx-formly/core/lib/components/formly.group"
import { FORMLY_CONFIG_TOKEN, FormlyConfig } from "@ngx-formly/core/lib/services/formly.config"
import { FormlyFormBuilder } from "@ngx-formly/core/lib/services/formly.form.builder"
import { FormlyFormExpression } from "@ngx-formly/core/lib/services/formly.form.expression"

Here is the error:

ERROR in ./dist/my-lib/fesm5/my-lib-defaults.js
Module not found: Error: Can't resolve '...\my-lib\node_modules\@ngx-formly\core\lib\components\formly.group' in '...\dist\my-lib\fesm5'
 @ ./dist/my-lib/fesm5/my-lib-defaults.js 20:0-75 3139:56-67
 @ ./my-lib/src/lib/form-viewer/services/hide-expression-generator/hide-expression-generator.spec.ts
 @ ./my-lib/src sync \.(spec|stubs)\.ts$
 @ ./my-lib/src/test.ts

ERROR in ./dist/my-lib/fesm5/my-lib-defaults.js
Module not found: Error: Can't resolve '...\my-lib\node_modules\@ngx-formly\core\lib\services\formly.config' in '...\dist\my-lib\fesm5'
 @ ./dist/my-lib/fesm5/my-lib-defaults.js 21:0-96 3167:24-36 3170:37-56 3173:35-54
 @ ./my-lib/src/lib/form-viewer/services/hide-expression-generator/hide-expression-generator.spec.ts
 @ ./my-lib/src sync \.(spec|stubs)\.ts$
 @ ./my-lib/src/test.ts

ERROR in ./dist/my-lib/fesm5/my-lib-defaults.js
Module not found: Error: Can't resolve '...\my-lib\node_modules\@ngx-formly\core\lib\services\formly.form.builder' in '...\xactprm-new-2\dist\my-lib\fesm5'
 @ ./dist/my-lib/fesm5/my-lib-defaults.js 22:0-86 3165:24-41
 @ ./my-lib/src/lib/form-viewer/services/hide-expression-generator/hide-expression-generator.spec.ts
 @ ./my-lib/src sync \.(spec|stubs)\.ts$
 @ ./my-lib/src/test.ts

ERROR in ./dist/my-lib/fesm5/my-lib-defaults.js
Module not found: Error: Can't resolve '...\my-lib\node_modules\@ngx-formly\core\lib\services\formly.form.expression' in '...\dist\my-lib\fesm5'
 @ ./dist/my-lib/fesm5/my-lib-defaults.js 23:0-92 3166:24-44
 @ ./my-lib/src/lib/form-viewer/services/hide-expression-generator/hide-expression-generator.spec.ts
 @ ./my-lib/src sync \.(spec|stubs)\.ts$
 @ ./my-lib/src/test.ts

Any thoughts on how to resolve these?

[aitboudad]

try with:

import { FormlyConfig } from '@ngx-formly/core';
import { ɵc as FormlyGroup } from '@ngx-formly/core';
import { ɵa as FORMLY_CONFIG_TOKEN } from '@ngx-formly/core';
import { ɵb as FormlyFormExpression } from '@ngx-formly/core';

[danielmhair]

Oh, yeah! I didn't realize that I could do that. That solved it!