Type of Concern: Bug / Question
Issue Details
I'm currently utilizing the ng-packagr library to compile my code into JavaScript. The compilation process runs smoothly without any errors, however, when attempting to consume the library with 'ng build --prod' (AOT enabled), I encounter the following error:
ERROR in Error during template compile of 'AppModule' Function calls are not supported in decorators but 'BsDropdownModule' was called.
If I remove the '.forRoot' method, a different error occurs:
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
It's important to note that using ng --prod --aot=false
does not result in any errors.
Steps to Recreate:
To replicate the issue, please download the repository from: https://github.com/Bloodcast69/aot-error, then execute the commands npm install followed by ng build --prod.
Expected Outcome
The desired outcome is to successfully build with AOT without encountering any errors (this compatibility is required for 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 Involved:
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 compiling 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 have extensively searched online for solutions to this issue but have been unsuccessful. I have reviewed the following resources:
FeatureModule fails during an AOT build when static forRoot has arguments
https://github.com/angular/angular/issues/14707
If additional information is required to assist in resolving this problem, kindly let me know and I will provide it promptly.
Thank you, Bloodcast69