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

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

About this issue

  • Original URL
  • State: closed
  • Created 6 years ago
  • Reactions: 34
  • Comments: 26 (12 by maintainers)

Commits related to this issue

Most upvoted comments

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'

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.

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

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.

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…

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.

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.

@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.

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

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

You need to tell the compiler that it is a dynamic module. Check here for more info https://github.com/dherges/ng-packagr/issues/767#issuecomment-385199831

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