Angular10+Zorro10整合

        随着前后端分离的火爆，以及npm生态的成长，各种前端开发越来越火爆，加上之前就接触过angular、ionic、uniapp等等，做过移动端的H5开发，这次想着整理一把PC版本的前后端分离。

       目前angular以及发布到了10版本，随着版本的逐渐迭代，功能的完善，以及生态的丰富，可以说是，现在要什么有什么，只有你想不到，没有你找不到。angular相关的信息可以查看文档：https://angular.cn/docs，他也有一些推荐，包括官方的，华为的，gz-Zorro的，以及ionic的（这个目前也支持angular了，但是主要是针对移动端的），甚至还有一些个人做的比较好的，比如ng-test。因为之前做过ionic，引入过ng-Zorro-mobile作为补充，算比较熟悉，所以这次选择了Zorro了。这个是遵循ant design规范设计的，提供给angular用的UI。还有大名鼎鼎的Ant Design Pro。好了，废话不说，直接进入主题。

       直接上ng-Zorro网站：https://ng.ant.design/docs/introduce/zh，就有快速上手的教程，非常简单。前提是具备angular开发环境，这个可以看关于angular的文档，没什么好说的。唯一的问题，就是镜像地址的稳定性以及速度，所以这里推荐，基础环境准备好之后，安装淘宝的npm镜像源，这里建议安装cnpm而不是直接替换原来的npm，为了以防万一，以免装某些东西的时候，出问题。

本文章默认有一定的angular基础，有些细节可能就一笔带过了。

安装：npm install -g cnpm --registry=https://registry.npm.taobao.org

检查：cnpm -v

 

分割线-------------------------------------------

 

好了，接着说，按照ng-Zorro的说明，3个命令就行了

第一步创建ag项目：ng new PROJECT_NAME
第二步进入目录： cd PROJECT_NAME
第三步添加Zorro： ng add ng-zorro-antd

如果你运气足够好（网速够稳定或者爬墙挂梯子等等），一把成功，也没啥问题，那么恭喜。

创建ag的项目，会要选择样式处理文件，我选择scss；会选择是否使用ag的路由，我选择是。

添加Zorro时，也会做一些选择，注意最后一个，可以创建一个模板。成功之后如下图：

左侧是菜单，可以收起，右侧是内容。布局layout有好几种，直接看文档就好，这里不多说。下面说几个重点（坑）。

 

分割线-----------------------------------

 

坑1、网速不稳定，项目创建很慢很慢。关于Zorro的添加，其实整个项目还是以ag为主，Zorro为辅（辅助，可有可无）。这个和用ionic开发有本质上的区别，ionic是用ionic创建一个ag类型项目（--type=angular）；这个是创建ag项目，再添加其他东西，本质上和你添加一个echarts是一毛一样的。这个就是解决接下来问题的思路。创建很慢啊，要下载好几百M的基础依赖啊，如果不行，就多试几次。再不行，用淘宝源吧。

创建项目不安装：ng new demo --skip-install

用cnpm安装：cnpm install

添加Zorro，注意，不能用add了，会报错：ng add ng-zorro-antd 。这个add我理解为，除了引入，还有一些其他的操作，比如导入模块、样式、生成上面所说的模板等等。

但是可以单独添加：cnpm install ng-zorro-antd --save

单独添加之后，手动几个地方即可，导入模块（坑2，划重点）、添加样式。

先说样式的导入，在angular.json文件里，有两处（我这边安装后，只自动添加了一个，排查好久才试出来）styles下增加引用src/theme.less（注意这个文件是有内容的，应该是添加Zorro是附带的）即可，注意还有一个文件src/styles.scss，这个是ag自带的css，一般放后面，这个自己写的可以覆盖前面的。

关于这个问题，我是直接安装好的，不排除安装时有问题，很奇怪当时我的layout没问题，但是button、table等这些样式读不出来，后来手动添加到angular.json里就好了。网上还有一些说法是在angular.json里或者styles.scss里引用node_modules/ng-zorro-antd/ng-zorro-antd.min.css这个文件，这个我试过都没用。【更正，关于这第一段，我说的不对。应该就是和引用模块有关系。如果你想用button，必须在所在的module引入NzButtonModule，如果只在app.module里引入，在其他模块是没有用的】

