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

Posted

技术标签:

【中文标题】在其他应用程序中重用 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://git@github.com:npm/npm.git#v1.0.27
git+ssh://git@github.com:npm/npm#semver:^5.0
git+https://isaacs@github.com/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 

瞧!

【讨论】:

以上是关于在其他应用程序中重用 Angular 2 模块而不发布到 npm?的主要内容,如果未能解决你的问题,请参考以下文章

如何编写可重用的组件/模块?

Angular 可重用模块和组件

Angular 2 组件未加载到不同的模块中

Angular2 无法使用延迟模块加载的自定义重用策略

Angular 模块导入的动态配置

重用 Angular 组件