Angular——在项目之间共享通用代码的最佳实践答案

【问题标题】：Angular – best practice of sharing common code between projectsAngular——在项目之间共享通用代码的最佳实践
【发布时间】：2022-03-08 17:36:43
【问题描述】：

如何在项目之间共享代码？

我创建了两个应用程序：

ng generate application app1

ng generate application app2

我想让projects/app1/src/app.module.ts 从projects/app2/src/shared/common.module.ts 导入一个模块

在不创建名为 common 的第三个项目的情况下，最佳实践是什么？创建一个projects/common 或者只创建一个名为common 的文件夹并在此处放置TypeScript 文件并导入它们。

【问题讨论】：

标签： angular angular-cli

【解决方案1】：

使用库项目！

ng generate library common

这会自动将路径别名添加到主tsconfig.json

  "common": [
    "dist/prod/common"
  ],
  "common/*": [
    "dist/prod/common/*"
  ]

这将允许您引用common 库项目中定义的模块和导出的组件、服务和管道。

例如在你的任何app.module.ts:

import { SharedModule } from 'common';

@NgModule({
  imports: [
    SharedModule,
    ...
  ],
  declarations: [...],
  exports: [...]
  bootstrap: [AppComponent]
})
export class AppModule { }

在 ng serve 的消费应用（例如，用于开发）期间支持热重新加载的替代方法是从项目级别的通用 public_api 导入，如下所示：

import { SharedModule } from 'projects/common/src/public_api';

@NgModule({
  imports: [
    SharedModule,
    ...
  ],
  ...
})
export class AppModule { }

试一试，我用过很多次，效果很好！我强烈建议您阅读Angular Docs - Creating libraries。

【讨论】：

唯一需要注意的是，您在使用之前要构建您的库。我会改写我的问题。
@bhantol - 这是一个视角问题。如果“使用前”是指在ng serve 期间，则始终可以从public_api ES 模块导入。我已经更新了我的答案。但是当你说这是一个警告时要三思而后行，因为在运行时，在生产中，你的每个应用程序都会有自己独立的构建包。你真的需要一个库来共享和分发这个公共代码。
我知道库，并且已经将一堆项目转换为库 + 演示格式，这对库项目很有意义，但共享代码、polyfillls、样式是多余的。我无法从您的回答中解析出哪种方法最好以及为什么。关于“如何”而不是“为什么”的噪音太多了。
我试过了，它还可以与 ngbuild 一起进行一些额外的工作。我认为在开发过程中进行服务和零星构建是可以的，直到分片组件未最终确定。当它们可能永远不会再被触及时，您可以为它们创建一个真正的库。这样你就不需要重建库每个组件的变化
您认为使用 typescript 导入别名轻松地从 'projects/common/src/public_api 切换到 'common' 会有用吗？（在我的情况下，我不导出单个角度模块，而是从 public_api 导出许多打字稿类，所以我需要在很多文件中更改该导入）。

【解决方案2】：

如果大多数应用程序共享公共代码，我将建议使用动态路由和延迟加载模块的另一种方法。在同一个代码库中，您可以将所有 App 特定代码添加到新模块中。然后在环境文件中添加一个额外的标志，并创建一个新的环境文件，这样应用程序就可以通过内部配置--c构建到不同的包中。更多详情，请查看article

【讨论】：