12

问题类型：错误/问题

描述

我正在使用 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 不会产生任何错误。

如何复制：

下载 repo：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}}
      ]
    };
  };
}

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

当静态 forRoot 具有参数时，FeatureModule 在 AOT 构建期间失败

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

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

谢谢，Bloodcast69

4

3 回答 3

2

这是 AOT 的一个问题：该forRoot函数需要在编译时执行。在更新版本的 Angular 上，它应该按原样工作，否则你可能会幸运地使用tsconfig.app.json. 检查这个相关问题：Angular 6 Prod Function calls are not supported in decorators but '..Module' was called

于 2018-10-08T13:40:54.503 回答
0

你的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构建进行了测试。没有错误

于 2018-03-27T11:38:16.140 回答
-1

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

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

于 2018-09-25T21:27:24.733 回答