angular ui 组件库的编译走过的坑和分享过程

根据 how-to-build-and-publish-an-angular-module （需要翻墙），我探索了一次 angular 组件编译过程。

但是根据 angular 的组件库编译过程，还算碰到了几个坑。

项目引用 TS 的位置问题

angular4 开始，不是任何位置的 ts 文件都能被 import。比如 ts 文件是在 /component/table.module.ts ，但是项目的文件是在 /src 里面。有些人肯定想问为什么这么做，主要是组件库分离展示用的页面的原因，剥离 /src 目录。原来我们公司的组件库和展示平台是混在一起的，非常不美观，而且效率很差。
项目编译的时候引用的静态资源 import 的问题。

有关静态资源的引用，比如 @Component 里面的 templateUrl 和 styleUrls ，在使用 ngc 编译的时候，是不会处理成字符串，最后变成 require('./table.component.css')，使用的时候变成从 http://localhost:4200/table.component.css 去导入，这样的情况对于编译的时候开发是对于有个展示平台的调试开发是很麻烦的。当时我知道的解决方案是所有的 style 和 template 写在 talbe.component.ts 文件里面。

碍于上面两个问题，让我在对一个 UI 组件库 的构造上花了不少功夫去探索。

在此感谢阿里的 NG-ZORRO-antd 的有关 静态资源 import 解决方法。

目前暂时做成的目录树是: ( 目录的问题，我自己待会会处理 )

.
├── build_scripts
├── common-css
├── dist
├── ui-datepicker
├── ui-table
├── ui
├── node_modules
├── package.json
├── package-lock.json
├── protractor.conf.js
├── README.md
├── src
├── tsconfig-datepicker-build.json
├── tsconfig.json
├── tsconfig-table-build.json
├── tsconfig-ui-build.json
└── tslint.json

目前是 ui ui-datepicker ui-table 是我们需要的组件库， src 是单独的用来调试的展示平台。

可以看见的组件库已经分离出了 /src 路径，所以我们需要把通过设置去修改，让 ts 能够引用我们的组件库文件。

解决方案如： missing-ts-files-due-to-npm-link

其实第一个问题并没有什么难度，我只是根据各种 UI 框架 的思路，把组件和展示页面分离开，让我们能调试编译都更为直观和方便。

第二个问题才是最麻烦的。ngc 的编译不会把 templateUrl 和 styleUrls 去进行处理，那么我们编译的时候必然要写成内联的形式，所有的都写在 .ts 文件中。

其中 style 如果引用统一的 css 库 的话那么我们就不需要写组件单独的 .css 文件了。但是 template 难免需要单独写在 html 里面，另外有个问题还有如果引用了图片，那么又是另外一回事了。（主要是老组件的升级，带着图片，很无奈。）

我翻了好几个 UI 框架 都是写成了内联的形式。所以最近一段时间都没什么好的方案去解决这个问题。

我最近突然翻到了阿里的 ng-zorro-antd 的 ui 框架，里面提供的思路是复制一份 /component 到 __gen_components ,然后编译之前运行 nodejs 的 inline-template.js 脚本，自己去处理 templateUrl 的问题。

然后我稍微改造了下他们的 js，支持了 styleUrls 和图片问题。如下

https://gist.github.com/xiao-po/ee27c25969354871bdc60518575bff8e

（主题里面不能用 gist ？好像没效果）

希望大家如果有什么相关的意见可以提一提，第一次处理这种问题，所以很多欠缺和不熟练的错误。如果有关目录的问题，我自己待会会处理。