angular/ng-alain 如何修改UI/delon包组件

前言：

还是建议大家把angular看一下再来用。

目的：

最近有很多使用者不知道angular的开源UI库如何修改组件。确实对于后台系统来说有的时候UI库的组件不一定能完全满足我们的业务/设计需求。实地开发中在依赖于现有UI库包的同时，我们可能需要增加一部分功能但是又不想重新开发整个组件。本篇主要来解决这个问题。以ng-alain/alain 组件delon包来做这个演示。

重点：

对于开源组件包的修改问题好像有些争议，我的大概观点是这样，必须遵守原有开源组件包的协议同时，如有创收还是尽量donate一下作者吧，以表敬意。

正文：

产生这个问题的主要源头是对angular的组件化和angular如何实现组件化以及组件化的应用理解不够深刻。以下通过实际操作来演示，不讲概念只解决问题，理解多深请诸君自己把握。

1.下载ng-alain脚手架和Delon组件包。

2.复制delon/packages中所有文件到alain/share/delon文件夹下

3.alain/tsconfig.app.json；tsconfig.spec.json；tsconfig.json paths 添加  "@delon/*": ["app/shared/delon/*"]

4.去掉alain package.json delon包和ng-alain包的相关声明。

5.npm install

6.删除alain/delon包中 cli 和 schematics  以及其他文件夹中多余的 json，不要删除 ts结尾的 就好 。好像有个文件夹有string.js 记得不要删了，这个明显是有用的。

7.ng serve 查看报错的less引用 ，可以先全局搜索 node_modules/@delon 然后对应的文件改掉就可以了。

8.完成引入，这时候你就修改delon组件了。

9.你不会到这了都不知道怎么改吧，改代码不用我教了吧。对应改组件代码就可以了。！！！？？？。

结语

首先这只是个引子帮助理解组件化。angular是组件化渲染完全可以自己新增组件去替换模板的一些内容，这么引入其实有些繁琐了。

有人非要问为啥要包话，如果你是后端我想问你为啥要dll包和jar包呢，每次给你源码工程不就完了，说的好像很好合并升级一样。