在其他应用程序中重用 Angular 2 模块而不发布到 npm？

Posted 2023-03-07

【中文标题】在其他应用程序中重用 Angular 2 模块而不发布到 npm？

【英文标题】：Reuse Angular 2 module in other app without publishing to npm?

【发布时间】：2017-02-28 05:54:00

【问题描述】：

假设您有两个不同的 Angular 2 应用程序，它们都需要使用相同的组件。

我创建了公共组件，按照本教程 http://blog.angular-university.io/how-to-create-an-angular-2-library-and-how-to-consume-it-jspm-vs-webpack/ 创建了一个库，但是 npm 会将我的代码公开，我必须付费才能将其设为私有。

所以，问题是：

我应该如何创建可供工作团队使用的组件？ 是否有必要发布到 npm 或者我可以将我的代码推送到私有 github 存储库吗？如果是这样，我应该怎么做？在应用程序中重用代码的过程是什么？

提前致谢。

【问题讨论】：

How to use private Github repo as npm dependency的可能重复

我不认为@Alina 是在问如何将私有仓库用作依赖项，而是在问一个项目应该如何构建和维护以作为其他 Angular 项目中的可重用模块。

同意@Damon。我自己来到这里是因为我正在寻找如何创建可重用模块。没有私人 github/npm 帐户，并且诸如“设置您自己的内部 npm 存储库”之类的解决方案之一似乎......并不理想。目前，我正在复制 ng-bootstrap 项目的应用程序结构，但在各种应用程序中重用它的过程似乎还不清楚。

@BLSully 我不明白，如果你不发布它某处，它对你的本地磁盘有什么用处？将其作为 npm 等 dep-manager 中的依赖项的全部意义在于能够控制新版本并轻松更新。如果你不在 GitHub 也没有 npm 上托管它，它会在哪里？

【参考方案1】：

package.json 允许您引用从 git 存储库下载的包，这可能是您在内部使用的包。见NPM documentation

格式示例：

git+ssh://[e-mail]:npm/npm.git#v1.0.27
git+ssh://[e-mail]:npm/npm#semver:^5.0
git+https://[e-mail]/npm/npm.git
git://github.com/npm/npm.git#v1.0.27

所以这会在你的 package.json 中给出如下内容：

"dependencies": 
   "privatepackage":"git://localgitserver/git/privatepackage.git"

【参考方案2】：

我建议您为此使用NX，它在应用程序之间共享代码非常简单

创建一个 NX 工作区

npx --ignore-existing create-nx-workspace MY_WORK_SPACE

您现在可以在该工作区中创建 multiplr 应用程序，它们可以是 Angular 应用程序或 React 应用程序或它们之间的混合

   ng add @nrwl/angular --defaults
   ng g @nrwl/angular:application app1 // generate first app
   ng g @nrwl/angular:application app2 //generate second app

它们在应用目录下可见

所以现在您有了自己的应用，您可以通过生成库在应用之间共享代码

 ng g @nrwl/angular:lib ui // ui is the name of your library

现在可以在 libs 目录下使用了

您现在可以通过生成组件和服务来处理您的库：

ng g component sharedComponent --project=ui --export

最后你可以通过导入你的 UiModule 在你的应用程序（app1 和 app2）中使用你的库

import  UiModule  from '@MY_WORK_SPACE/ui'; // @nameOfYourCreatedWorkspace/nameOfLibrary

@NgModule(
  declarations: [AppComponent],
  imports: [BrowserModule, HttpClientModule, UiModule], // import here
  providers: [],
  bootstrap: [AppComponent]
)
export class AppModule 

瞧！