最后附上别人的整合，作为参考：https://blog.csdn.net/yw00yw/article/details/88835714 。注意，V10版本已经没有NgZorroAntdModule了。反复安装删除3遍，大家都能熟练。

坑2、关于模块的引入/导入。所有我能找到的资料都是说，import NgZorroAntdModule这个。但是，版本10里根本就没有这个。我一度以为我安装的不对，反复的创建、删除、安装、更新。还是不行，经过仔细的比对代码，发现了问题。生成的代码里所有的模块导入都是这个样子的    NzLayoutModule，   NzMenuModule，再加上文档里开头有描述，如下图：

红色圈圈，再再加上文档的常见问题里有说，【如果使用多 Module 管理方式，NG-ZORRO 的模块需要在每个子 Module 中都要 import】，经过多次测试发现，就是单独添加的，结合文档，你要啥就加啥。建议可以创建一个公用的module，引入这些常用的，然后再根module引用公用的即可。

根本不存在NgZorroAntdModule。

根本不存在NgZorroAntdModule。

根本不存在NgZorroAntdModule。

至少V10目前没有。

整理完这些，项目终于能跑了，样式也没啥问题了。

下面再说说一些其他的额外想法。

 

分割线--------------------------------------------------------------

 

1、关于tabset的问题，还是上图，盗一张ng-test的了。

很常见吧，一般业务系统都这么干，但是，用了ag还得这么干？每次切换页签，地址栏的地址是会变化的，切换的时候，数据怎么保存呢？其实也能的。

angular有个特性，路由复用+懒路由加载完全可以实现，算比较成熟的解决方案了，在这里不再多说。

 

2、关于路由锚点，其实就是我之前的截图，url地址里多了一个 # 符号。

在RouterModule.forRoot的那个路由文件里增加一下配置就可以。forRoot只有一个，forChild有多个，可以做路由懒加载。

providers: [//启用锚点路由
{
    provide: LocationStrategy,
    useClass: HashLocationStrategy
}]

那么这个有什么用呢？我目前用到的就是，部署时会用到。

 

3、关于部署。

一般ng server 就能启动项目，这个方便开发时使用，真正部署的时候，需要编译成js文件的。编译完之后，大概是这样：

我这里没有使用prod压缩。

部署的话，就简单了，直接放到容器服务器下就可以了。什么Apache、tomcat等等。然后访问index.html即可。需要注意的是，这个文件的<base href="/">这个里面的斜杠，需要去掉（如果直接部署在根路径的话）。这样子html里引用的css、js等才能正常引用到。如果部署路径由变化，就做对应的调整，确保css、js等资源文件可被引用到。

然后如果你要放下级目录怎么办，加上前面的锚点，就好办了。

我的项目名cause，index.html部署在项目下的faa目录下面，那么我访问就是：http://localhost:8080/cause/faa/index.html

这样子就直接访问到index.html了，这个和你直接访问ng server启动之后的服务，http://localhost:4200/ 是一回事，我这里做了路由的跳转，如果是空的，就会跳转到welcome，那么就变成了下面这样：

当我点击切换的之后，切换的只是url地址栏里#符号之后的内容，

锚点之前的地址不会变，锚点之后的内容会变化，然后，这段内容就被ag拿去做路由地址的处理了，加载不同的路由地址对应的组件。其中我的index.html需要这样子处理一下：

就可以了。

锚点的主要作用，就是部署之后，ag直管锚点符号#之后的路由地址的处理，至于前面的，就是加载编译之后的html的地址，可以根据实际情况灵活配置。这样子，在ag里配置路由，就只管自己的，不需要管编译之后部署的实际目录。

 

好了，目前只想到这么多，后面再继续做别的。

目前的想法时，整理一套出来，做个PC的前后端分离，后端用Java，然后把编译后的ag文件和class部署在同一个tomcat的目录下。后续再有新的想法再补充。