Angular 不包含客户端 (angular) 和服务器代码的 tree shake nx lib

Question

我正在使用 nrwl nx 工作区。我有一个工作区库 (libs/jobs)，它包含我的 "job" 模块的所有逻辑。它包含服务器端代码以及一个 angular 模块。 angular 模块与服务器代码没有依赖关系，但是如果我通过 import('@reporting/jobs').then(m => m.JobsClientModule) 加载模块，它会失败，因为它在编译时找不到像 fs 这样的节点 api。

我认为 tree shaking 会消除未使用的服务器代码。为什么不呢？

我目前的解决方法是向 tsconfig.json 添加一个新条目 --> path："@reporting/jobs-client": ["libs/jobs/src/client/index.ts"]。它只从模块中导入客户端内容。但这感觉很老套:(

关于如何创建包含一个功能的所有代码（服务器和客户端）的库/模块有什么建议吗？

Answer 1

Angular 使用 webpacks 捆绑加载器，后者又使用本机动态导入。

WebPack 将找到所有 import('') 并为它们创建入口点。所以我认为 angular 没有办法神奇地解决这个问题。

你做的方式很好，但是你会错过使用 nx 标签来执行规则的机会。

我在我们的 repo 中所做的是将具有客户端和服务器代码的模块拆分为多个库。

像这样：

// contains the business logic / interfaces that can be used both client and server side. (cannot contain any node imports)
@reporting/jobs/domain

// the angular feature module that contains routing and can be lazy loaded via loadChildren
@reporting/jobs/feature-job-dashboard

// the cloud function that gets invoked by cloud scheduler
@reporting/jobs/backend-scheduled-import

我发现将后端和前端实现细节严格分开可以更容易地掌握运行什么地方，并使代码更清晰、更容易测试。但是很难选择何时创建新库。

祝你好运:)

Angular 不包含客户端 (angular) 和服务器代码的 tree shake nx lib

Angular does not tree shake nx lib which contains client (angular) and server code

angular

tree-shaking

nrwl-nx