Angular创建自己的库发布到npm上使用

已于 2023-04-05 21:13:40 修改
阅读量776 收藏 1
点赞数
分类专栏： Angular 文章标签： angular.js javascript 前端
于 2023-04-05 21:02:58 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lvxinaidou/article/details/129652639
版权

@Angular创建自己的库发布到npm上使用

1.创建Angular Library

1.1创建项目工程

	ng new test-commonlib-ui --no-create-application
	cd test-commonlib-ui
	ng g application test-commonlib-app-ui

1.2配置angular.json

  1. 在projects文件下新建lx-custom-ui文件夹
  2. 修改newProjectRoot
"newProjectRoot": "projects/lx-custom-ui",
  1. 配置以@开头的库名字
"@lx-custom-ui/test-commonlib-ui": {
      "projectType": "library",
      "root": "src",
      "prefix": "lx",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:ng-packagr",
          "options": {
            "project": "projects/lx-custom-ui/ng-package.json"
          },
          "configurations": {
            "production": {
              "tsConfig": "projects/lx-custom-ui/tsconfig.lib.json"
            },
            "development": {
              "tsConfig": "projects/lx-custom-ui/tsconfig.lib.json"
            }
          },
          "defaultConfiguration": "production"
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "projects/lx-custom-ui/src/test.ts",
            "tsConfig": "projects/lx-custom-ui/tsconfig.spec.json",
            "karmaConfig": "projects/lx-custom-ui/karma.conf.js"
          }
        }
      }
    }
  1. 执行后的文件结构
    在这里插入图片描述
    在这里插入图片描述

1.3配置Library工程

  1. 添加4个文件ng-package.json, package.json,public-api.ts,tsconfig.lib.json
  2. 文件结构
    在这里插入图片描述
  3. 具体代码
    a). ng-package.json
{
  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
  "dest": "../../dist/@lx-custom-ui/test-commonlib-ui",
  "deleteDestPath": true,
  "lib": {
    "entryFile": "public-api.ts"
  }
}

b). package.json

{
    "name": "@lx-custom-ui/test-commonlib-ui",
    "version": "1.0.0",
    "peerDependencies": {
        "@angular/core": "^12.0.0 || ^13.0.0 || ^14.0.0 || ^15.0.0",
        "@angular/common": "^12.0.0 || ^13.0.0 || ^14.0.0 || ^15.0.0",
        "@angular/forms": "^12.0.0 || ^13.0.0 || ^14.0.0 || ^15.0.0",
        "rxjs": "^6.0.0",
        "zone.js": "^0.10.2"
    }
}

c). public-api.ts

export * from '@lx-custom-ui/test-commonlib-ui/my-first-table';

d). tsconfig.lib.json

{
  "compilerOptions": {
    "declaration": true,
    "target": "es2015",
    "module": "es2015",
    "baseUrl": ".",
    "stripInternal": true,
    "emitDecoratorMetadata": false,
    "experimentalDecorators": true,
    "moduleResolution": "node",
    "outDir": "../build",
    "rootDir": ".",
    "lib": [
      "es2015",
      "dom",
      "es2017"
    ],
    "skipLibCheck": true,
    "types": [],
    "paths": {
      "@lx-custom-ui/test-commonlib-ui/*": [
        "projects/lx-custom-ui/*/src/public-api"
      ]
    }
  },
  "angularCompilerOptions": {
    "annotateForClosureCompiler": true,
    "skipTemplateCodegen": true,
    "strictMetadataEmit": true,
    "fullTemplateTypeCheck": true,
    "strictInjectionParameters": true,
    "flatModuleId": "AUTOGENERATED",
    "flatModuleOutFile": "AUTOGENERATED"
  },
  "files": [
    "./public-api.ts"
  ]
}

1.4修改tsconfig.json配置

 "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "noImplicitOverride": true,
    "noPropertyAccessFromIndexSignature": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true,
    "sourceMap": true,
    "declaration": false,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "moduleResolution": "node",
    "importHelpers": true,
    "target": "ES2022",
    "module": "ES2022",
    "useDefineForClassFields": false,
    "lib": [
      "ES2022",
      "dom"
    ],
    "paths": {
      "@lx-custom-ui/test-commonlib-ui/*": [
        "projects/lx-custom-ui/*/src/public-api"
      ]
    }
  },

注意，一定要修改paths，否则模块引入会报错的。
在这里插入图片描述

1.5 执行ng g library命令

  1. 创建自己的库
