Flex-layout: AOT build throwing the error: Function calls are not supported in decorators but ‘FlexLayoutModule’ was called, when using withConfig options

[hags033]

Bug Report

What is the expected behavior?

App should build in AOT when FlexLayoutModule.withConfig({addFlexToParent: false}) is added to the module.

What is the current behavior?

App fails to build in AOT with error: Function calls are not supported in decorators but ‘FlexLayoutModule’ was called, when using withConfig options

What are the steps to reproduce?

include in Module: FlexLayoutModule.withConfig({addFlexToParent: false})

What is the use-case or motivation for changing an existing behavior?

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Angular 6.0.4, Material 6.2.1

Is there anything else we should know?

We have another module: LocalStorageModule.withConfig({ prefix: '', storageType: 'localStorage' }) that builds fine.

[CaerusKaru]

I've included it in our demo-app with no issue. Please provide either a StackBlitz or a minimal reproduction repository that demonstrates this behavior.

[hags033]

I've also included it in your demo app, but unsure if it's building in AOT, we have another separate app, I added the same line to the app module, and still get this error: ERROR in Error during template compile of 'AppModule'
Function calls are not supported in decorators but 'FlexLayoutModule' was called.
node_modules/@angular/flex-layout/typings/module.d.ts(12,37): error TS1183: An implementation cannot be declared in ambient contexts

[CaerusKaru]

Without an actual reproduction, we cannot investigate this issue.

[TechRazor]

@CaerusKaru, I'm facing the same issue when upgrading to the latest release and using the ".withConfig()" option. I have created a reproduction by using angular-cli to create a new project, then npm add the flex-layout and cdk dependencies, then import FlexLayoutModule.withConfig({ addFlexToParent: true }) to the app.module.ts imports. After this you only need to run "ng build --prod" to get the error. You can clone my repo to test it, https://github.com/TechRazor/flex-layout-demo

Also I only get the error with "ng build --prod" and no errors with dev build using "ng serve" or "ng build".

Thanks,
-James

[CaerusKaru]

@hags033 @TechRazor Thank you for bringing this to my attention. I was finally able to replicate this, and thankfully the fix is pretty straight-forward. In case you're curious, it's caused by attempting to provide the default options if none are available eagerly in the static method instead of just setting them where they're used. The PR to fix this makes that change.

@ThomasBurleson is OOTO for the next few weeks, but you're welcome to pull the fix and build locally until we can get it merged.

[TechRazor]

@CaerusKaru Thank you for the quick fix!

[simeyla]

Workaround

As a workaround you can provide the FlexLayoutModule like this:

imports: [
    BrowserModule,
    BrowserAnimationsModule,
    {
        ngModule: FlexLayoutModule,
        providers: [
            {
                provide: LAYOUT_CONFIG,
                useValue: {
                    addFlexToParent: true,
                    addOrientationBps: false,
                    disableDefaultBps: false,
                    disableVendorPrefixes: false,
                    serverLoaded: false,
                    useColumnBasisZero: true
                 }
            },
            {
                provide: BREAKPOINT,
                useValue: CUSTOM_BREAKPOINTS
            }
        ]
    },

These are the default options for the config, so change here if you need to vary them.

I came up with this by basically extracting the implementation for withConfig(). This will now work with AOT.

If you aren't using custom breakpoints then remove the provider for BREAKPOINT. If you're using serverLoaded then you need to add a provide for that.