Angular中开发一个代码库
在 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"
。