AOT - 不支持函数调用 Module.forRoot答案

【问题标题】：AOT - Function calls are not supported Module.forRootAOT - 不支持函数调用 Module.forRoot
【发布时间】：2017-07-14 15:06:20
【问题描述】：

我一直在尝试使用带有 @angualar/compiler-cli 的 AOT 编译我的 Angular 应用程序，但我在编译过程中遇到了一个我无法解决的错误。错误状态：

Error encountered resolving symbol values statically. 
Calling function 'PanelModule', function calls are not supported.
Consider replacing the function or lambda with a reference to an exported function.

我有我的主要AppModule 和另一个名为PanelModule 的模块。在 PanelModule 我有一个 forRoot 方法，我从 AppModule 调用它，如下所示：

app.module.ts / AppModule

@NgModule( {
    imports: [
        BrowserModule,
        routing,
        PanelModule.forRoot(), <----------- If not present it compiles OK
    ],
    declarations: [
        AppComponent,
        LoginView,
        WorkbenchView,
        ErrorView,
        NotFoundErrorView,
        DashboardView,
        BackgroundVideoComponent
    ],
    providers: [
        {
            provide: APP_BASE_HREF,
            useValue: URL_BASE
        },
        CARBON_PROVIDERS,
        CARBON_SERVICES_PROVIDERS,
        appRoutingProviders,
        Title,
    ],
    bootstrap: [ AppComponent ],
} )
export class AppModule {}

panel.module.ts / PanelModule

@NgModule( {
    imports: [
        CommonModule,
        RouterModule,
        SemanticModule,
        DirectivesModule,
        FormsModule
    ],
    declarations: [
        HeaderComponent,
        ...
        PaginatorComponent,
    ],
    exports: [
        HeaderComponent,
        ...
        PaginatorComponent,
    ],
    providers: []
} )

export class PanelModule {

    static forRoot():ModuleWithProviders {
        return {
            ngModule: PanelModule,
            providers: [ HeaderService, SidebarService, RouterService, MyAppsSidebarService, ErrorsAreaService ]
        };
    }
}

如您所见，PanelModule 上没有 lambda 函数。我还看到你在 forRoot 中只能有一个 return 语句和一个 return 语句，但这不是我的情况。我不知道发生了什么。

【问题讨论】：

发生了什么事？为什么要写静态函数？
因为这就是 Angular 建议创建 forRoot 的方式。 angular.io/docs/ts/latest/guide/ngmodule.html#!#core-for-root
您是否已将元数据文件与 .d.ts 文件一起发布？
@pixelbits 不。我怎么做？不知道我必须这样做。
在 tsconfig 的编译器选项中，声明：true 和 AOT 设置中 --> skipMetadataEmit: false。将它们与您的 js 文件一起部署

标签： angular angular2-aot

【解决方案1】：

我遇到了同样的问题，并且能够通过替换我的导入来解决它。我之前使用的是 @angular/compiler/src/core 中的 ModuleWithProviders，而不是 @angular/core 中的那个。

import { ModuleWithProviders } from '@angular/core';

@NgModule({
    imports: [
        CommonModule, RouterModule, SemanticModule, DirectivesModule, FormsModule
    ],
    declarations: [
        HeaderComponent, PaginatorComponent,
    ],
    exports: [
        HeaderComponent, PaginatorComponent,
    ],
    providers: []
})
export class PanelModule {
    static forRoot():ModuleWithProviders<PanelModule> {
        return {
            ngModule: PanelModule,
            providers: [
                HeaderService, SidebarService, RouterService, MyAppsSidebarService, ErrorsAreaService
            ]
        };
    }
}

【讨论】：

【解决方案2】：

我会冒险将此作为答案，尝试提供一些帮助并让您继续前进。我对这个问题有一些背景知识，并且已经根据我的需要解决了它，所以我可以告诉你我在这里看到的内容，也许它会有所帮助。

如果您有任何类型的非静态可解析逻辑，您将在 forRoot 中收到 AOT 错误。例如，如果您这样做：

( passing this obj as args: "{ production: true }" )

forRoot ( args ) {
 if ( args.production )...
 (or a ternary, e.g. args.production ? this : that)
}

它会在 AOT 中崩溃。

即使是导出函数和使用工厂等，这是经常被推荐的“修复”，也不是一致和可靠的。我尝试了所有我能找到的编译器属性等推荐配置，但都无济于事（正如许多其他人遇到的那样）。

有一种非常简单的方法可以解决这个问题，但显然这不是您的问题。你没有条件、函数调用或任何东西。

但是 AOT 正在为此哭泣。所以不知何故，你在 forRoot 中拥有的东西不能被 AOT 编译器静态解析。事实上，forRoot 功能似乎还没有真正准备好迎接黄金时段，它非常幼稚。例如，您不能直接动态配置导入，因为 ModuleWithProviders 不允许您修改导入（实际上可以，但不是以任何记录的方式）。

所以回答：我发现的第一件事是，你没有向 forRoot 提供任何参数。如果您不使用它来动态配置提供程序，那么使用 forRoot 没有多大意义。事实上，我认为 forRoot 需要一个参数。所以我会检查一下。

如果做不到这一点，我的猜测是，它是您的进口产品之一，或者您的供应商之一。其中一个元素是以某种方式执行 AOT 编译器无法静态解析的事情。也许您的自定义类型？

我，我会删除它们并尝试编译。如果它有效，您就知道问题出在哪里。如果没有，那么问题就在树的更高层。

有了整个（可编译的）代码库，我可能会为您提供更多帮助。但就目前而言，这就是我遇到这个问题时的处理方式。我设法缩小了有问题的元素，这让我走向了解决方案。

【讨论】：