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

[Bloodcast69]

Type of Issue

[x ] Bug Report
[ ] Feature Request

Description

I'm using your package to build my library to be compiled 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.
ng --prod --aot=false won't produce any errors.

How To Reproduce

Create new project in Angular, create another module, in this module make forRoot method and post there some things, then pack whole package, and consume in second project. In second project import your module and use on it forRoot method.

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

Expected Behaviour

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

Version Information

$ node_modules/.bin/ng-packagr --version
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

[crowmagnumb]

I too have this issue. I am using ag-grid and it requires you to import the module like ...

AgGridModule.withComponents([MyComponentContainingGrid, My OtherComponentContainingGrid])

... which fails with the same error.

UPDATE: Turns out the one component I had an ag-grid on I was only using in one app so far. So for now I just moved that component over to that app and I'm good. BUT I will want to be able to have reusable grids in the future. :)

[Bloodcast69]

I've fixed this. My problem was: I was importing some providers only from folder, not from file directly.
For example:
This was bad
import { SampleService } from './services'
This is good
import { SampleService } from './services/sample.service'

[crowmagnumb]

Oh man. Now I suppose I have to make my own repo to reproduce my issue now. ;)
Congrats on finding your issue.

[nweldev]

Is this related to #607 ?

[Bloodcast69]

As i said above, my problem was with providing exact Path for imports.

[nweldev]

Thanks @Bloodcast69, but I was talking to @crowmagnumb (my bad, I should have tagged him). That said, I assume you could close this issue ?

[crowmagnumb]

@noelmace I disagree that this is the same issue. That one states 'NgModule' calls a function at @angular/core/core.ts(194,50). while this error is Function calls are not supported in decorators but '<MyModule>' was called.. They could be related but until there are solutions to both we won't know. So I say keep this as a separate issue.

Been way too swamped to create a repo to reproduce, but will do when I get a chance.

[nweldev]

@Bloodcast69 did you mean that you used a index.ts file at the root of you ./services folder and that ng-packagr failed because of it, or that you just did a wrong import ?

[tashoecraft]

Seeing this issue as well, but not for including packages I wrote.
Issues are @ngrx/store, @ngrx/effects and TranslateModule. Which all required you to do .forFeature/forChild().

This also all appeared when I upgraded to "ng-packagr": "2.4.2", which I also upgraded to angular 6.0.0.rc-3. Few other apps I upgraded and didn't have an issue so my guess is it's something with ng-packagr.

[Bloodcast69]

@noelmace In index.ts (of my services) I had to point exact path for every service (for example ./services/service-one) not only (./services).

[nweldev]

Ok so @Bloodcast69, this is a duplicate of #195. I think you should close.

[crowmagnumb]

OK, I have finally got around to creating my repo that reproduces this problem using ag-grid. Here it is.

Let me know if you would like me to open a new repo with this issue.

[nweldev]

ok thx @crowmagnumb. It seems to me that your issue is related to AgGrid, and had nothing to do with the one reported @Bloodcast69, given that you don't use barrels in your project. I think you should try to move AgGrid to the peerDependencies, and re-open another issue if it doesn't resolve your problem.

[crowmagnumb]

@noelmace OK. I didn't see that his was because of the use of barrels, just saw the same error message.

And, oops, yeah I knew it wasn't working with the dependencies set as peer but accidentally didn't have them set that way. :) I've updated the repo with the changed dependencies and verified that it is still a problem. Will create a new issue. Cheers.

[alan-agius4]

You need to tell the compiler that it is a dynamic module. Check here for more info #767 (comment)

[KrekkieD]

I had the same issue, but I was able to fix it by changing export * from './shell'; to export * from './shell/index';, which seems odd. I'm sort of unofficially drawing the conclusion that something bad happens when trying to export a folder and relying on ng-packagr to find the index.ts file in that folder.

[fagainv]

I had the same issue. I had a lib as a separate project and an app also separate project as a consumer of my lib.

The files in the lib project

The lib.module

import { NgModule, ModuleWithProviders } from '@angular/core';
import { ViclibTestComponent } from './viclib-test.component';
import { Config } from './config';
import { ViclibTestService } from './viclib-test.service';

@NgModule({
imports: [
],
declarations: [ViclibTestComponent],
providers: [ViclibTestService ],
exports: [ViclibTestComponent]
})
export class ViclibTestModule {
static forRoot(config: Config) : ModuleWithProviders {
return {
ngModule: ViclibTestModule,
providers: [{provide: 'config', useValue: config}] ,
};
}
}

The Config interface config.ts
export interface Config {

    key?: string;

}

**The ViclibTestService consuming the Config interface, viclib-test.service.ts **

import { Injectable, Inject } from '@angular/core';
import { Config} from './config';

@Injectable({
providedIn: 'root'
})
export class ViclibTestService {

constructor(@Inject('config') private config: Config) {
console.log("The config in service constructor: ", config);
console.log("config.key: ", config.key);
}
}

The above files are just the relevant files involved in this.

The files now in the app project, the consumer

The AppModule with "error" in file app.module.ts

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

import { AppComponent } from './app.component';
import { ViclibTestModule } from 'viclib-test';

const config = {key: 'My beutiful key'};

@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
ViclibTestModule.forRoot(config)

],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {
}

The fix

For some reason I had to give the provider like this in the AppModule in file app.module.ts

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

import { AppComponent } from './app.component';
import { ViclibTestModule } from 'viclib-test';

const config = {key: 'My beutiful key'};

@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
ViclibTestModule.forRoot(config)

],
providers: [{provide: 'config', useValue: config}],
bootstrap: [AppComponent]
})
export class AppModule {
}

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. Please correct me if I'm wrong or give me your thoughts.

[shairez]

I had a similar error which only happened using yarn link.
I fixed it by installing from the source.

[boriscosic]

Nothing above worked, so rather then using:

JsonFormModule.forRoot(JsonFormMaterialModule)

I switched to:

JsonFormMaterialModule,
{
  ngModule: JsonFormModule,
  providers: [{
     provide: JsonFormFieldsService,
     useClass: JsonFormMaterial,
     multi: true
   }]
}

This might not work for third party modules that don't export providers, but in our own module this worked. Hopefully this gets fixed soon.

[ddehghan]

I just created 2 static functions. that worked.

myModule. forRoot()
myModule. forRootMock()

[tabareh]

Hello,

We had the same error message and we used symlink (npm link) in our project. Once we removed the node_modules folder under the linked package the issue was resolved.

If you wonder how do we develop without node_module folder under a linked package, then read about preserveSymlinks attribute in angular.json file

[thiagofrancisquete]

Is there any official solution for this? don't get me wrong, but with these multiple solutions it seems that there is no "universal" solution to this error, and some things works for some people, but not for all, so they seem more like solutions to specific cases and not to the error atself

[alan-agius4]

Closing as this error is not related to ng-packagr per see but angular compiler angular/angular#23609

[sharathaau]

In My case it was because: i kept two node modules folder in project directory.

1. node_modules
2. z_node_modules
   Because of this i was getting error during production build.

[werthdavid]

For me the solutions was like follows:

in my public_api.ts I had:
export * from "./app/security";

and in the folder /app/security/ I had the file index.ts with the following content
export * from "./auth.module.ts";

where AuthModule had a regular forRoot() function that seemed to cause the problem.

I resolved the issue by moving the export of the module directly to public_api.ts
export * from "./app/security/auth.module";

Easy as that....

[github-actions]

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.
_{This action has been performed automatically by a bot.}