使用ng-alain遇到的一些问题和总结

       最近一个项目是用springboot作为后台框架，angular作为前端框架的方式进行开发的，之前一直想找一个比较好使的前端模板框架来使用，因为不懂ui也不擅长去修改样式啥的，希望侧重于现有工具的使用，更多的进行业务的开发而不是样式的调整。ng-alain是阿里出品的，之前也想用layUI，但是网上有说angular跟layUI搭配使用的话会有一些比较麻烦的问题，比如说事件的监听啥的不好触发，当然我自己没去测试，最后选到了ng-alain，其实还有一个ng-zorro，ng-alain是在ng-zorro的基础上多封装了一下，更倾向于配置的模式进行开发，我两个都有用到，但仅限于用到的控件。废话很多。。。

       第一个问题： 使用ng-zorro的list组件的html页面的数据是从是ts文件的一个数组中获取的，比如说datas[...]，想要往datas[]

添加数据时，如果是直接往datas[ ]里面push数据的话，数据是不会到 datas[] 的，我们需要新建一个临时的变量数组，比如说datasCopy[ ], 先往datasCopy[ ] push完数据后，再将datasCopy[ ] 赋给datas[...]，html页面再从这个数据源获取数据，这样才会生效；

       第二个问题：使用angular的前端代码要放到springboot项目里面的话，需要使用ng build构建，构建后的代码默认是会放在跟src或node_modules同级的dist文件夹里面，再拷贝dist文件夹到springboot 项目的resource下的templates文件夹里面的，这里想要说的并不是怎么在springboot中配置这个dist的问题，而是在两种build方式下我遇到的一个问题，挺坑的。

       ng-alain框架有自带的登录页面，这个页面的登录操作链接可以使用框架的mock数据登录，也可以是使用映射到springboot后台的接口进行登录，因为我之前还没有去写这个接口，所以一直都是使用ng-alain的mock数据直接登录的，然后我一直用ng build的指令打包成dist到springboot项目中使用，一直没有出现什么问题，但是最后有几次我用的是ng build --prod --aot这个指令的方式进行打包dist，dist文件放到springboot项目中运行起来后，卡在登录页面上，无法用ng-alain默认的初始账号密码登录，这个让我觉得很奇怪，因为之前一直都没有出过这样的问题。

       其实原因挺简单的，就是build的方式决定了是否使用mock数据，而ng-alain的模拟登录的账号密码是放在_mock文件夹的user.ts中的，ng build --prod --aot的打包方式，不会将这个mock文件夹打包进去，而ng build的方式会，这就是我用前者的方式打包时无法使用模拟账户的原因。

       最后我是自己写了一个后端的接口用来做登录的操作，仍然使用ng build --prod --aot的打包方式。这里其实还有另外一种解决的办法继续使用mock数据，在ng-alain框架里面有一个delon.module.ts文件，这个文件里面有几行代码：

import { environment } from '@env/environment';
const MOCK_MODULES = !environment.production
  ? [DelonMockModule.forRoot({ data: MOCKDATA })]
  : [];

这里的const MOCK_MODULES = !environment.production ? [DelonMockModule.forRoot({ data: MOCKDATA })]: [];意思就是当

!environment.production时，也就是环境不是生产环境时使用模拟数据，反之不使用，而environment.production属性就定义在ng-alain的environments文件夹的environment.prod.ts和environment.ts中：

// This file can be replaced during build by using the `fileReplacements` array.
// `ng build ---prod` replaces `environment.ts` with `environment.prod.ts`.
// The list of file replacements can be found in `angular.json`.

export const environment = {
  SERVER_URL: `./`,
  production: false,
  useHash: false,
  hmr: false,
};

// `ng build ---prod` replaces `environment.ts` with `environment.prod.ts`.这句话说明了打包指令的区别。

 

       第三个问题就是，在ng-alain中链接的前面都会加上一个#号，让我觉得很奇怪，其实这个也在environment.ts文件定义了，就是useHash属性，设为false就不会有#号了，但是具体为什么要这么做，我还没去研究，有知道的朋友可以指教。

       最后，因为个人水平有限，也刚开始使用ng-alain不久，虽然都是亲身经历，但是观点问题都可能有错，希望大家不吝赐教，共同进步。（转载请注明出处，谢谢~）