angualr创建npm并打包

在使用angular开发项目的时候，有些东西为了方便调用和单独管理，需要把部分组件通过npm封装进行调用，那如何使用创建组件并打包为npm可以调用的呢？步骤如下：

一、创建厂库

1. 打开终端命令面板，输入命令创建一个项目为createLib

ng new createLib

 

2. 使用前端开发工具打开新建的 createLib 项目

 

3. 开发厂库

使用以下命令创建厂库，厂库在项目根目录下名字为projects的文件夹，在projects下有刚刚自己新建的仓库

ng g library header-test --prefix=ng

 

4. 在projects/src/lib文件夹下方会发现有一个header-test.component.ts文件，打开该文件修改组件的内容

 

5. 找到根目录下的angular.json配置文件中刚刚建的仓库，添加如下代码

 "configurations": {
            "production":{
              "project":"projects/header-test/ng-package.json"
            }
          }

 

6. 报错代码后在控制台输入如下代码进行打包

ng build --prod header-test

 

7. 打包成功后可以看到项目跟目录会存在一个dist文件夹

 

二、测试厂库

1. 在package.json文件中引入刚刚打包好的组件

打开跟目录下的package.json文件，在dependencies对象中添加如下代码

"header-test":"file:dist/header-test"

 

2. 在app.modules.ts文件中引入HeaderTestComponent组件

 

3. 在app.component.html文件中直接使用header-test组件

 

4. 保存代码后启动项目，就可以看到浏览器上显示打包好的组件内容了