Angular中开发一个代码库

发布时间:2022-07-18

Angular 的复杂项目中,我们可以对其拆分出不同功能模块进行开发,但是对于大型项目,或者我们直接考虑拆成库,将一部分的模块合起来组成一个库,方便复用,比如我们熟悉的各种设计组件库,就是一堆模块的合集。

模块

对业务进行分析后,划分边界,类似于后端微服务,将前端业务聚合拆分成一个个模块,模块内部持有着业务相关的模型,服务和组件。

$ ng g m test

使用 cli 可以直接建立 Angular 模块

库是一个集合,比如组件库,就是一系列组件模块的集合,还有一个逻辑库

$ ng g library test

使用 cli 直接创建 Angular

需要注意的是,不论是模块还是库,都需要在 Angular 项目的内部,所以在进行拆分时,需要额外创建 Angular项目来开发库,开发完成后直接发布,项目中使用npm引入,将库进行打包后发布到npm` 上,或者直接从本地目录进行安装

$ npm i test

$ npm i 文件发布路径

在开发时,我们可以使用watch来进行自动热重载

$ ng b --watch

这样,项目中引入库后,再对库进行修改,实际项目也可以实时重载。

可能出现的问题

在使用本地npm源安装时,我们再库中定义的组件引用时会出现绑定错误的情况,组件也无法正常加载,只需要在项目的 angular.json 文件中,找到 project > project-name > architect > build > options,添加一项 preserveSymlinks: "true"

其他阅读

TypeScript中的数组操作

我们在编码时,总会用到数组/列表这种类型,用于在单个对象中存储多个内容。在 TypeScript 中,也已经内置了该类型,方便我们来使用。

查看原文

本地部署DeepSeek大模型服务

之前的文章介绍了怎么对接DeepSeek的API实现自己的助手,但是依旧使用的DeepSeek官方服务器,在高峰期还是会出现超长延时的情况,本文介绍另一种思路,通过在本机上部署DeepSeek大模型服务来告别卡顿崩溃。

查看原文

Angular中制作一个按钮组件

本文将会介绍如何在Angular中制作一个自定义按钮组件,直接在原生按钮上添加特性即可使用,还提供多种颜色方便切换。

查看原文

网页小技巧

分享一些网页开发中实用的UI小技巧,快速完成页面搭建工作。

查看原文

WPF 入门系列1 环境搭建

本文为WPF 入门系列的第一篇,主要介绍如何搭建 WPF 开发环境。选择 .NET 8.0 作为运行时,工具介绍了 Visual Stido,Rider 和 Visual Studio Code。

查看原文