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

Question

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

我有两个使用创建的应用程序:
ng generate application app1ng generate application app2
我要projects/app1/src/app.module.ts从 projects/app2/src/shared/common.module.ts 导入模块

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

Answer 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 .