ng g library my-first-table
  1. 配置lib下的package.json， 注意这里的版本要和整个引用的项目版本一致，不然会有依赖报错。
{
  "name": "my-first-table",
  "version": "0.0.1",
  "peerDependencies": {
    "@angular/forms":"~12.2.0 || ^14.0.0 || ^15.2.0 || ~12.2.18",
    "@angular/common":"~12.2.0 || ^14.0.0 || ^15.2.0 || ~12.2.18",
    "@angular/core":"~12.2.0 || ^14.0.0 || ^15.2.0 || ~12.2.18",
    "ng-zorro-antd":"^12.1.0 || ^14.0.0 || ^15.1.0 || ~12.2.18",
    "rxjs": "~6.6.0 || ~7.5.0 || ~7.8.0",
    "zone.js": "~0.11.4 || ~0.11.4 || ~0.12.0"
  },
  "dependencies": {
    "tslib": "^2.3.0",
    "@angular/forms":"~12.2.0 || ^14.0.0 || ^15.2.0 || ~12.2.18",
    "@angular/common":"~12.2.0 || ^14.0.0 || ^15.2.0 || ~12.2.18",
    "@angular/core":"~12.2.0 || ^14.0.0 || ^15.2.0 || ~12.2.18",
    "ng-zorro-antd":"^12.1.0 || ^14.0.0 || ^15.1.0 || ~12.2.18",
    "rxjs": "~6.6.0 || ~7.5.0 || ~7.8.0",
    "zone.js": "~0.11.4 || ~0.11.4 || ~0.12.0"
  },
  "sideEffects": false
}

  1. 自动生成文件结构
    在这里插入图片描述

  2. 具体代码（有第三方组件一定要应用module）
    my-first-table.module.ts

import { NgModule } from '@angular/core';
import { MyFirstTableComponent } from './my-first-table.component';
import { NzTableModule } from 'ng-zorro-antd/table';
import { FormsModule } from '@angular/forms';
import { CommonModule } from '@angular/common';
import { BrowserModule } from '@angular/platform-browser';

@NgModule({
  declarations: [
    MyFirstTableComponent
  ],
  imports: [
    BrowserModule,
    NzTableModule,
    FormsModule,
    CommonModule,
  ],
  exports: [
    MyFirstTableComponent
  ]
})
export class MyFirstTableModule { }

在这里插入图片描述

2.与Library同一个项目文件下测试

2.1angular.json结构

在这里插入图片描述

2.2测试项目使用

  1. 引用模块
    在这里插入图片描述

  2. 可以修改html的前缀
    在这里插入图片描述
    在这里插入图片描述

  3. 使用自己定义的html
    在这里插入图片描述

  4. 运行命令，结果如下
    在这里插入图片描述
    在这里插入图片描述

3. 发布Angular Library

1.1build包的命令

ng build @lx-custom-ui/test-commonlib-ui

1.2发布dist文件夹

  1. 登录npm(先到官网上注册一个自己的npm包， 注意发布@开头的，要与npm用户名一致，你也可以创建组织)
npm login
  1. 发布dist/@lx-custom-ui/test-commonlib-ui
npm publish --access public
  1. 每次发布版本要更新
    在这里插入图片描述
  2. 发布成功
    在这里插入图片描述

1.3npm官网上有自己发布的包

在这里插入图片描述
在这里插入图片描述

4.使用自己的Angular Library

1.1tgz方式

  1. 打包成tgz，手动复制到其他项目中
"npm-pack": "cd dist/@lx-custom-ui/test-commonlib-ui && npm pack",
"npm-lib-install": "npm install ./dist/@lx-custom-ui/test-commonlib-ui/lx-custom-ui-test-commonlib-ui-3.0.3.tgz"
  1. 配置好后， 在根文件下，执行
npm run build-lib
npm run npm-pack
npm run npm-lib-install
  1. 生成tgz在dist下
    在这里插入图片描述
    4.复制tgz到任意项目，任意目录下，只要路径正确，都能本地安装（本地安装命令"npm-lib-install": “npm install ./dist/@lx-custom-ui/test-commonlib-ui/lx-custom-ui-test-commonlib-ui-1.0.0.tgz”）， 执行
 "dependencies": {
    "@lx-custom-ui/test-commonlib-ui": "file:dist/@lx-custom-ui/test-commonlib-ui/lx-custom-ui-test-commonlib-ui-3.0.3.tgz",
  },
  1. 结果如下：在测试项目下安装本地的tgz文件在这里插入图片描述

