Nx和ng-packagr，Angualr 打包组件，发布使用

此项目是使用Angular CLI 和 Nrwl Nx生成的。

现在开始安装项目和完成配置
Nx是企业级Angular应用程序的开源工具包。
Nx旨在帮助您创建和构建企业级Angular应用程序。 它为应用程序项目结构和模式提供了一种有见地的方法。

总结来说就是一个打包的工具

快速入门和文档

观看关于如何开始使用Nx的5分钟视频。

生成你的第一个应用程序

打开cmd命令提示符：

安装：

全局安装  yarn global add @angular/cli 或  npm install -g @angular/cli
全局安装  yarn global add @nrwl/schematics 或  npm install -g @nrwl/schematics
全局安装  yarn global add @nrwl/nx 或  npm install -g @nrwl/nx
创建Nx工作区的最简单方法是运行：
ng new workspace --collection=@nrwl/schematics
workspace可以换成你喜欢的项目名

在项目下安装：yarn add @nrwl/schematics 或 npm install @nrwl/schematics

配置package.json

在package.json中添加如下内容
{
    ......
    "distributionManagement": {
        "releaseRegistry": "服务器地址:端口/repository/npm/",
        "snapshotRegistry": "服务器地址:端口/repository/npmHosted/"
    },
    "publishConfig": {
        "registry": "服务器地址:端口/repository/npmHosted/"
    },
    "scripts": {
        .....
        "build:lib": "ng-packagr -p libs/telin-ewifi-gis/package.json"
    },
    "private": false
    ......
}

创建应用程序

将新应用程序添加到Nx Workspace是通过使用Angular CLI generate命令完成的。 Nx有一个名为app的示意图，可用于将新应用程序添加到我们的工作区中：

在项目中添加： ng generate app myapp 或 ng generate application myapp # same thing， 我只使用过第一种方法创建过程序，建议第一种。第二种可以自己尝试下。
myapp可以换成你喜欢的名称

创建一个Lib

通过使用Angular CLI生成命令将新库添加到Nx Workspace，就像添加一个新应用程序一样。
在项目中添加： ng generate lib mylib 或 ng generate library mylib # same thing， 我只使用过第一种方法创建过程序，建议第一种。第二种可以自己尝试下。
mylib可以换成你喜欢的名称

如此，以上步骤就将项目的开发环境和测试环境就配置好了，下面我们可以进行编码了

运行

ng serve 或者自定义端口号 ng serve --port 1200    // 1200为自定义的端口号

打包 build

在mylib创建package.json

{
    "$schema": "../../node_modules/ng-packagr/package.schema.json",
    "name": "telin-ewifi-gis",                // 创建的组件名
    "version": "2.0.0",                        // 版本
    "ngPackage": {
        "lib": {
            "entryFile": "src/index.ts"        // 入口
        },
        "dest": "@common/telin-ewifi-gis"      // 打的包命名为@common
    }
}
package.json 用来配置 ng-packagr 并告诉它去哪里找 index.ts 文件，这个文件通常是用来导出我们组件库的功能模块。（备注：index.ts 文件是 Angular 组件的使用约定）
运行 build:lib命令，我们在之前已经配置好了。
编译之后包为：
@common
    telin-ewifi-gis
        lib
        index.d.ts
        package.json
        telin-ewifi-gis.d.ts
        ......
在接着，我们进入 telin-ewifi-gis文件:
运行命令 npm pack，得到了： telin-ewifi-gis-2.0.0.tgz

上传至私服

 npm publish

可能有问题，我一般都是这么发布的

将这个包上传到npm私服，npm私服地址

更多帮助
要在Angular CLI上获得更多帮助，请使用帮助或查看Angular CLI README自述文件。