🚀 探索下一代Angular开发：generator-ngx-rocket 🌌
项目地址: https://gitcode.com/gh_mirrors/ge/generator-ngx-rocket 你是否还在为Angular项目搭建时的繁琐配置而烦恼？从环境搭建到路由配置，从UI框架选择到测试工具集成，每一步都需要耗费大量时间。现在，有了generator-ngx-rocket，这一切都将成为过去。本文将带你深入了解这个强大的Angular项目生成器，让你轻松构建企业级Angular应用。
读完本文，你将能够：
- 快速搭建一个功能完善的Angular项目
- 了解generator-ngx-rocket的核心特性和优势
- 掌握项目的目录结构和主要任务
- 学会如何自定义项目生成过程
- 了解如何更新和维护生成的项目
🌟 generator-ngx-rocket简介
generator-ngx-rocket是一个基于angular-cli的可扩展企业级Angular项目生成器，它整合了社区的最佳实践，支持PWA、Cordova和Electron，提供了丰富的编码指南等功能。与原生的angular-cli项目相比，generator-ngx-rocket具有以下优势：
✨ 核心优势
-
完整的 starter 模板：为企业项目提供了示例应用结构，包括单元测试、路由、认证、HTTPS服务扩展、i18n支持等常见功能的示例代码和样板代码。
-
改进的工具链：提供了SCSS和HTML linting、更严格的TSLint规则、基于markdown的本地wiki服务器、自动可本地化字符串提取、企业代理支持以及Cordova集成等功能。
-
丰富的基础文档：包括TypeScript/SCSS/HTML的编码指南、Angular入门指南、企业代理配置等文档。
-
即用型UI组件：支持Bootstrap 5、Ionic和Angular Material等UI框架，让你可以专注于应用逻辑而非技术栈。
-
跨平台支持：支持Web应用、移动应用（使用Cordova）、桌面应用（使用Electron），或者同时支持多种平台。
-
API代理示例设置：帮助你更快地开发和调试远程服务器。
-
生成器输出定制：通过提供的add-on支持，可以快速启动多个项目，如企业主题、SSO认证、服务集成等。
🚀 快速开始
🔧 安装工具
首先，你需要安装generator-ngx-rocket：
npm install -g generator-ngx-rocket
🆕 创建应用
安装完成后，使用以下命令创建新应用：
ngx new
💡 提示：ngx CLI不仅可以引导新项目，还可以使用模糊匹配运行NPM脚本（例如尝试
ngx ci），或帮助你保持项目更新。查看完整文档了解更多功能！
📁 项目结构
generator-ngx-rocket生成的项目结构遵循Angular风格指南：
dist/ # 应用生产构建
docs/ # 项目文档和编码指南
cypress/ # 端到端测试
src/ # 项目源代码
|- app/ # 应用组件
| |- @shared/ # 共享模块（通用组件、指令、管道和服务）
| |- app.component.* # 应用根组件（外壳）
| |- app.module.ts # 应用根模块定义
| |- app-routing.module.ts # 应用路由
| +- ... # 其他模块和组件
|- assets/ # 应用资源（图片、字体、声音等）
|- environments/ # 各种构建环境的值
|- theme/ # 应用全局scss变量和主题
|- translations/ # 翻译文件
|- index.html # HTML入口点
|- main.scss # 全局样式入口点
|- main.ts # 应用入口点
|- polyfills.ts # Angular所需的polyfills
+- test.ts # 单元测试入口点
reports/ # 测试和覆盖率报告
proxy.conf.js # 后端代理配置
🔧 主要任务
任务自动化基于NPM脚本：
| 任务 | 描述 |
|---|---|
npm start | 在http://localhost:4200/上运行开发服务器 |
npm run serve:sw | 在http://localhost:4200/上运行带有服务工作器的测试服务器 |
npm run build [-- --configuration=production] | lint代码并构建生产环境的Web应用（使用AOT）到dist/目录 |
npm test | 通过Karma或Jest在监视模式下运行单元测试 |
npm run test:ci | lint代码并为持续集成运行一次单元测试 |
npm run e2e | 使用Cypress运行端到端测试 |
npm run lint | lint代码 |
npm run translations:extract | 从代码和模板中提取字符串到src/app/translations/template.json |
npm run docs | 显示项目文档 |
📱 Cordova项目的额外任务
| 任务 | 描述 |
|---|---|
npm run cordova:prepare | 准备构建移动应用（恢复Cordova平台和插件） |
npm run cordova:run <ios/android> [--device] | 在目标平台设备或模拟器上运行应用 |
npm run cordova:build [-- --configuration=production] | 构建生产环境的移动应用到dist/目录 |
npm run cordova:clean | 删除www/、platforms/和plugins/文件夹 |
💻 Electron项目的额外任务
| 任务 | 描述 |
|---|---|
npm run electron:build | 构建桌面应用 |
npm run electron:run | 在Electron上运行应用 |
npm run electron:package | 为所有支持的平台打包应用 |
构建应用时，可以使用--configuration <name>标志指定目标配置（不要忘记在npm脚本前添加--来传递参数）。默认的构建配置是production。
🌐 开发服务器
运行npm start启动开发服务器，导航到http://localhost:4200/。如果你更改任何源文件，应用程序将自动重新加载。
注意：你不应该直接使用
ng serve，因为它默认不使用后端代理配置。
🏗️ 代码脚手架
运行npm run generate -- component <name>生成新组件。你也可以使用npm run generate -- directive|pipe|service|class|module生成其他类型的代码。
如果你全局安装了angular-cli（npm install -g @angular/cli），也可以直接使用ng generate命令。
📦 核心功能
🛠️ 工具链
generator-ngx-rocket的开发、构建和质量流程基于angular-cli和NPM脚本，包括：
- 使用Webpack进行优化的构建和捆绑过程
- 带有后端代理和热重载的开发服务器
- 使用autoprefixer和browserslist的跨浏览器CSS支持
- 用于更好的缓存管理的资产修订
- 使用Jasmine、Karma和headless Chrome进行单元测试
- 使用Cypress或Protractor进行端到端测试
- 静态代码分析：TSLint、Codelyzer、Stylelint和HTMLHint
- 使用Hads的本地知识库服务器
- 使用Prettier进行自动代码格式化
- 使用ng deploy进行部署
📱 跨平台支持
🕸️ Progressive Web App (PWA)
由@angular/service-worker提供PWA支持，包括离线功能、推送通知等现代Web应用特性。
📱 Cordova移动应用
基于Cordova的原生移动应用打包，iOS使用Ionic WKWebView以获得更好的性能。
💻 Electron桌面应用
使用Electron构建跨平台桌面应用，支持Windows、macOS和Linux。
🎨 UI框架
generator-ngx-rocket支持多种UI框架，你可以根据项目需求选择：
🔹 Angular Material
- Angular Material
- Angular Flex Layout
- Material Icons
🔷 Ionic
- Ionic
- Ionic Native
🔶 Bootstrap
- Bootstrap 4
- ng-bootstrap
- Font Awesome
🌍 国际化支持
generator-ngx-rocket提供了强大的国际化支持，基于ngx-translate库。你可以轻松地添加多种语言，并实现动态语言切换和自动用户语言检测。
🔒 认证系统
内置了完整的认证系统，包括登录组件、认证服务、凭证管理和路由守卫等功能，可直接用于生产环境。
📊 生成器选项
generator-ngx-rocket提供了丰富的选项来自定义你的项目：
-
--packageManager [npm|yarn]: 指定使用Yarn还是NPM作为包管理器（默认为NPM）。也可以使用环境变量NGX_PACKAGE_MANAGER全局设置此选项。 -
--automate <json_file>: 使用指定的JSON文件自动化提示答案（参见示例）。 -
--addons <addon_name> [<addon_name>] ...: 空格分隔的add-on列表。 -
--no-update: 不更新现有项目（另见更新生成的项目）。 -
--no-analytics: 不报告匿名使用分析。也可以使用环境变量NGX_DISABLE_ANALYTICS全局设置此选项。 -
--raw: 不使用任何UI库的模板。 -
--tools: 只生成工具链，不生成应用模板。 -
--location-strategy [hash|path]: Angular路由器使用的位置策略（默认为path）。 -
--no-git: 不初始化git仓库。 -
--no-strict: 禁用TypeScript严格类型检查选项。 -
--skip-quickstart: 禁用项目生成后的快速启动消息。 -
--no-prefix: 不为core/shared文件夹添加@前缀。 -
--deploy <option>: 选择自动部署选项。使用ngx n --deploy查看可能的值。
生成全栈项目（同时包含客户端和服务器代码）时，可以使用环境变量NGX_CLIENT_PATH和NGX_SERVER_PATH自定义客户端和服务器代码的路径。但请注意，某些add-ons可能会强制特定路径，从而覆盖你的更改。
🔄 更新生成的项目
随着新功能和更新的库和工具被添加到生成器中，你可能希望在某个时候更新你的项目。以下是我们建议的更新方法：
-
确保你的工作目录是干净的（没有未提交的更改）。
-
在项目文件夹中使用CLI运行
ngx update。 -
生成器将使用你最初使用的相同选项再次运行，并提示你每次文件更改。建议的方法是简单地覆盖所有内容。
-
最后，使用你的源代码控制系统查看每个文件的差异，并手动合并更改。
注意：你可以使用
--tools选项只生成工具链而不是应用模板，从而减少需要合并的更改数量。
🛠️ 自定义项目生成
你可以使用add-ons自定义生成器输出，以更好地满足你的需求。
要创建新的add-on，你可以使用CLI的addon子生成器：
ngx new --addon
🤝 贡献指南
generator-ngx-rocket欢迎首次贡献者！要开始，请查看贡献指南。如果你想提供帮助但不知道可以做什么，可以查找"good first contribution"问题，或者如果你是经验丰富的OSS贡献者，可以查找"PR welcome"标签。
📄 许可证
generator-ngx-rocket使用MIT许可证。
📚 编码指南
generator-ngx-rocket提供了全面的编码指南，帮助你编写高质量的代码：
- Angular
- Ionic
- TypeScript
- Sass
- HTML
- 单元测试
- 端到端测试
📖 其他文档
除了编码指南外，generator-ngx-rocket还提供了以下文档：
- I18n指南
- 企业代理配置
- 依赖项和工具更新
- 开发后端代理使用
- 浏览器路由
- Cordova
- Electron
🎯 总结
generator-ngx-rocket是一个功能强大的Angular项目生成器，它可以帮助你快速搭建企业级Angular应用。无论你是开发Web应用、移动应用还是桌面应用，generator-ngx-rocket都能为你提供完整的解决方案。
通过本文的介绍，你已经了解了generator-ngx-rocket的核心功能、安装方法、项目结构、主要任务和自定义选项。现在，你可以开始使用这个强大的工具来加速你的Angular开发了！
如果你有任何问题或建议，欢迎参与generator-ngx-rocket的社区讨论，或为项目贡献代码。让我们一起打造更好的Angular开发体验！
如果你觉得这篇文章对你有帮助，请点赞、收藏并关注我们，以获取更多关于generator-ngx-rocket的教程和最佳实践。下期我们将深入探讨如何自定义generator-ngx-rocket的add-on，敬请期待！
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
