首页 > 解决方案 > Angular AOT 产生 NG8001、NG8002 和 NG8003 错误

问题描述

我正在开发一个正在生产中的中型企业 Angular 应用程序。在为我的最新更改进行 PR 之前,我使用 AOT 运行构建以确保在 PR 合并时应用程序不会在构建步骤中中断。当我在没有 AOT 标志的情况下构建项目时,它会正确构建并且一切都很好。当我添加 AOT 标志时,我从应用程序中的几乎每个组件中得到数百个 NG8001、NG8002 和 NG8003 错误。很难说,因为有太多错误导致终端输出被截断。

以下是一些错误的示例:错误画面 1

其中许多错误似乎与无法绑定到 ngModel 和 ngForm 有关。但这从未发生过,我的模块导入 FormsModule。我已遵循此处找到的建议:https ://angular.io/errors/NG8001但无济于事。我不知道问题可能是什么。这个问题的原因是什么?我该如何解决?

编辑 - 附加信息

我能够得到一个完整的输出,现在有了更多的信息,我相信这些信息可以让我们更接近真正的问题。

错误画面 2

LoggerModule 实际上是我在这个 PR 中添加的代码。我不明白错误是什么以及为什么它只会在使用 AOT 编译时出现。

这是 LoggerModule 的代码:

import { HttpClient } from '@angular/common/http';
import { ModuleWithProviders, NgModule } from '@angular/core';
import { CapturedPayload } from './captured-payload';
import { LogLevel } from './log-level';
import { LoggerConfigurationToken } from './logger-configuration';
import { LoggerService } from './logger.service';
import { TransportTemplate } from './transport-template';
import { TransporterToken } from './transporter';
import { ConsoleTransporter } from './transporters/console.transporter';
import { HttpTransporter } from './transporters/http.transporter';

function consoleTransporterFactory() {
  return new ConsoleTransporter();
}

@NgModule()
export class LoggerModule {
  static config(config: LoggerModuleConfig): ModuleWithProviders<LoggerModule> {
    const httpTransporterFactory = (httpClient: HttpClient) => {
      const template: TransportTemplate = <T>(payload: CapturedPayload) => {
        return ({ ...payload, timestamp: payload.timestamp.toISOString() } as unknown) as T;
      }
        
      const transporterConfig = { url: config.url };
      return new HttpTransporter(template, httpClient, transporterConfig);
    }



    return {
      ngModule: LoggerModule,
      providers: [
        {
          provide: TransporterToken,
          useFactory: consoleTransporterFactory,
          multi: true,
        },
        {
          provide: TransporterToken,
          useFactory: httpTransporterFactory,
          multi: true,
          deps: [HttpClient],
        },
        {
          provide: LoggerConfigurationToken,
          useValue: { level: config.logLevel },
        },
        {
          provide: LoggerService,
        },
      ],
    };
  }
}

export interface LoggerModuleConfig
{
  logLevel: LogLevel,
  url: string
}

标签: angularcompiler-errorsangular2-aot

解决方案


推荐阅读