Angular第三方库开发实践

原文连接

从接触Angular到现在，作了很多Angular项目，使用了很多第三方库，可是却没有勇气触碰第三方库的开发，一是没有太多的积累，二是没有找到合适的“Hello world”的文档。 最近有机会要把项目中经常使用的Component作成第三方库，方便更多的项目使用。根据网上找到的各类资料，加上走的各类弯路，终于摸清楚了开发第三方库的流程。

搭建项目框架

为了方便第三方库的开发，咱们首先要建立一个主应用A：

ng new projectnameA    //建立主应用
复制代码

主应用A建立好以后，建立Lib：

cd projectnameA
ng g library libName --prefix  prefixName //--prefix是Lib使用的前缀
复制代码

上述命令会对主应用以下改变：

1. 在主应用A下建立 projects/libName 目录，并将Lib的相关文件放于此；

2. 在 angular.json 文件中添加 libName 项目；

   "libName": {
       "root": "projects/libName",
       "sourceRoot": "projects/libName/src",
       "projectType": "library",
       "prefix": "dteam-top",
       "architect": {
       "build": {
           "builder": "@angular-devkit/build-ng-packagr:build",
           "options": {
           "tsConfig": "projects/libName/tsconfig.lib.json",
           "project": "projects/libName/ng-package.json"
           },
           "configurations": {
           "production": {
               "project": "projects/libName/ng-package.prod.json"
           }
           }
       },
       "test": {...},
       "lint": {...}
       }
   }
   复制代码

   其中： root为Lib的根目录； sourceRoot为Lib的源代码目录； projectType为项目的类型； prefix为组件使用的前缀； architect为Angular的构建配置，可设置 build、test 和 lint。

3. 在 package.json 文件中添加 ng-packagr 依赖；

4. 在 tsconfig.json 文件中添加 libName 库的引用；

   {
       ...
       "paths": {
           "libName": [
               "dist/libName"
           ]
       }
       ...
   }
   复制代码

这样项目框架就搭建好了，能够开始写Lib的代码了。

Lib开发

在Lib中须要注意一个文件：public_api.ts，这个文件是Lib的入口文件，取代了以前使用的index.ts文件，其中定义了Export的内容：

export * from './app/libName.component';
export * from './app/libName.module';
复制代码

主应用A要使用Lib，在app.module.ts文件中直接引用：

import { LibNameModule } from '../../../../projects/libName/src/app/libName.module'

imports: [
    ...
    LibNameModule,
    ...
]
复制代码

对于Lib中使用的其余组件，可在主应用A下经过npm安装，这里提醒下，这里是安装到主应用A的目录下，修改的是主应用A的package.json和package.lock.json文件。 这样，就能够开发本身的Lib了。

测试Lib的安装

Lib开发好以后，须要先在本地试安装。这时有疑问了，Lib中用到的其余组件的引入都是在主应用A的package.json中声明的，这对于Lib是不对滴。 细心的开发者会发现，在Lib的目录下也有一个package.json文件，其缺省内容为：

{
    "name": "libName",
    "version": "0.0.1",
    "peerDependencies": {
        "@angular/common": "7.0.2",
        "@angular/core": "7.0.2",
    }
}
复制代码

咱们须要把这个文件补充完整，将Lib中用到的其余第三方组件在peerDependencies中引入，并将Lib的其余属性也加入。例如：

{
    "name": "ligName",
    "version": "0.0.1",
    "keywords": ["keyword1","keyword2"],
    "license": "MIT",
    "author": "authorName",
    "description": "description",
    "peerDependencies": {
        "@angular/common": "7.0.2",
        "@angular/core": "7.0.2",
        "@angular/forms": "7.0.2",
        "@angular/router": "7.0.2",
        "@angular/cdk": "7.0.2",
        "@angular/material": "7.0.2",
        "ngx-spinner": "7.0.0",
        "ngx-clipboard": "12.0.0",
        "ethers": "4.0.27",
        "rxjs": "6.3.3"
    }
}
复制代码

同时，还能够添加一个README.md文件，介绍Lib的使用方法。 准备工做作好以后，将Lib编译成产品：

ng build libName --prod
复制代码

编译后的文件会放置在主应用A的dist/libName目录下。另外建立一个Angular应用B，在此应用下执行：

npm install 主应用A/dist/libName
复制代码

安装时会对libName使用的其余第三方库给出相似以下的提示：

npm WARN libName@0.0.1 requires a peer of @angular/core@^7.2.0 but none is installed. You must install peer dependencies yourself.
复制代码

根据提示，自行安装缺乏的组件便可。 在应用B的package.json中会看到对libName的引入：

"libName": "file:../projectnameA/dist/
复制代码

在应用B的package-lock.json文件中加入以下内容：

"libName": {
    "version": "file:../projectnameA/dist/libName",
    "requires": {
    "tslib": "^1.9.0"
    },
    "dependencies": {
    "tslib": {
        "version": "1.9.3",
        "bundled": true
    }
    }
}
复制代码

在应用B的app.module.ts文件中引入libName：

import { LibNameModule } from 'libName';

...
imports: [
    ...
    LibNameModule,
    ...
],
...
复制代码

在应用B中能够测试libName可否正常使用。

Lib发布

上述过程结束后，就能够将应用发布到npm上。准备工做：

1. 在npm上注册帐号。
2. 在命令行下执行：npm adduser，将帐号添加到本地。

好了，能够发布libName了。进入到projectnameA/dist/libName目录下执行：

npm publish
复制代码

看到了发布成功提示，还有点小激动。进入到npm中，能够看到已经发布成功的libName。 若是想删除这个libName，可使用以下命令：

npm unpublish libNamet@0.0.1 --force
复制代码

这里须要特别注意的是：删除后的libName，在24小时内不能再发布了，见以下提示：

npm ERR! libName cannot be republished until 24 hours have passed.
复制代码

总结

npm为第三方库的开发还提供了一些便利的方法，如npm link命令。这些都有待咱们在从此的开发中摸索和体验，以便更好的打磨精品组件。

附录

在开发过程当中遇到了几个错误，现汇总以下：

权限错误：

npm ERR! publish Failed PUT 403
npm ERR! code E403
npm ERR! You do not have permission to publish "libName". Are you logged in as the correct user? : libName
复制代码

解决办法，执行： npm adduser

libName若注入了其第三方的服务，主应用调用时出现以下错误：

Error: inject() must be called from an injection context
复制代码

解决方法，在主应用的angular.json文件中添加：

"projects": {
    "projectName": {
        "architect": {
            "build": {
                "options": {
                    "preserveSymlinks":true
                },
            },
        }
    }
    }
},
复制代码

若libName定义了本身的route，须要在主应用中注入RouterModule。