Question

问题类型：错误/问题

描述

我使用ng-packagr lib将我的库编译为js。我已经编译了所有内容而没有任何问题，但是当我想要使用ng build --prod（启用AOT）来使用我的库时，我收到了错误：

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

当我删除.forRoot方法时，我收到错误：

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

请注意，ng --prod --aot=false 没有产生任何错误。

如何重现：

下载回购：https://github.com/Bloodcast69/aot-error，输入npm install ng build --prod.

预期行为

想要使用AOT构建没有错误（我需要它与Angular Universal兼容）版本信息

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

文件：

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（在编译成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}}
      ]
    };
  };
}

注意我已经阅读了整个互联网，找到了对我有帮助的东西，但没有任何成功。我已经检查了这个主题：

FeatureModule fails during an AOT build when static forRoot has arguments

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

如果缺少一些必要的信息，请告诉我，我会提供。

谢谢， Bloodcast69

Answer 1

这是AOT的问题：forRoot函数需要在编译时执行。在较新版本的Angular上，它应该保持原样运行，否则您在tsconfig.app.json上玩可能会很幸运。检查以下相关问题：Angular 6 Prod Function calls are not supported in decorators but '..Module' was called

Answer 2

您的forRoot方法应返回ModuleWithProviders并注明@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: [
                ]
            }
        }
    }

因此，您应该在dropdown.module中导入app.module而不是声明文件dropdown.module.d.ts

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


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

我使用AOT版本进行了测试。没有错误

Answer 3

我也面临着同样的问题，我能够将其范围缩小到ng-packagr。我从库中提取了模块，并在单独的应用程序中进行了测试，但没有遇到任何AOT错误。将模块打包到库中时，只会出现此错误

我正在使用Angular 6.1.8和ng-packagr 4.2.0

ng build --prod（AOT）

3 个答案: