当前位置: 首页 > news >正文

【Angular18】封装自定义组件

1. 准备组件

在这里插入图片描述

2. 创建打包文件夹及部分配置文件

在这里插入图片描述

  1. 创建 文件夹app-legalentities-root
  2. 拷贝组件源文件到新的文件夹app-legalentities中
  3. 创建文件 .npmrc
registry=发布地址always-auth=true
  1. 创建文件 ng-package.json
{"$schema": "./node_modules/ng-packagr/ng-package.schema.json","lib": {"entryFile": "public_api.ts"}}
  1. 创建文件 package.json
{"name": "xxx-xx-test","version": "0.0.9","scripts": {"ng": "ng","test": "ng test","packagr": "ng-packagr -p ng-package.json"},"private": true,"dependencies": {"@angular/animations": "^18.0.0","@angular/common": "^18.0.0","@angular/compiler": "^18.0.0","@angular/core": "^18.0.0","@angular/router": "^18.0.0","ng-zorro-antd": "^18.0.1","raise-ssh-test": "file:","rxjs": "~7.8.0","tslib": "^2.3.0","zone.js": "~0.14.3"},"devDependencies": {"@angular/animations": "^18.0.0","@angular/common": "^18.0.0","@angular/compiler": "^18.0.0","@angular/core": "^18.0.0","@angular/router": "^18.0.0","rxjs": "~7.8.0","tslib": "^2.3.0","zone.js": "~0.14.3"}
}
  • 创建文件 public_api.ts
export * from './app-legalentities/app-legalentities.component';
export * from './app-legalentities/app-legalentities.service';

3. 修改配置文件

  • 修改 public_api.ts,以下内容为导出的模块、service、modal等
export * from './app-legalentities/app-legalentities.component';
export * from './app-legalentities/app-legalentities.service';
  • 修改 package.json
"name": "app-legalentities-root", // 当前组件打包文件夹名称"version": "0.0.1", // 当前组件版本,每次发布后,下次发布前版本号+1"scripts": {...},"dependencies": {"@angular/animations": "^18.0.0", // 公共"@angular/common": "^18.0.0", //公共"@angular/compiler": "^18.0.0", //公共"@angular/core": "^18.0.0", //公共"@angular/router": "^18.0.0", //公共"ng-zorro-antd": "^18.0.1", // 当前组件依赖包"rxjs": "~7.8.0", //公共"tslib": "^2.3.0", //公共"zone.js": "~0.14.3" //公共},

4. down依赖包和安装打包指令

  1. 使用npm i 安装包
    在这里插入图片描述
  2. 执行 npm i ng-packagr //安装打包命令
npm i ng-packagr
  1. 配置 package.json 文件,删除 dependencies 和 devDependencies中的内容
{"name": "app-legalentities-root", `// 修改打包的名字`"version": "0.0.2",  `// 版本号 +1`"scripts": {"ng": "ng","test": "ng test","packagr": "ng-packagr -p ng-package.json"  `//配置打包命令`},"private": false // 这个要修改为false,下面的图忘记改了
}

在这里插入图片描述

5. 打包开始-生成dist文件

  1. 执行 npm run packagr 生成dist文件
