角度6 - 在项目之间共享公共代码的最佳实践

Question

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

我有两个使用以下创建的应用:

ng generate application app1

ng generate application app2

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

如果没有创建名为common或3rd的第三个项目,最佳做法是什么？创建一个项目/公共或只是common在这里调用一个文件夹并填充TypeScript文件并导入它们.

Answer 1

使用库项目!

ng generate library common

这将自动将路径别名添加到main 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 { }

尝试一下,我已经大量使用它,它的作品令人惊叹!我强烈建议您阅读本文档:

• https://github.com/angular/angular-cli/wiki/stories-create-library

Answer 2

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