Angular：库升级到 Angular9，演示应用程序出现 ngcc 构建错误

Question

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

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

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

但是我被依赖库的演示应用程序的构建阻止了。我收到 ngcc 错误。经过网上的一些研究，我知道了背景：https://angular.io/guide/ivy#maintaining-library-compatibility;

尽管我了解什么是 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: [
      {
        ...
      },
      {
        ...
      }
    ]
  };
}

这个函数只是 return 一个 ModuleWithProviders 用于 forRoot 方法。我在这里抽象了功能，因为这两个模块在这部分的逻辑是一样的。

正如我提到的，库本身已成功构建（基于 google Angular 团队的文档，库仍在使用旧的 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 团队的文档：演示应用程序使用 Ivy 编译器，这就是 ngcc 来到这里的原因。

我调整了DIYModuleWithProviders的类型一段时间，但无法解决。基于 link 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 函数还必须 return 类型化模块。

编辑：像那样尝试：

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: [...]
  }
}

Angular：库升级到 Angular9，演示应用程序出现 ngcc 构建错误

Angular: library upgrate to Angular9 with ngcc build error for the demo-app

angular

angular-compiler

angular-ivy