npm run packagr
  1. 进入dist 文件目录-执行 `npm pack 生成一个压缩文件
npm pack

6. 安装vsts-npm-auth和配置

  1. 在app-legalentities-root文件夹下 安装 vsts-npm-auth
npm install -g vsts-npm-auth --registry https://registry.npmjs.com --always-auth false
  1. 在dist根目录下创建文件.npmrc,内容同2.3
  2. 在dist文件夹中配置vsts-npm-auth
vsts-npm-auth -config .npmrc

7. 发布打包文件

执行指令 npm publish

npm publish

8. 引入自定义组件

  1. 在使用组件的根目录下,即跟package.json同级创建文件.npmrc,内容同2.3
    在这里插入图片描述

  2. 安装组件 npm i app-country-select@0.0.1

npm i app-country-select@0.0.1

遇到的问题

  1. ‘npm run packagr’ 打包报错了
    解决方案:将 angular框架的 app-legalentities-root文件夹移到单独的位置,首先删除已经安装好的依赖包,然后执行第四步
    在这里插入图片描述

相关文章:

【Angular18】封装自定义组件

1. 准备组件 2. 创建打包文件夹及部分配置文件 创建 文件夹app-legalentities-root拷贝组件源文件到新的文件夹app-legalentities中创建文件 .npmrc registry发布地址always-authtrue创建文件 ng-package.json {"$schema": "./node_modules/ng-packagr/ng-pac…...

【流媒体】RTMPDump—RTMP_ConnectStream(创建流连接)

目录 1. RTMP_ConnectStream函数1.1 读取packet(RTMP_ReadPacket)1.2 解析packet(RTMP_ClientPacket)1.2.1 设置Chunk Size(HandleChangeChunkSize)1.2.2 用户控制信息(HandleCtrl)1…...

MySQL学习3之锁机制

一、什么是锁粒度? 锁粒度(Lock Granularity)是指在数据库中锁定数据资源的最小单位。锁粒度决定了锁定操作的范围,即锁定的是整个数据库、整个表、表中的某个分区、表中的某一页还是表中的某一行。 在MySQL中常见的锁粒度有&am…...

2004-2023年上市公司过度负债数据(含原始数据+计算结果)

2004-2023年上市公司过度负债数据(含原始数据计算结果) 1、时间:2004-2023年 2、来源:上市公司年报 3、指标:证券代码、证券简称、统计截止日期、是否剔除ST或*ST股、是否剔除当年新上市、已经退市或被暂停退市的公…...

[机器学习]--KNN算法(K邻近算法)

KNN (K-Nearest Neihbor,KNN)K近邻是机器学习算法中理论最简单,最好理解的算法,是一个 非常适合入门的算法,拥有如下特性: 思想极度简单,应用数学知识少(近乎为零),对于很多不擅长数学的小伙伴十分友好虽然算法简单,但效果也不错 KNN算法原理 上图是每一个点都是一个肿瘤病例…...

跨平台控制神器Escrcpy,您的智能生活助手

Escrcpy 是一款基于 Scrcpy 开发的图形化安卓手机投屏控制软件,它允许用户将 Android 手机屏幕实时镜像到电脑上,并使用电脑的鼠标和键盘直接操作手机,实现了无线且高效的操控。这款软件是免费开源的,支持跨平台使用,包…...

AR 眼镜之-开关机定制-实现方案

目录 📂 前言 AR 眼镜系统版本 开关机定制 1. 🔱 技术方案 1.1 技术方案概述 1.2 实现方案 1)开机 Logo 2)开机音效 3)开机动画 4)关机动画 5)关机弹窗 2. 💠 开机 Logo…...

论文阅读-Transformer Layers as Painters

1. 摘要 尽管大语言模型现在已经被广泛的应用于各种任务,但是目前对其并没有一个很好的认知。为了弄清楚删除和重组预训练模型不同层的影响,本文设计了一系列的实验。通过实验表明,预训练语言模型中的lower和final layers与中间层分布不一致…...

【STL】vector模拟实现

vector引入 ​​ vector的实现主要依靠三个成员变量:start,finish和end_of_storage 其中: [start]指向容器中的起始位置 [finish]指向容器中最后一个有效数据的下一个位置 [end_of_storage]指向容器中现有容量的位置 通过这三个指针,就使得vector的size…...

静态成员static关键字

定义: 静态成员在C类中是一个重要的概念,它包括静态成员变量和静态成员函数。 静态成员变量 1定义:静态成员变量是类的所有对象共享的变量。与普通成员变量相比,无论创建了多少个类的实 例,静态成员变量只有一份拷贝…...

本地项目git同步到线上

将本地创建的项目同步到你的 GitHub 账号线上仓库,可以按照以下步骤进行操作: 1. 在 GitHub 上创建一个新仓库 登录你的 GitHub 账号。点击右上角的加号(),然后选择 New repository。填写仓库的名称、描述等信息。选…...

Allegro如何导入DXF结构文件并生成板框(1)?

在用Allegro进行PCB设计时,需要导入DXF结构文件,由此来生成PCB的板框。 本节先讲Allegro如何导入DXF结构文件?下节讲如何利用导入的DXF结构文件生成OUTLINE板框。 Allegro如何导入DXF结构文件并生成板框(2)?-CSDN博客 详细操作方法如下: 1、选择菜单栏File 选择Import…...

Word密码忘记怎么办?三个密码找回工具帮你轻松找回密码

在工作当中,为了保护文档内容的安全,我们时常会设置密码。但有时会因为长时间未打开而忘记了密码,导致word文档无法打开。面对这种情况,我们该怎么办呢?下面小编就将给大家带来3个实用的密码找回工具,帮助大…...

使用 ABP 框架 (ASP.NET Boilerplate Project) 创建一个带有迁移功能的示例

使用 ABP 框架 (ASP.NET Boilerplate Project) 创建一个带有迁移功能的示例项目是一个很好的方式来学习如何结合高级框架进行开发。ABP 框架提供了强大的模块化和分层架构,适合构建复杂的企业级应用程序。 以下是一个使用 ABP 框架的完整示例项目,它展示了如何创建一个包含 …...

WPF图表控件库

LiveCharts: LiveCharts2预览版、内存管理不是很好,长时间持续更新的情况下,内存溢出,慎用 数据加载量不能太大(1000点左右 开始卡) 第一步:下载LiveChart NuGet包 第二步:引用&a…...

JAVA-WEB资源配置

用JAVA进行编写WEB项目时,我们一般需要对WEB进行统一配置,例如制定拦截路径、页面解析器、跨域配置、fastjson报文解析、文件上传大小配置等。 Getter Setter Configuration public class WebConfiguration extends WebMvcConfigurationSupport {priva…...

分享一个基于微信小程序的宠物服务中心的设计与实现(源码、调试、LW、开题、PPT)

💕💕作者:计算机源码社 💕💕个人简介:本人 八年开发经验,擅长Java、Python、PHP、.NET、Node.js、Android、微信小程序、爬虫、大数据、机器学习等,大家有这一块的问题可以一起交流&…...

时空自回归模型(STAR)及 Stata 具体操作步骤

目录 一、引言 二、文献综述 三、理论原理 四、实证模型 五、稳健性检验 六、程序代码及解释 附录 数据预处理 生成时空权重矩阵 一、引言 时空自回归模型(Spatial-Temporal Autoregressive Model,简称 STAR)在分析具有时空特征的数…...

SpringCloud集成XXL-JOB定时任务

项目场景: XXL-JOB是一个分布式任务调度平台,它能够帮助开发者轻松地实现任务的定时执行、任务调度和任务管理 接入步骤 下载XXL-JOB压缩包 链接: xxl-job XXL-JOB做为子模块 将压缩包解压,项目二级新建目录xxl-job,放入目录…...

《财经网》揭秘格行销量第一的秘籍!年销百万台,获千万级网红推荐!

随身WiFi已成为当下网红爆款神器,却为何频频陷入用户信任的危机?低价诱惑背后的限速陷阱、流量虚标,市场看似繁华,实则暗藏玄机。然而,就在这片混沌与质疑交织的迷雾中,一个品牌悄然崛起,以惊人…...

微信小程序之bind和catch

这两个呢,都是绑定事件用的,具体使用有些小区别。 官方文档: 事件冒泡处理不同 bind:绑定的事件会向上冒泡,即触发当前组件的事件后,还会继续触发父组件的相同事件。例如,有一个子视图绑定了b…...

C++:std::is_convertible

C++标志库中提供is_convertible,可以测试一种类型是否可以转换为另一只类型: template <class From, class To> struct is_convertible; 使用举例: #include <iostream> #include <string>using namespace std;struct A { }; struct B : A { };int main…...

2024年赣州旅游投资集团社会招聘笔试真

2024年赣州旅游投资集团社会招聘笔试真 题 ( 满 分 1 0 0 分 时 间 1 2 0 分 钟 ) 一、单选题(每题只有一个正确答案,答错、不答或多答均不得分) 1.纪要的特点不包括()。 A.概括重点 B.指导传达 C. 客观纪实 D.有言必录 【答案】: D 2.1864年,()预言了电磁波的存在,并指出…...

JVM垃圾回收机制全解析

Java虚拟机&#xff08;JVM&#xff09;中的垃圾收集器&#xff08;Garbage Collector&#xff0c;简称GC&#xff09;是用于自动管理内存的机制。它负责识别和清除不再被程序使用的对象&#xff0c;从而释放内存空间&#xff0c;避免内存泄漏和内存溢出等问题。垃圾收集器在Ja…...

2021-03-15 iview一些问题

1.iview 在使用tree组件时&#xff0c;发现没有set类的方法&#xff0c;只有get&#xff0c;那么要改变tree值&#xff0c;只能遍历treeData&#xff0c;递归修改treeData的checked&#xff0c;发现无法更改&#xff0c;原因在于check模式下&#xff0c;子元素的勾选状态跟父节…...

CocosCreator 之 JavaScript/TypeScript和Java的相互交互

引擎版本&#xff1a; 3.8.1 语言&#xff1a; JavaScript/TypeScript、C、Java 环境&#xff1a;Window 参考&#xff1a;Java原生反射机制 您好&#xff0c;我是鹤九日&#xff01; 回顾 在上篇文章中&#xff1a;CocosCreator Android项目接入UnityAds 广告SDK。 我们简单讲…...

uniapp微信小程序视频实时流+pc端预览方案

方案类型技术实现是否免费优点缺点适用场景延迟范围开发复杂度​WebSocket图片帧​定时拍照Base64传输✅ 完全免费无需服务器 纯前端实现高延迟高流量 帧率极低个人demo测试 超低频监控500ms-2s⭐⭐​RTMP推流​TRTC/即构SDK推流❌ 付费方案 &#xff08;部分有免费额度&#x…...

2023赣州旅游投资集团

单选题 1.“不登高山&#xff0c;不知天之高也&#xff1b;不临深溪&#xff0c;不知地之厚也。”这句话说明_____。 A、人的意识具有创造性 B、人的认识是独立于实践之外的 C、实践在认识过程中具有决定作用 D、人的一切知识都是从直接经验中获得的 参考答案: C 本题解…...

从实验室到产业:IndexTTS 在六大核心场景的落地实践

一、内容创作&#xff1a;重构数字内容生产范式 在短视频创作领域&#xff0c;IndexTTS 的语音克隆技术彻底改变了配音流程。B 站 UP 主通过 5 秒参考音频即可克隆出郭老师音色&#xff0c;生成的 “各位吴彦祖们大家好” 语音相似度达 97%&#xff0c;单条视频播放量突破百万…...

前端打包工具简单介绍

前端打包工具简单介绍 一、Webpack 架构与插件机制 1. Webpack 架构核心组成 Entry&#xff08;入口&#xff09; 指定应用的起点文件&#xff0c;比如 src/index.js。 Module&#xff08;模块&#xff09; Webpack 把项目当作模块图&#xff0c;模块可以是 JS、CSS、图片等…...