在多个项目中共享一个角度库

时间:2019-05-13 13:08:07

标签: angular angular6 angular7 angular-builder

我正在研究一个由后端+前端组成的7+项目。现在,我面临一个需求,我需要再创建一个包含前端+后端的项目。但是存在一些可重用的前端代码,可以在两个应用程序之间重用。

我的个人结构

Here

要求

Here

所以当我阅读有关图书馆概念的文章时,我可以找到

1)创建两个前端应用程序并共享一个公共库

我无法采用这种方法,因为我正在使用通过Visual Studio创建的asp.net角度模板项目(如Here所示)。两个应用程序(项目一和项目二)具有自己的FE + BE。因此,我无法将两个FE应用程序分组到同一文件夹中,并使它们使用共享库。

2)创建库并上传到npm并用作依赖项

我不能采用这种方法,因为代码是专有的,不能在网络外部共享。此外,没有本地公司npm注册中心可使用公司npm。

我知道可以使用库概念来完成。但是我不了解如何在多个应用程序中完成此操作。有人可以提供解决方案吗?谢谢!

3 个答案:

答案 0 :(得分:2)

考虑到您在OP中提到的目录方案,您可以通过本地路径添加库,如NPM文档中所述:Local Paths

- Root
|
 -- Project One 
|
 -- Project Two
|
 -- Library usued across both projects

例如,在 Project One package.json中,您可以将库添加为依赖项:

"dependencies" : {
  "my-shared-library" : "file:../Library usued across both projects",
}

P.S。我不确定库文件夹名称中是否允许使用空格,但是您可以尝试找出它。但我认为您还是不会使用空格。


替代解决方案和进一步的计划

  

2)创建库并上传到npm并用作依赖项   我不能采用这种方法,因为代码是专有的,不能在网络外部共享。此外,没有本地公司npm注册中心可使用公司npm。

这不是精确的。您确实可以采用这种方法作为替代解决方案,或者如果您认为将来可以在另一个项目中使用此库。如NPM文档中所述,有一种方法可以执行此操作:Git URLs as Dependencies

package.json

"dependencies" : {
  "my-shared-library" : "Git repo address here. There are various ways to specify an address. See below.",
}

如何可靠地添加库

  • 假设您为此库创建了一个新的存储库:
"dependencies" : {
  "my-shared-library" : "git+ssh://git@my-companys-treasure.com/my-shared-library.git",
}

这样,您甚至可以使用库的不同版本。假设您为4.2.0开发了一个新版本的库(即Project One),但Project Two在{{ 1}},您可以像这样添加它:

package.json
  • 或者,您可以在当前存储库中创建一个新分支,例如Project One(假设 Project One Project Two 都被推到了相同的分支存储库):
"dependencies" : {
  "my-shared-library" : "git+ssh://git@my-companys-treasure.com/my-shared-library.git#branch-v4.2.0",
}

还请注意,如文档中所述,您可以在URL中指定几种协议:

  

协议是git,git + ssh,git + http,git + https或git + file之一。

更多说明:

快乐的编码。

答案 1 :(得分:1)

您可以使用npm link

  

软件包文件夹中的npm链接将在全局文件夹{prefix} / lib / node_modules /中创建一个符号链接,该符号链接链接到执行npm link命令的软件包。

很快,如果您进入库文件夹并键入:

npm link

然后,您可以在要使用库的项目中移动并键入:

npm link <project-name>

<project-name>package.json文件中的名称。

这就足够了。如果您想在网络中共享库而不复制和粘贴源代码,那么,最好让您的公司为私有存储库付款:)

答案 2 :(得分:1)

1)。您可以尝试对库使用npm pack:

"scripts": {
   ...
   "build_lib": "ng build --prod example-lib",
   "npm_pack": "cd dist/example-lib && npm pack",
   "package": "npm run build_lib && npm run npm_pack"
}

2)运行“ npm pack”后,生成的文件将类似于:example-lib-0.0.1.tgz

3)您可以使用以下项目从其他项目进行安装:npm install ../ {some-paths} /example-lib/dist/example-lib/example-lib-0.0.1.tgz

在此处查看更多详细信息:https://blog.angularindepth.com/creating-a-library-in-angular-6-part-2-6e2bc1e14121