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)
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 goodimport { 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 {
}
**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.tsI had:export * from "./app/security";and in the folder /app/security/ I had the file
index.tswith the following contentexport * 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.tsexport * from "./app/security/auth.module";Easy as that…
In My case it was because: i kept two node modules folder in project directory.
I had the same issue, but I was able to fix it by changing
export * from './shell';toexport * 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 theindex.tsfile 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.