1.1npm方式

  1. 任意项目下，前提angular版本要对应，执行命令
npm i @lx-custom-ui/test-commonlib-ui

在这里插入图片描述

  1. 引入模块
    在这里插入图片描述

  2. 使用自己的html
    在这里插入图片描述

5.github代码仓库

  1. library github code
  2. angular project use 自己的library

6.学习地址

angular create library

lvxinaidou
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
创建并发布一个Angular组件库
yangliusi的博客
08-25 1329
文章目录创建并发布一个Angular组件库创建组件库开发一个按钮组件测试组件发布组件发布到私有的npm仓库中发布到公共的npm库生成tar文件 创建并发布一个Angular组件库 随着公司业务的不断发展，不同产品或团队之间公用的组件越来越多，这时候就需要一套支持内部使用的组件库。本文将会介绍如何创建并发布一个Angular组件库。 创建组件库 首先我们来创建一个Angular项目，用来管理组件的展示和发布。用以下命令来生成一个cindylib的项目。ng new cindylib --createAppl
angular7封装组件上传到npm库，并引用到项目上
01-08
angular7上传包到npm库 一、创建angular项目和组件 ng new myFirstDemo //angular-cli新建项目 ng g m component //新建模块 ng g c component/drop-down //新建组件 //提示：必须在组件里的drop-down.module.ts声明和导出 @NgModule({ imports: [ CommonModule ], declarations: [DropDownComponent], exports: [DropDownComponent] //新添加的部分 }) 二、安
封装Angular 组件 并发布到 npm
yinyueyu007的博客
02-25 646
创建项目 ng new yhCascade 2. 创建第三方库 // 切换目录 cd yhCascade ng g library zero --prefix zm 3. 开发第三方包 cd projects\cascade\src\lib <yh-cascade></yh-cascade> 4.第四部 发布 // 切换至第三方包根目录下 cd projects/cascade // 构建 ng build cascade 5. 登录npm // 需要登录(npm l.
Angular 开发第三方组件+打包+npm发布（个人记录）
qq_40020447的博客
09-29 1629
写在前面 本文内容仅为个人记录，不一定适用所有读者； 本人技术水平有限，很多知识并不懂，所以内容对有的大佬来说很肤浅； 准备工作用到了docker，因为我自己本地电脑跑 build 会报错，实在解决不了； 勿喷，谢谢； 最终成果展示 一. 环境及工具 win10 Angular 7.1.0 docker docker 镜像 ：kodear/angular7 vsCode 正文开始 1. 准备docker环境 Tips: 如果你本地能跑起angular项目，并build不会报错的话，可以不需要
自定义angular library
最新发布
ITronger的专栏
10-31 104
3.功能完成后，需要通过ng build my-lib进行编译，编译后会在dist目录下生成my-lib目录，就是最终的angular library.执行完后，会生成要给projects文件夹，下面的my-lib/src/lib目录下会有my-lib组件。2. 若组件下需要 使用图片或者文件，可以在my-lib下创建assets文件夹，然后在ng-package.json下进行配置assets。然后可以在dist/my-lib目录下执行npm publish进行发布。
使用typescript开发angular模块并发布npm包
01-21
本文介绍了使用typescript开发angular模块并发布npm包，分享给大家，具体如下： 创建模块 初始化package.json文件 执行命名 npm init -y 会自动生成package.json文件如下，name默认为文件夹名称 { name: MZC-...
使用Angular-CLI构建NPM包的方法
12-09
2.创建第三方包（我们要构建的NPM包） cd PROJECT_NAME # LIBRARY_NAME ：创建的包的名称(如 zorro) # PREFIX ：组件前缀(如 nz-zorro 的组件前都是 nz-) ng g library LIBRARY_NAME --prefix PREFIX 上面命令执行...
angular-component-library:该存储库旨在了解如何使用Angular Eco System构建最先进的npm就绪组件库
05-12
AngularComponentLibrary 该项目旨在了解如何创建可在角应用中使用的npm就绪角组件库。 之后，为演示生成一个角度应用程序，我们将按照以下步骤创建组件库通过运行以下命令来生成库项目ng generate library ratify -...
ngx.tools：:high_voltage:发现NPM上托管的任何Angular modulelibraryschematicpackage
02-03
Ngx。工具该项目是搜索引擎的源代码。会费该项目是使用生成的。开发服务器为开发服务器运行ng serve 。...建立运行ng build来构建项目。 构建工件将存储在dist/目录中。 使用--prod标志进行生产构建。
自定义封装组件打包发布到npm（ts）
菠萝萝的博客
08-23 1874
自定义组件的打包和发布（npm）
angular项目基于ng-alain和ng-zorro等框架实现开发公共组件并且打包上传成npm包
qq_41844127的博客
02-04 603
angular项目基于ng-alain和ng-zorro等框架实现开发公共组件并且打包上传成npm包 前言: 公司开发的项目都是angular框架配合ng-alain,ng-zorro等组件一起使用, 我们自己开发了一些公共组件,这些组件时长需要修改bug,扩展功能什么的,而多个项目都在用的时候就有很多个版本需要维护,非常不利于扩展,所以我们打算将这些公共组件开发成npm包上传,使用的项目直接像使用其他框架包一样,这样就只有一个地方需要维护了. 1. 开发公共组件的项目模板https://downl.
Angular学习笔记一之项目构建与模块创建
weixin_45855469的博客
04-18 1969
Angular是三大框架之一，是最早开始出现并流行的框架。它是使用HTML、CSS、TypeScript编写的一个重量级框架，为大型应用开发而设计。使用Angular开发出来的客户端应用是高度模块化的。Angular提供了cli工具，组件和模块都可以使用cli工具提供的命令行来创建。Angular对于状态管理是相当到位的，可以轻松实现组件之间的数据共享。
NPM组件封装+发布
qq_35037148的博客
01-28 424
3. src下新建components文件夹，在内部书写组件内容，新建index.js文件导出组件。6. 保持NPM官网登陆状态（必须），然后在终端执行。然后输入 用户名、密码、邮箱、邮箱验证码，然后回车。5. 修改webpack.config.js。终端输入 npm publish，进行发布。初始化项目，进入项目、安装依赖、启动项目。4. 修改pageage.json。7. NPM官网操作权限和名称。1. NPM官网注册、登录。
如何发布angular模块到npm
Litwak
04-17 1092
发布angular npm包流程发布后的项目发布过程新的项目新建library实现功能配置编译发布到NPM注册然后在终端输入发布使用InstallUseexample 发布后的项目 这是我第一次创建npm包，实现了clone-deep功能(clone-deep不需要创建angular module， 项目仅做测试学习)。 发布过程 新的项目 ng new angular-clone-deep ...
Angular封装组件
lvxinaidou的博客
04-02 1723
Angular封装组件 Angular的页面结构就是多个组件的结合，由父组嵌套子组件，组件之前互相跳转形成的一个框架整体。 封装一个组件相当于做一个子组件，这样父组件就可以通过调用这个子组件的方式使用这个子组件的功能及其样式。 现将组件分为两种： （1）功能组件（占有页面少的一个功能整体）：如搜索框、下拉框； （2）页面组件（占有比较大的页面篇幅）：如时间轴、新增页面、编辑页面。 做好一个组件，在...
ng-zero和ng-alain 使用ng-packagr发布
weixin_34345560的博客
07-28 529
alain 打包发布组件，ng-zero也可以用 安装依赖 目录结构 文件具体内容 ng-package.json package.json public-api.ts 要发布的组件 配置angular.json 测试模块 alain 打包发布组件，ng-zero也可以用 本文参考了 https://angular...
Angular6 打包组件和模块发布到npm，并使用
m0_37729058的博客
01-09 6248
Angular6 打包组件和模块发布到npm，并使用组件
发布Angular 模块 到 npm
qq_33484961的博客
09-30 745
来源：https://blog.csdn.net/yiershan1314/article/details/79999726 这一段时间一直在写自己的组件 就突发奇想把这些组件放到npm库上去。所以找来资料学习并记录一下 生成package.json npm init -y 生成一个package.json文件 内容如下 { "name": "npm", "version":...
创建angular项目时 npm ERR! ERESOLVE unable to resolve dependency tree
06-12
这个错误通常是由于依赖包版本不兼容导致的。你可以尝试以下几个解决方案： 1. 更新npm版本至最新版。 2. 清除npm缓存，可以使用以下命令：npm cache clean --force。 3. 删除项目中的node_modules文件夹，并重新安装依赖，可以使用以下命令： ``` rm -rf node_modules npm install ``` 4. 如果以上方法均无效，可以尝试安装npm-check-updates插件，使用以下命令升级依赖包版本： ``` npm install -g npm-check-updates ncu -u npm install ``` 希望这些方法能够解决你的问题。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值