ng-toolkit 全面解析：Angular 开发者的 PWA + Serverless 一站式工具箱-育师

【免费下载链接】ng-toolkit

:star: Angular tool-box! Start your PWA in two steps! Add Serverless support for existing projects and much more

项目地址：https://gitcode.com/gh_mirrors/ng/ng-toolkit

ng-toolkit是一款面向Angular开发者的一站式工具箱（Angular tool-box），帮你两步启动PWA（渐进式 Web 应用）项目，并为现有项目一键添加Serverless无服务器部署能力，同时内置 Angular Universal 服务端渲染、推送通知、离线缓存等实用工具。本文带你快速了解它的定位、核心模块与上手方法。

项目概览：一个工具箱，两张面孔 🧰

ng-toolkit 由两部分组成，理解了这个"双面孔"，就理解了整个项目：

角色	说明	位置
应用脚手架（Boilerplate）	一个开箱即用的 Angular Universal + PWA 样板项目，内置最佳实践	application/
Schematics 集合	一组可作用于现有 Angular 项目的 Angular CLI 扩展（配合`ng add`命令）	schematics/

关键点：所有 Schematics 都源自上面那个样板项目，而且它们可以互换、任意顺序组合——先加 Serverless 再加 PWA，或反过来，都没问题。

工具箱清单：5 个模块一次看懂

ng-toolkit 提供 5 个 npm 包，每个模块都有独立的 README：

🚀@ng-toolkit/init（schematics/init/）：PWA 项目脚手架，两条命令生成完整项目
🌐@ng-toolkit/universal（schematics/universal/）：为现有项目添加 Angular Universal 服务端渲染，改善 SEO
☁️@ng-toolkit/serverless（schematics/serverless/）：支持 AWS Lambda、Google Cloud Functions、Firebase 三大无服务器平台
📱@ng-toolkit/pwa（schematics/pwa/）：扩展官方@angular/pwa，修复 SSR 场景下的 PWA 兼容问题并加入自动更新机制
🐞@ng-toolkit/firebug（schematics/firebug/）：为项目注入 firebug-lite，方便在平板等触屏设备上调试

两步启动：从零创建 PWA 项目

最快上手步骤

npm install -g @ng-toolkit/init ng new --collection @ng-toolkit/init myApp cd myApp npm start

也可以直接克隆仓库中的样板应用体验：

git clone https://gitcode.com/gh_mirrors/ng/ng-toolkit cd ng-toolkit/application && npm install && npm start

常用创建参数

创建项目时支持的参数定义在 schema.json：

参数	说明	默认值
`--provider`	选择无服务器平台（`aws`/`gcloud`/`firebase`）	`aws`
`--firebaseProject`	使用 Firebase 时指定的项目 ID	—
`--gaTrackingCode`	启用 Google Analytics 统计	关闭
`--firebug`	是否下载 firebug-lite 调试工具	`false`

脚手架内置的能力相当完整：PWA 离线缓存、可安装到桌面、推送通知（Vapid + Safari）、TransferState 状态转移、懒加载模块、AMP 加速页面、Angular Material，甚至连单元测试脚本都配好了（见 application/package.json）。

一键部署：为现有项目添加 Serverless 支持

这是 ng-toolkit 最热门的用法。已有 Angular 项目只需一条命令：

ng add @ng-toolkit/serverless --provider aws

随后即可部署：

npm run build:serverless:deploy # 部署到临时维护链接 npm run build:prod:deploy # 部署到自定义域名

以 AWS 为例，schematic 会自动生成 serverless-aws.yml 部署描述文件，将 Express 服务器打包进 Lambda 函数，并自动处理base-href、环境变量、webpack 服务器构建等一系列细节，这些逻辑集中在 schematics/serverless/src/index.ts 中。

常用选项一览

选项	说明
`--provider`	服务商：`aws`（默认）/`gcloud`/`firebase`
`--firebaseProject`	Firebase 项目 ID
`--lambdaTS`	用 TypeScript 而非 JavaScript 生成 Lambda 文件
`--offline`	引入 serverless-offline，支持本地开发调试

部署到 Firebase：如何找到 Project ID

使用 Firebase 时还需要项目 ID：

ng add @ng-toolkit/serverless --provider firebase --firebaseProject 你的项目ID

在 Firebase 控制台Settings → General页面即可看到 Project ID：

服务端渲染：Universal 模块让 SEO 不再头疼 📈

Angular 纯客户端渲染对搜索引擎不太友好。执行：

ng add @ng-toolkit/universal

就能为项目补上 SSR 能力。本地运行与预渲染命令：

npm run build:ssr && npm run serve:ssr # 服务端渲染模式 npm run build:prerender && npm run serve:prerender # 预渲染静态页面

模块还提供了两个非常实用的封装，解决 SSR 下无法直接使用window/localStorage的经典痛点。源码见 ngt-universal.module.ts，它通过注入令牌WINDOW和LOCAL_STORAGE，让你在组件里安全地访问浏览器对象。样板应用中还有配套示例 universal-window/ 和 transfer-state/ 演示 TransferState 的使用。

服务端入口参考 application/server.ts，展示了如何用ngExpressEngine引导 Universal 应用。

自由组合：模块间如何链式使用

各 Schematics 是可互换的，推荐组合方式：

ng add @ng-toolkit/universal—— 先加服务端渲染
ng add @ng-toolkit/pwa—— 再叠加 PWA 增强（处理 SSR 下的 Service Worker 兼容）
ng add @ng-toolkit/serverless—— 最后接入无服务器部署

其中@ng-toolkit/pwa的亮点在于：加入"自动更新机制"，并提供 NgtPwaMockModule 让服务端模块无需关心isPlatformBrowser判断，代码更干净。

常见问题速答 💡

Q：ng-toolkit 适合纯前端项目吗？适合。Serverless 模块同时支持纯客户端项目（server_static）和 Universal 项目，schematic 会自动检测并选择正确的服务端模板（见 server_universal.ts 与 server_static.ts）。

Q：本地如何调试 Serverless 应用？添加--offline参数生成 serverless-offline 配置，或使用npm run server通过 local.js 在本地起 Express 服务验证。

Q：项目支持哪些 Angular 版本？当前样板基于 Angular 6.x 构建（依赖见 application/package.json），是当年 Universal + PWA 组合的先行实践者。

写在最后

ng-toolkit 把PWA、Angular Universal、Serverless 部署、推送通知这些需要各自踩坑的能力，整合成了几条ng命令就能完成的操作。如果你正计划做一个需要 SEO 优化、可离线使用、还能低成本部署的 Angular 应用，这套工具箱值得一试——先运行ng new --collection @ng-toolkit/init，两分钟即可看到效果。 🎉