前端工程化：angular5+NG-ZORRO+SSR

Posted 2021-04-26 AI量化实验室

前端工程化的趋势，很好的实现了前后端团队分离开发。之前最令人担心的问题是SEO。因为页面都是js生成的，对于spider非常不友好。有问题就有解决方案，SSR(Sever-Side-Renderring)服务端渲染方案来了。

vue有vue的解决方案，之前本人是非常喜欢vue的，超轻量。但最终要整合出一个工程化的东西，发现要整合的东西太多，这需要踩不少的坑。所以，考虑到可维护性，还是使用angular。

angular更新到5.0版本了，还有阿里巴巴开源的界面库Ng-zorro。在这些基础上，我们再配置实现SSR。

npm的服务器在国外，经常会抽风，可以考虑淘宝的cnpm。

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

然后使用cnpm来安装ng会快不少。

cnpm install -g @angular/cli

很快就安装好了。

然后定位到要生成项目的目录下，直接ng new project-name即可，会自动生成项目模板，并自动npm install安装依赖包。如果npm太慢或挂了，这时候可以改用cnpm install安装依赖包。

然后ng serve即可运行，如果要自动打开浏览器，可以使用ng serve --open

这样一个angular的工程就运行起来了。我们可以修改一些简单的东西，看下网页内容的变化。

下面开始集成ng-norro,在工程当前目录下：cnpm install ng-zorro-antd --save

打开src/app/app.module.ts。

新增导入如下模块，并在imports里声明。

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { NgZorroAntdModule } from 'ng-zorro-antd';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    BrowserAnimationsModule,
    NgZorroAntdModule.forRoot()
  ],
  providers: [],
  bootstrap: [AppComponent]
})

这样就成功在全局引入了 ng-zorro-antd。在src/app/component.html加一个按钮可以看到button的效果：

<button nz-button [nzType]="'primary'">测试按钮</button>

这样，ng-zorro-antd也就安装完成并可以使用了。

使用ng build，文件会构建到dist目录，就可以部署了。如果要像静态页能在本地打开，需要修改一下base-href，ng build --base-href ./

下面来看SSR，解决SEO的问题。angular的解决方案是angular universal。

https://universal.angular.io/

下面这篇文章更好理解，官方的start说得不清不楚。

https://scotch.io/tutorials/server-side-rendering-in-angular-2-with-angular-universal

直接使用官方的universal的模板

git clone https://github.com/angular/universal-starter demo

cd demo & npm install

具体SSR的SEO方案展开描述，明天继续。

扫描下方二维码，关注：AI量化实验室（ailabx），了解AI量化最前沿技术、资讯。