Angular：库升级到 Angular 9，演示应用的 ngcc 构建错误

Question

我正在维护一个由 Angular Cli 生成的 Angular 库。在工作空间内有一个库和一个演示应用程序，这是从 angular-cli 创建的所有 Angular 库的标准架构。

目前我正在将我的库升级到新版本的 Angular 9。

我使用ng update 的自动升级灵魂。修复了一些迁移问题后（某些 API 已弃用）。该库可以成功构建。

但是我被以库作为依赖项的演示应用程序的构建阻止了。我收到ngcc 错误。网上查了一下才知道背景：https://angular.io/guide/ivy#maintaining-library-compatibility； Library build fails with Angular 9

即使我了解 ngcc 是什么以及为什么我们现在需要它，我仍然无法修复构建错误。

在我的库中，我也有以下模块：

// the first module

@NgModule({
   ...
})
export class FirstModule {
  public static forRoot(
    FirstConfig: Config
  ): ModuleWithProviders<FirstModule> {
    return DIYModuleWithProviders(FirstModule, FirstConfig);
  }
  ...
 }

// the second module

@NgModule({
   ...
})
export class SecondModule {
  public static forRoot(
    SecondConfig: Config
  ): ModuleWithProviders<SecondModule> {
    return DIYModuleWithProviders(SecondModule, SecondConfig);
  }
  ...
 }

这两个模块都调用了fotRoot方法中从其他模块导入的函数，如下：

export function DIYModuleWithProviders(
  module: any,
  config: Config
): ModuleWithProviders {
  return {
    ngModule: module,
    providers: [
      {
        ...
      },
      {
        ...
      }
    ]
  };
}

这个函数只为forRoot 方法返回一个ModuleWithProviders。我这里把函数抽象出来，因为这两个模块这部分的逻辑是一样的。

正如我所提到的，库本身已成功构建（基于 google Angular 团队的文档，Library 仍在使用旧的 View Eigine 而不是 Ivy 编译器）。但演示应用无法构建并出现以下错误：

Compiling my-library : module as esm5
Error: Error on worker #1: Error: No typings declaration can be found for the referenced NgModule class in function DIYModuleWithProviders(module, config) {
    return {
        ngModule: module,
        providers: [
            {
                ...
            },
            {
                ...
            }
        ]
    };
}.

根据google Angular 团队的文档：demo-app use Ivy compiler，这就是ngcc 出现在这里的原因。

我调整了DIYModuleWithProviders 的类型一段时间，但无法解决。 根据链接 https://angular.io/guide/migration-module-with-providers，在 Angualr 9 中，ModuleWithProviders 必须具有泛型类型。所以改成ModuleWithProviders<any>，还是不行。

https://github.com/500tech/angular-tree-component/issues/721。有什么想法吗？

Answer 1

你必须给你的ModuleWithProviders 一个类型引用。

ModuleWithProviders<YourType>

见：https://angular.io/guide/migration-module-with-providers

编辑：更准确地说，您的 DIYModuleWithProviders 函数还必须返回一个类型化模块。

编辑：这样尝试：

export function DIYModuleWithProviders<T>(
  module: T,
  config: Config
): ModuleWithProviders<T> {
  return {
    ngModule: module,
    providers: [
      {
        ...
      },
      {
        ...
      }
    ]
  };
}

或者只是删除该函数并将其挂钩到您的模块中：

export class YourModule {

  public static withOptions(options: YourModuleOptions ): ModuleWithProviders<YourModule> {
    return {
      ngModule: YourModule ,
      providers: [...]
  }
}