在 Angular 10 没有 Ivy 的库中导入 RouterModule

Question

我正在构建一个 Angular 10 库，将在私有 NPM 存储库上发布。按照 Angular.io 指南，我使用 ng new my-workspace --create-application=false 和 ng generate library my-library 使用 Angular CLI。

我需要为其中一个组件导入 RouterModule，所以我这样做了：

import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { MyLibraryComponent } from './my-library.component';

@NgModule({
  declarations: [MyLibraryComponent],
  imports: [
    RouterModule.forChild(null)
  ],
  exports: [MyLibraryComponent]
})
export class MyLibraryModule { }

当我尝试构建库时出现此错误：

ERROR: Error during template compile of 'MyLibraryModule'
  Function calls are not supported in decorators but 'RouterModule' was called.

An unhandled exception occurred: Error during template compile of 'MyLibraryModule'
  Function calls are not supported in decorators but 'RouterModule' was called.

See "/tmp/ng-bGhmPt/angular-errors.log" for further details.

我试图在 const 变量中定义 RouterModule.forChild() 以避免装饰器中的函数调用，但它产生了相同的错误：

import { ModuleWithProviders, NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { MyLibraryComponent } from './my-library.component';

const routerModule: ModuleWithProviders<RouterModule> = RouterModule.forChild(null);

@NgModule({
  declarations: [MyLibraryComponent],
  imports: [routerModule],
  exports: [MyLibraryComponent],
})
export class MyLibraryModule {}

此错误似乎与 Ivy 有关，因为我正在使用 ng build --prod 构建库，而 Ivy 已禁用生产。如果我启用 Ivy，请从 tsconfig.lib.prod.json

中删除此部分

"angularCompilerOptions": {
    "enableIvy": false
}

然后它构建成功但由于以下错误我无法将其发布到 NPM:

ERROR: Trying to publish a package that has been compiled by Ivy. This is not allowed.
Please delete and rebuild the package, without compiling with Ivy, before attempting to publish.

我应该如何在库中导入 RouterModule (forChild) 以在没有 Ivy 的情况下构建？

Answer 1

好吧，经过几个小时的测试和搜索，我发现 Angular Issue 与此问题相关。

我完全同意@MickL 最后的评论；如果这是一个相关的问题查看Engine，已经2.5年多没有解决方案了。如果永远没有解决方案，只要需要 View Engine 发布库，就应该在 Angular documentation 中发布官方解决方法。

就目前而言，更简单的解决方法似乎就是在装饰器之前使用一个常量，然后在装饰器中使用该值，就像我之前所说的那样；我所缺少的只是 export.

import { ModuleWithProviders, NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { MyLibraryComponent } from './my-library.component';

export const routerModule: ModuleWithProviders<RouterModule> = RouterModule.forChild(null);

@NgModule({
  declarations: [MyLibraryComponent],
  imports: [routerModule],
  exports: [MyLibraryComponent],
})
export class MyLibraryModule {}

我真的希望这个问题得到解决或至少被 Angular 中的文档涵盖。

在 Angular 10 没有 Ivy 的库中导入 RouterModule

Import RouterModule in Angular 10 Library without Ivy

ivy

npm

angular