Function calls are not supported in decorators while ng build --prod (AOT)

function calls are not supported in decorators forroot
function calls are not supported in decorators but 'createreducer' was called
function calls are not supported in decorators but injectiontoken
function calls are not supported in decorators but 'chartmodule' was called
function expressions are not supported in decorators
ng build --prod --aot
function calls are not supported in decorators but okta auth module was called
npm run build aot

Type of Issue: Bug / Question

Description

I'm using ng-packagr lib to compile my library to js. I've compiled everything without any problems, but when I'll want to consume my library with ng build --prod (AOT enabled), I'm getting error:

ERROR in Error during template compile of 'AppModule' Function calls are not supported in decorators but 'BsDropdownModule' was called.

When I remove .forRoot method, I'm getting error:

ERROR in : Unexpected value 'BsDropdownModule in /home/sf/Desktop/Developerka/kompilacja/final/sample-repo/node_modules/angular-library-name/free/dropdown/dropdown.module.d.ts' imported by the module 'AppModule in /home/sf/Desktop/Developerka/kompilacja/final/sample-repo/src/app/app.module.ts'. Please add a @NgModule annotation

Please note, that ng --prod --aot=false is not producing any errors.

How To Reproduce:

Download repo: https://github.com/Bloodcast69/aot-error , type npm install ng build --prod.

Expected Behaviour

Want to build with AOT without errors (I need this to be compatible with Angular Universal) Version Information

ng-packagr: 2.4.1 @angular/*: 5.2.9 typescript: 2.5.3 rxjs: 5.5.6 node: 8.1.0 npm/yarn: npm: 5.6.0

Files:

app.module.ts:

import { BsDropdownModule } from 'angular-library-name';
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';



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


@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BsDropdownModule.forRoot(),
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

dropdown.module.d.ts:

import { ModuleWithProviders } from '@angular/core';
export declare class BsDropdownModule {
    static forRoot(config?: any): ModuleWithProviders;
}

dropdown.module.ts (before compilation to JS):

import { ModuleWithProviders, NgModule } from '@angular/core';
import { ComponentLoaderFactory } from '../utils/component-loader/index';

import { PositioningService } from '../utils/positioning/index';
import { BsDropdownContainerComponent } from './dropdown-container.component';
import { BsDropdownMenuDirective } from './dropdown-menu.directive';
import { BsDropdownToggleDirective } from './dropdown-toggle.directive';
import { BsDropdownConfig } from './dropdown.config';

import { BsDropdownDirective } from './dropdown.directive';
import { BsDropdownState } from './dropdown.state';

@NgModule({
  declarations: [
  BsDropdownMenuDirective,
  BsDropdownToggleDirective,
  BsDropdownContainerComponent,
  BsDropdownDirective
  ],
  exports: [
  BsDropdownMenuDirective,
  BsDropdownToggleDirective,
  BsDropdownDirective
  ],
  entryComponents: [BsDropdownContainerComponent]
})
export class BsDropdownModule {
  public static forRoot(config?: any): ModuleWithProviders {
    return {
      ngModule: BsDropdownModule, providers: [
      ComponentLoaderFactory,
      PositioningService,
      BsDropdownState,
      {provide: BsDropdownConfig, useValue: config ? config : {autoClose: true}}
      ]
    };
  };
}

NOTE I've read whole Internet to find something which would be helpful to me, but without any success. I've checked this topics:

FeatureModule fails during an AOT build when static forRoot has arguments

https://github.com/angular/angular/issues/14707

If there's missing some needed informations, please let me know, and I'll provide it.

Thanks, Bloodcast69


It's a problem with AOT: the forRoot function needs to be executed at compile-time. On a more recent version of Angular it should work as-is, otherwise you might have luck playing with tsconfig.app.json. Check this related question: Angular 6 Prod Function calls are not supported in decorators but '..Module' was called

Function calls are not supported in decorators when , This would work on ng build --prod --aot=false , but it won't build to ng build --​prod to fix: File ~/public_api.ts export * from '.lib/sample/data. AngularInDepth is moving away from Medium. More recent articles are hosted on the new platform inDepth.dev.Thanks for being part of indepth movement! Problem. According to NgRx quick start guide


Your forRoot method should return ModuleWithProviders and annotated with @NgModule

  import { ModuleWithProviders, NgModule } from '@angular/core';

    @NgModule({
        declarations: [],
        imports: [],
        providers: [],

      })
    export class BsDropdownModule {
       // constructor(parentModule: BsDropdownModule);
        //  static forRoot(config?: any): ModuleWithProviders;
        static forRoot(config?: any): ModuleWithProviders {

            return {
                ngModule: BsDropdownModule,
                providers: [
                ]
            }
        }
    }

So, you should import dropdown.module in app.module not the declaration file dropdown.module.d.ts

import { BsDropdownModule } from './dropdown.module';


@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BsDropdownModule.forRoot(),
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

I tested with AOT build. No error

Function calls are not supported in decorators while ng build --prod , It's a problem with AOT: the forRoot function needs to be executed at compile-​time. On a more recent version of Angular it should work as-is,  "Function calls are not supported in decorators but 'RoutingService' was called" - while ng build --prod #1428 Closed Sign up for free to join this conversation on GitHub .


I am facing the same issue as well, I was able to narrow it to ng-packagr. I extracted my module out of the library and tested in separate application I didn't face any AOT errors. I only get this error when I package my module in a library

I am using Angular 6.1.8 and ng-packagr 4.2.0

Solving AOT Error in NgRx: Function calls are not supported in , Solving AOT Error in NgRx: Function calls are not supported in decorators. Siyang Kern Zhao. Follow However when you build the Angular project using prod mode (AOT by default) ng build --prod , you will run into an error like: ERROR in  Now I can use ng build --prod, ng serve --prod and ng serve, without any issues. I'm using angular 6 which includes now ng-packagr module to generate libraries. I guess the library is not fully separated because in somehow the consumer of my library must provide the provider that my library needs.


AOT metadata errors, Service Worker in Production Function calls are not supported · Destructured variable or constant not supported The compiler encountered an expression it didn't understand while evaluating Angular metadata. the component factory, which includes instructions for building the element based on the template. I receive it when ng build --prod i'm using ngx-progressbar and i get : "Function calls are not supported in decorators but 'NgProgressModule' was called." — You are receiving this because you authored the thread.


Angular 8: erros in core.ts when running “ng build --prod”, Error during template compile of 'Injectable' Function calls are not supported in decorators but 'ɵmakeDecorator' was called. @angular/core/core. Unfortunately, the fix to properly support modern browsers and IE11 (for both JIT and AOT) is proving to be more complicated than expected. We have deprecated 0.1.3 and set the latest tag back to 0.1.2, so we recommend pinning your version of @azure/msal-angular to 0.1.2 while we work on a proper fix.


Developers, with ng build --prod (AOT enabled), I'm getting error: ERROR in Error during template compile of 'AppModule' Function calls are not supported in decorators  Start a new application like ng new aot-bug; Edit app.component.ts and use the code snippet above; Run ng build -prod; What is the motivation / use case for changing the behavior? Getting a working AoT for us in our project. We have been trying to get a working AoT build with our production code since version 2.0 with no luck.