Angular 标签

关于微前端实现原理与ngx-planet(四)服务端渲染

1.为什么要服务端渲染 因为公司后端服务在 k8s 上,是分布式的微服务,之前端全部打包部署在了物理机器(虚拟机)nginx 上,如果通过 helm 做应用商店的话,nginx 前端这部分无法处理,包括灰度部署,CI 等,全部都只能做到接口级别的处理,并不能连带静态资源文件一起处理,所以基于分布式的前端整改迫在眉睫。 偶然发现了 ngx-planet,整篇文章基于前几篇文章,可以看之前的几篇文章。 2.如何基于 ngx-palnet 进行服务端渲染 2.0 有路由前缀的情况下服务端渲染 ngx-planet 如何改进 在 start 函数中监听路由阶段,其中的 startWith 过滤路由要把 location.pathname 修改好,要将前缀去除掉,至于如何动态去除不写死,仁者见仁智者见智。 2.1 首先,准备打包好的静态文件 将 build 命令修改,注意 --deploy-url 的意思是,打包完成后,静态资源路径是什么 "build": "ng build --prod --deploy-url=/static/star-universe/ --base-href=/st....

阅读全文 »

AngularCli

简介 写一份自定义的 angular 脚手架吧 写之前我们先解析一下 antd 的脚手架 前提 先把 Angular Schematic 这篇文章读一遍,确保了解了 collection 等基础 antd 脚手架 克隆项目 Git clone https://github.com/NG-ZORRO/ng-zorro-antd.git 开始 打开项目 在 schematics 下的 collection.json 为入口,查看内容 一共定了了 4 个 schematic,每个 schema 分别指向了各文件夹的子 schema.json,factory 指向了函数入口,index.ts ng-add/schema.json { // 指定 schema.json 的验证模式 "$schema": "http://json-schema.org/schema", "id": "nz-ng-add", "title": "Ant Design of Angular(NG-ZORRO) ng-add schematic", "type": "object", // 包含的属性 "properti....

阅读全文 »

Angular6

入门 官方文档 高阶 修仙之路 构建第三方包 angular-cli 的 ng g lib 不太好用,所以还是用 ng-packgr 建立父项目 ng new project --style less --prefix pre 调整项目结构 cd project # 建立第三方包文件夹 mkdir -p projects/mylib # 在父项目中生成模块 ng g module mylib # 将 mylib.module.ts 移动到 project/mylib 下 mv mylib.module.ts ./projects/mylib # 在project/mylib 下生成 component/service # 注意,component 要 export 出来 cd project/mylib ng g c mycomponent ng g s myservice # 至此基本项目结构完成 模块依赖 当你编写第三方依赖包的时候,你的 service/component 或许需要一些数据来驱动,往往这些数据/对象是使用者提供的 # 建立 model 文件夹 mkdir -p project....

阅读全文 »