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"

发布时间:2022-07-18