本文由体验技术团队Hexqi原创。

前言

TinyEngine 是一款面向未来的低代码引擎底座，致力于为开发者提供高度可定制的技术基础设施——不仅支持可视化页面搭建等核心能力，更可通过 CLI 工程化方式实现深度二次开发，帮助团队快速构建专属的低代码平台。

无论是资源编排、服务端渲染、模型驱动应用，还是移动端、大屏端、复杂页面编排场景，TinyEngine 都能灵活适配，成为你构建低代码体系的坚实基石。

最近我们正式发布 TinyEngine v2.10 版本，带来多项功能升级与体验优化：模型驱动、登录鉴权、应用中心等全新特性，同时还有Schema面板与画布节点同步、出码源码即时预览、支持添加自定义 MCP 服务器等功能进行了增强，以让开发协作、页面搭建变得更简单、更高效。

• 开源地址：github.com/opentiny/ti…（欢迎 Star ⭐）
• 官方网站：opentiny.design/tiny-engine

版本特性总览

核心特性

• 模型驱动：零代码创建 CRUD
• 多租户与登录鉴权能力
• 新增应用中心与模板中心

功能增强

• 出码支持即时查看代码
• 自定义 MCP 服务器，扩展 AI 助手能力
• 画布与 Schema 面板支持同步滚动
• 页面 Schema CSS 字段格式优化
• 图表物料更新，组件属性配置平铺优化
• 多项细节优化与 Bug 修复

体验升级

• 新官网：UI 全面焕新
• 新文档：域名迁移与样式升级
• 新演练场：真实前后端，完整功能体验

新特性详解

1. 【核心特性】模型驱动：零代码极速创建CRUD页面（体验版本）

背景与问题

在传统的后台管理系统开发中，创建一个包含表单、表格和完整 CRUD(增删改查) 功能的页面往往需要开发者：

• 重复配置相似的表单和表格组件
• 手动绑定数据源、编写事件处理逻辑
• 数据模型变更时，同步修改多个组件配置

这种重复性劳动不仅耗时，还容易出错。

核心功能

模型驱动特性通过声明式的数据模型配置，自动生成对应的 UI 组件和数据交互逻辑，实现真正的"零代码"生成数据管理页面。

核心模块：

模块	功能
模型管理器插件	可视化创建数据模型、配置字段和 API，管理模型
内置模型组件	表单、表格、组合表单+表格，基于模型自动生成表单、表格，或组合生成完整 CRUD 页面
模型绑定配置器组件	为模型生成 UI、绑定 CRUD 逻辑

支持的模型字段类型：String（字符串）、Number（数字）、Boolean（布尔）、Date（日期）、Enum（枚举）、ModelRef（关联模型）

价值亮点

• 开发效率大幅提升：通过配置模型即可生成完整的 CRUD 页面，无需手动配置每个组件
• 后端自动生成：使用默认接口路径时，自动生成数据库表结构和 CRUD 接口
• UI 与接口自动绑定：拖拽组件选择模型后，UI 自动生成，接口自动绑定，一站式完成前后端搭建
• 支持嵌套模型：字段可关联其他模型，实现复杂数据结构（如用户关联部门）（后续实现）
• 标准化输出：基于统一模型生成的 UI 组件保证了一致性
• 灵活扩展：可自定义字段类型和组件映射

使用场景

• 后台管理系统的数据管理页面
• 需要频繁进行增删改查操作的业务场景
• 需要快速原型的项目

快速上手

1. 创建数据模型

打开模型管理器插件，创建数据模型（如"用户信息"）：

• 配置模型基本信息：中文名称、英文名称、描述
• 添加模型字段（如姓名、年龄、邮箱等）
• 配置字段类型、默认值、是否必填等属性

2. 配置接口路径（可选）

创建模型时，可以选择：

• 使用默认路径：系统自动使用后端模型接口作为基础路径，并在后端自动生成对应的 SQL 表结构和 CRUD 接口
• 自定义路径：指定自己的接口基础路径，对接已有后端服务

3. 拖拽模型组件到页面

在物料面板中选择模型组件拖拽到画布：

• 表格模型：生成数据列表
• 表单模型：生成数据录入表单
• 页面模型：生成包含搜索、表格、编辑弹窗的完整 CRUD 页面

4. 绑定模型，自动生成

选中组件后，在右侧属性面板：
1） 点击"绑定模型数据"，选择刚才创建的模型
2） 系统自动生成 UI 界面
3） 系统自动绑定 CRUD 接口
4） 一站式完成前后端搭建

5. 预览页面

预览即可看到包含搜索、新增、编辑、删除、分页功能的完整数据管理页面。

核心流程图

graph LR
    A[创建数据模型] --> B{选择接口路径}
    B -->|默认路径| C[后端自动生成<br/>SQL表结构+CRUD接口]
    B -->|自定义路径| D[对接已有后端]
    C --> E[拖拽模型组件到页面]
    D --> E
    E --> F[绑定模型]
    F --> G[系统自动生成UI]
    F --> H[系统自动绑定接口]
    G --> I[预览完整CRUD页面]
    H --> I

    style A fill:#e1f5fe
    style C fill:#fff3e0
    style G fill:#f3e5f5
    style H fill:#f3e5f5
    style I fill:#e8f5e9

用户只需关注

定义好数据模型，前后端自动生成：

• ✅ 无需手动编写表单 HTML
• ✅ 无需手动编写表格渲染逻辑
• ✅ 无需手动编写 API 调用代码
• ✅ 无需手动编写数据验证规则
• ✅ 无需手动编写分页排序逻辑

让用户专注于业务逻辑和模型设计，而非重复的 UI 代码编写。

2. 【核心特性】多租户与登录鉴权能力

功能概述

TinyEngine v2.10 引入了完整的用户认证系统，支持用户登录、注册、密码找回，并结合多租户体系，让您的设计作品可以实现云端保存、多设备同步和团队协作。

登录注册

• 用户登录：基于用户名/密码的身份认证，Token 自动管理
• 用户注册：支持新用户注册，注册成功后提供账户恢复码用于找回密码
• 密码找回：通过账户恢复码重置密码，无需邮件验证

组织管理

• 多组织支持：用户可属于多个组织，灵活切换不同工作空间
• 组织切换：动态切换组织上下文，组织间数据隔离
• 创建组织：一键创建新组织，邀请团队成员加入

登录鉴权流程

系统采用 Token 认证机制，通过 HTTP 拦截器实现统一的请求处理和权限验证：

sequenceDiagram
    participant 用户
    participant 前端应用
    participant HTTP拦截器
    participant 后端API

    用户->>前端应用: 1. 输入用户名/密码登录
    前端应用->>后端API: 2. POST /platform-center/api/user/login
    后端API-->>前端应用: 3. 返回 Token
    前端应用->>前端应用: 4. 保存 Token 到 localStorage

    Note over 前端应用,后端API: 后续请求自动携带 Token

    前端应用->>HTTP拦截器: 5. 发起业务请求
    HTTP拦截器->>HTTP拦截器: 6. 检查 Token 并注入 Authorization 头
    HTTP拦截器->>后端API: 7. 携带 Token 的请求
    后端API-->>HTTP拦截器: 8. 返回数据 或 认证失败(401)

    alt 认证失败
        HTTP拦截器->>前端应用: 9. 清除 Token，显示登录弹窗
        前端应用->>用户: 10. 提示重新登录
    end

访问入口

1）登录界面：访问 TinyEngine 时系统会自动弹出登录窗口，未登录用户需完成登录或注册。

2）组织切换：登录后可通过以下方式切换组织：

• 点击顶部工具栏的用户头像，选择「切换组织」
• 在用户菜单中直接选择目标组织

3）退出/重新登录：已登录用户可以点击右上角头像在菜单点击"退出登录"，进入登录页面重新登录

使用场景

1）个人使用：登录后即可享受云端保存、多设备同步等功能，设计作品永不丢失。

2）团队协作：

• 创建组织：为团队或项目创建独立组织空间
• 数据隔离：不同组织的资源完全隔离，清晰区分个人与团队项目

💡 提示：新注册用户默认属于 public 公共组织，所有数据公共可见，您也可以创建自定义组织隔离数据。

开发者指南

1）环境配置：

• 开发环境：通过 pnpm dev:withAuth 命令启用登录认证，pnpm dev 默认不启用（mock server）
• 生产环境：自动启用完整登录认证系统

也可以修改配置文件来启动或关闭登录鉴权：

export default {
  // enableLogin: true // 打开或关闭登录认证
}

2）多租户机制：

• 用户可属于多个组织，通过 URL 参数标识当前组织上下文
• 组织间数据完全隔离，切换组织可查看不同资源
• 当 URL 未携带应用 ID 或组织 ID 时，系统自动跳转到应用中心

3. 【核心特性】应用中心与模板中心

应用中心和模板中心是此次版本新增的两大核心功能模块。通过应用中心可以集中管理您创建的所有低代码应用，为不同的场景创建不同的应用；模板中心则让优秀页面设计得以沉淀为可复用资产，团队成员可以基于模板快速搭建新页面，大幅提升协作效率。

应用中心

登录后进入应用中心，集中管理您创建的所有低代码应用。

功能亮点：

• 统一管理：在一个界面查看、创建、打开所有应用
• 快速切换：无需手动输入 URL，一键进入任意应用编辑器
• 组织隔离：不同组织的应用数据隔离，清晰区分个人与团队项目

模板中心

模板中心让页面设计资产得以沉淀和复用，提升团队协作效率。

核心价值：

• 设计复用：保存优秀页面设计为模板，避免重复造轮子
• 快速启动：基于模板创建新页面，继承已有布局和样式
• 团队共享：组织内共享设计资产，统一 UI 风格和设计规范

访问入口

在编辑器中点击左上角菜单按钮，悬停即可看到应用中心和模板中心入口，点击即可前往。

使用说明

自动跳转规则：

• 如果访问编辑器时未携带应用 ID 或组织 ID 参数，系统会自动跳转到应用中心
• 您可以在应用中心创建新应用，或打开已有应用进入编辑器

组织权限说明：

• public 组织：默认公共组织，所有用户的应用对所有人可见
• 自定义组织：用户新建的组织默认仅创建者可见，需手动邀请成员加入
• 切换组织可以查看不同组织下的应用和资源

特性开关

如果不需要使用应用中心与模板中心，可以在注册表中进行关闭:

// registry.js
export default {
  [META_APP.AppCenter]: false, // 关闭应用中心
  [META_APP.TemplateCenter]: false // 关闭模板中心
  // ...
}

4. 【增强】出码即时预览 - 导出前预览所见即所得

出码功能新增源码预览能力，用户在导出代码前可以实时查看生成的源码内容，提升代码导出体验和准确性。

功能特性

• 左右分栏布局：左侧树形文件列表，右侧 Monaco 代码编辑器预览
• 智能初始化：打开对话框时自动显示当前编辑页面对应的文件代码
• 实时预览：点击树形列表中的任意文件，即可在右侧预览其代码内容
• 灵活选择：支持勾选需要导出的文件

使用方法

1） 在编辑器中点击「出码」按钮
2） 打开的弹窗中左侧树形列表显示所有可生成的文件，当前页面对应文件自动展示在右侧
3） 点击任意文件预览源码，勾选需要导出的文件
4） 点击「确定」选择保存目录完成导出

5. 【增强】自定义 MCP 服务器 - 扩展 AI 助手能力

之前版本中，TinyEngine已经提供内置MCP 服务，可以通过MCP工具让AI调用平台提供的各种能力。 本次特性是在TinyEngine 中支持添加自定义 MCP (Model Context Protocol) 服务器，可以通过配置轻松集成第三方 MCP 服务，扩展 AI 开发助手的工具能力。

功能特性

• 灵活配置：通过注册表简单的配置即可添加自定义服务器
• 协议支持：支持 SSE 和 StreamableHttp 两种传输协议
• 服务管理：在 AI 插件的配置界面即可管理 MCP 服务器的开关状态
• 工具控制：可查看并切换各个工具的启用状态

使用步骤

1） 准备您的 MCP 服务器（需符合 MCP 协议规范）

2） 在项目的 registry.js 中添加配置

// 使用示例
// registry.js
export default {
  [META_APP.Robot]: {
    options: {
      mcpConfig: {
        mcpServers: {
          'my-custom-server': {
            type: 'SSE',              // 支持 'SSE' 或 'StreamableHttp'
            url: 'https://your-server.com/sse',
            name: '我的自定义服务器',
            description: '提供xxx功能的工具',
            icon: 'https://your-icon.png'  // 可选
          }
        }
      }
    }
  }
}

3） 刷新编辑器，在 AI 插件 MCP 管理面板中即可看到新添加的服务器

4） 启用服务器，选择需要的工具，即可在 AI 助手中开始使用！

场景示例

您可以集成企业内部 MCP 服务、社区 MCP 服务、第三方 MCP 工具等，扩展 AI 助手的业务能力。

例如，下面是一个添加图片搜索MCP服务后使用AI生成带图片页面的场景示例：

6. 【增强】画布与 Schema 面板支持同步滚动

Schema 面板新增"跟随画布"功能，启用后当在画布中选中组件时，Schema 面板会自动滚动到选中组件的对应位置并高亮显示。

使用场景

• 快速定位：当页面元素较多时，能快速找到对应组件的 Schema 配置
• 双向对照：可视化视图与 JSON 代码视图对照，便于理解页面结构

使用方法

打开 Schema 面板，勾选面板标题栏的"跟随画布"复选框启用。在画布中点击切换元素，即可看到 Schema 面板跟随变化。

效果如下：

7. 【优化】页面 Schema CSS 字段格式优化

页面 Schema 中的 CSS 样式字段由字符串格式优化为对象格式，提升样式配置的可读性和可维护性。系统会自动处理对象与字符串的相互转换，出码时自动转换为标准 CSS 字符串格式，同时完美兼容之前的字符串格式。

优化场景

• AI场景更友好：AI生成代码及修改样式场景，能够更快速地进行增量生成及修改
• 编辑更直观：对象格式支持属性智能提示和语法高亮，编辑体验更佳
• 阅读更清晰：结构化的对象格式易于查看和修改样式属性
• 维护更便捷：新增或修改样式规则时，无需手动拼接 CSS 字符串

格式对比

之前（字符串格式）：

"css": ".page-base-style { padding: 24px; background: #FFFFFF; } .block-base-style { margin: 16px; } .component-base-style { margin: 8px; }"

现在（对象格式）：

"css": {
  ".page-base-style": {
    "padding": "24px",
    "background": "#FFFFFF"
  },
  ".block-base-style": {
    "margin": "16px"
  },
  ".component-base-style": {
    "margin": "8px"
  }
}

兼容性说明

• 两种格式完全兼容，可在同一项目中混用
• 系统自动识别格式类型并进行转换
• 出码时统一转换为标准 CSS 字符串格式
• 页面样式设置等场景使用都与之前保持一致，不受该特性影响

8. 【增强】图表物料更新，组件属性优化

图表物料进行了如下优化：

• 添加三种常用图表组件物料：仪表盘、拓扑图、进度图
• 图表组件的配置面板优化，将原有的图标配置属性由整体 options 配置拆分为独立的属性配置项（颜色、数据、坐标轴等），使配置更加清晰直观。

9. 【新体验】新演练场 - 完整的前后端体验

演练场进行了全面升级，从原来的前端 Mock 数据改为完整的前后端部署，带来真实的体验环境。

升级亮点：

• 完整的前后端部署：不再是拦截接口 Mock 数据，而是真实的服务端环境
• 支持用户登录：可以使用真实账户登录演练场
• 数据隔离：用户数据基于租户进行共享或隔离，更符合实际使用场景
• 功能完整体验：之前无法体验的功能现在都可以正常使用，如AI助手插件自然语言生成页面

新演练场地址：playground.opentiny.design/tiny-engine…

通过下面两个入口都可以访问：

• 官网opentiny.design/tiny-engine…点击 "立即体验" 自动跳转新版演练场
• 演练场首页playground.opentiny.design/点击 "TinyEngine > 进入演练场" 前往

如您希望继续使用旧版演练场，依旧可以通过下面地址继续访问： 旧版演练场：opentiny.design/tiny-engine…

10. 【新体验】新官网 - UI 全面焕新

TinyEngine 官网首页 UI 全面焕新，带来更现代、更清爽的视觉体验。

• 全新设计：首页内容刷新，并采用现代化的设计语言，视觉更加清爽美观
• 响应式布局：完美适配各种屏幕尺寸，移动端访问更友好

访问新版官网：opentiny.design/tiny-engine

11.【新体验】新文档 - 全新文档体验

TinyEngine 文档与其他OpenTiny产品文档统一迁移至新docs子域名：

新域名：docs.opentiny.design/tiny-engine…

文档变化：

• 整体更统一，方便查找切换其他文档
• 同时也进行了全面的样式优化，阅读体验更佳

12. 【其他】功能细节优化&bug修复

• 修复物料baseUrl问题 by @hexqi
• 移除me接口冗余请求头 by @xuanlid
• 登录页响应式优化 by @lichunn
• 修复本地开发代理问题 by @hexqi
• 修复工具调用参数问题 by @hexqi
• 优化应用窗口打开方式 by @xuanlid
• 区块/页面管理预览修复 by @xuanlid
• 代码检查优化 by @hexqi
• 重定向文档地址更新 by @xuanlid
• 图表属性默认值支持 by @xuanlid
• 文档样式优化 by @xuanlid
• AI助手对话相关问题修复 by @hexqi
• 应用ID传参修复 by @lichunn
• 文档更新
  • 修改物料同步方案文档 by @lu-yg
  • 过期文档问题处理 by @xuanlid
  • 新增应用预览/资源管理文档 by @betterdancing

结语

回首这一年，TinyEngine 在开源社区的成长离不开每一位开发者和贡献者的支持。v2.10 版本作为春节前的最后一次发布，我们为大家带来了多项重磅特性：

特性	核心价值
模型驱动	零代码 CRUD，开发效率跃升
多租户与登录鉴权	云端协作、团队协作
应用中心与模板中心	应用管理、资产沉淀
出码预览	导出前预览，提升代码导出体验
自定义 MCP	扩展 AI 能力，集成企业服务
Schema 面板同步滚动	画布与代码视图联动
CSS 字段格式优化	对象格式，可读性更强
图表物料更新	配置平铺，更直观
新演练场	真实前后端，完整体验
新官网/文档	UI 焕新，体验升级

致谢

本次版本的开发和问题修复诚挚感谢各位贡献者的积极参与！同时邀请大家加入开源社区的建设，让 TinyEngine 在新的一年里成长得更加优秀和茁壮！

新春祝福

值此新春佳节即将到来之际，TinyEngine 团队衷心祝愿大家：

🧧 新年快乐，万事如意！ 🧧

愿新的一年里：

• 代码如诗行云流水
• 项目如期顺利上线
• Bug 远离，需求清晰
• 团队协作高效顺畅
• 事业蒸蒸日上，生活幸福美满！

🎊 春节快乐，阖家幸福！ 🎊

让我们在春节后带着满满的热情和能量，继续在未来道路上探索前行！

关于OpenTiny

欢迎加入 OpenTiny 开源社区。添加微信小助手：opentiny-official 一起参与交流前端技术～
OpenTiny 官网：opentiny.design
OpenTiny 代码仓库：github.com/opentiny
TinyEngine源码：github.com/opentiny/ti…

欢迎进入代码仓库 Star🌟TinyEngine、TinyVue、TinyPro、TinyNG、TinyCLI、TinyEditor
如果你也想要共建，可以进入代码仓库，找到 good first issue标签，一起参与开源贡献~

本文由体验技术团队张婷原创。

一、核心概念：两种架构的本质区别

无论是 Module 还是 Standalone，核心目标都是解决 Angular 应用中组件、指令、管道、服务的组织、依赖管理与复用问题，只是实现方式截然不同。

1. 传统架构：NgModule 模块机制

NgModule 是 Angular 原生的模块化方案，本质是一个“功能容器”，通过装饰器 @NgModule 定义，承担着“声明、导入、导出、提供”四大核心职责，将分散的功能聚合为一个可管理的单元。

其核心逻辑是“模块中心化”——所有组件必须归属某个模块，依赖通过模块统一导入，服务通过模块提供作用域，这种设计非常适合大型项目的分层与分工。

2. 革新方案：Standalone 独立组件

Standalone 是 Angular 为简化开发推出的轻量化方案，通过在组件装饰器中设置 standalone: true，让组件摆脱对 NgModule 的依赖，实现“组件自包含”。 其核心逻辑是“组件中心化”——组件自身可直接导入所需的模块、其他独立组件，无需在模块中声明，大幅精简了模板代码，降低了入门门槛。

二、实操对比：代码层面的直观差异

理论不如实操，我们通过一个简单的“根组件+头部组件”场景，对比两种模式的实现代码，感受其差异。

1. NgModule 实现方式

需创建模块文件（如 app.module.ts），集中管理组件、依赖和服务，步骤相对繁琐： HeaderComponent 需单独创建 header.component.ts 文件，模板内容需完整定义，同时模块中必须声明所有用到的组件，否则会报“组件未注册”错误。

// header.component.ts（传统组件，需在模块中声明）
import { Component } from '@angular/core';

@Component({
  selector: 'app-header',
  template: `
    系统头部
  `,
  styles: [`
    .header { padding: 16px; background: #f5f5f5; border-bottom: 1px solid #eee; }
    nav { margin-top: 8px; color: #666; }
  `]
})
export class HeaderComponent { }

// app.component.ts（根组件）
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    <app-header></app-header>
    Angular Module 模式示例
  `
})
export class AppComponent {
  showContent = true; // 控制内容显示，演示*ngIf指令用法
}

// app.module.ts（核心模块文件）
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { CommonModule } from '@angular/common'; // 提供*ngIf、*ngFor等基础指令

import { AppComponent } from './app.component';
import { HeaderComponent } from './header/header.component';

@NgModule({
  declarations: [
    // 声明模块内的组件、指令、管道（必须在此注册，否则无法使用）
    AppComponent,
    HeaderComponent
  ],
  imports: [
    // 导入依赖模块：BrowserModule用于浏览器渲染，CommonModule提供基础指令
    BrowserModule,
    CommonModule
  ],
  providers: [
    // 提供模块级服务（模块内所有组件共享同一个实例）
    { provide: 'API_BASE_URL', useValue: 'https://api.example.com' }
  ],
  bootstrap: [AppComponent] // 指定根组件，Angular启动时会渲染该组件
})
export class AppModule { }

// main.ts（应用启动入口文件）
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';

// 通过编译模块启动应用，这是传统Module模式的标准启动方式
platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.error('应用启动失败：', err));

2.Standalone 实现方式

无需模块文件，组件自身声明依赖，启动流程更简洁。

补充说明：独立组件可直接导入其他独立组件，无需额外声明；依赖导入遵循“按需导入”原则，仅导入当前组件所需模块，减少冗余。

// header.component.ts（独立头部组件，无需模块声明）
import { Component } from '@angular/core';
import { CommonModule } from '@angular/common'; // 自身导入所需模块

@Component({
  selector: 'app-header',
  standalone: true, // 标记为独立组件，摆脱模块依赖
  imports: [CommonModule], // 导入基础指令模块，用于后续可能的*ngIf等用法
  template: `
    独立组件头部<nav *首页 | 关于我们 | 联系我们
  `,
  styles: [`
    .header { padding: 16px; background: #e8f4f8; border-bottom: 1px solid #d1e7dd; }
    nav { margin-top: 8px; color: #333; }
  `]
})
export class HeaderComponent {
  showNav = true; // 组件内部状态，控制导航显示
}

// app.component.ts（独立根组件）
import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { HeaderComponent } from './header/header.component'; // 直接导入独立组件

// 抽离共享依赖（缓解重复导入问题，大型项目推荐用法）
const SharedDependencies = [CommonModule, HeaderComponent];

@Component({
  selector: 'app-root',
  standalone: true, // 核心标记：独立组件
  imports: [SharedDependencies], // 导入所需依赖（模块+独立组件）
  providers: [
    // 组件级服务：默认当前组件及子组件共享实例，若需全局单例可加providedIn: 'root'
    { provide: 'API_BASE_URL', useValue: 'https://api.example.com', providedIn: 'root' }
  ],
  template: `
<app-header></app-header>
    Angular Standalone 模式示例
  `
})
export class AppComponent {
  showContent = true;

  // 交互方法，演示组件基础功能
  toggleContent() {
    this.showContent = !this.showContent;
  }
}

// main.ts（独立组件启动入口）
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';

// 直接启动独立根组件，无需模块介入，启动流程更简洁
bootstrapApplication(AppComponent, {
  // 可选：全局配置，如提供全局服务（替代模块级providers）
  providers: [{ provide: 'GLOBAL_CONFIG', useValue: { env: 'production' } }]
})
  .catch(err => console.error('应用启动失败：', err));

三、传统与革新，孰优孰劣？

两种方案各有优劣，没有绝对的“完美”。

1. NgModule 的优缺点

优点：

• 成熟稳定，生态兼容：作为 Angular 核心机制，兼容所有第三方库、插件和传统项目，几乎无适配风险，是老项目维护的首选。

• 强模块化封装：适合大型团队协作，可按业务域（如用户模块、订单模块）拆分独立 NgModule，边界清晰，便于分工维护和权限管控。

• 集中式依赖管理：模块级统一导入依赖，避免多个组件重复导入相同模块，减少冗余代码，适合大量组件共享依赖的场景。

• 服务作用域清晰：模块级服务默认在模块内单例，无需额外配置即可实现“模块内共享、模块间隔离”，适合按模块隔离业务逻辑的场景。

缺点：

• 模块代码冗余：即使是简单组件，也需创建模块文件，编写 @NgModule 装饰器及 declarations/imports 等配置，增加无业务价值的模块代码。

• 学习成本：新手易混淆 declarations（声明组件）、imports（导入模块）、exports（导出组件）的用法，常出现“组件找不到”“指令未注册”等错误。

• 编译效率略低：模块是编译基本单元，修改一个组件可能触发整个模块的重新编译，大型模块会增加编译耗时。

• 组件复用成本高：组件必须绑定模块，跨项目复用单个组件时，需连带其所属模块一起复制，灵活性不足。

2. Standalone 的优缺点

优点：

• 轻量化，开发效率高：无需创建模块文件，入门门槛低，中小型项目、原型开发速度大幅提升。

• 精准依赖，代码精简：组件仅按需导入自身所需依赖，避免模块级导入带来的冗余依赖，代码更清晰、可维护性更强。

• 编译性能更优：独立组件是最小编译单元，修改单个组件仅触发自身重新编译，大型项目编译速度提升明显。

• 复用性强：组件完全独立于模块，跨项目复用只需复制组件文件，无需连带模块，是组件库开发的最优选择。

缺点：

• 依赖重复导入：多个独立组件需同一模块（如 CommonModule）时，需各自导入，易出现重复代码（可通过抽离共享组件模块导入缓解，如下图）。

• 部分老库适配不足：少数未升级的第三方库依赖模块级特性，需额外适配才能在独立组件中使用。

• 服务作用域配置复杂：默认是组件级单例，若需实现全局单例或模块级单例，需额外配置 providedIn: 'root' 或通过共享组件封装，比 NgModule 繁琐。

PS：

• 组件级单例：假如你有 3 个独立的 ButtonComponent，都注入了同一个 CountService，那么这 3 个组件会各有一个 CountService，点击按钮计数时，各自的数字不会互相影响。

• 全局级单例：全局只有一个服务实例”（比如用户登录状态、全局缓存）。

四、各有优劣，如何选择？

NgModule 代表了 Angular 传统的“强模块化”设计理念，Standalone 则是 Angular 对“轻量化、高效化”的探索，两者并非非此即彼的替代关系，而可以是互补关系。

• 全新中小型项目/原型开发：优先选择 Standalone 组件。轻量化特性可快速迭代，减少模板代码，降低团队协作成本。

• 大型企业级项目/多人协作：采用混合模式。保留核心业务模块（NgModule）的封装性，新开发的组件、指令使用 Standalone 模式，逐步迁移老组件，兼顾稳定性和开发效率。

总结

作为开发者，我们无需纠结于“哪种更好”，而是要理解两种方案的设计初衷，根据项目规模、团队结构、复用需求灵活选型。在实际开发中，可以选择混合使用两种模式，既能保留传统架构的稳定性，又能享受新范式的高效性。

一点拙见分享，抛砖引玉，欢迎大家与我交流补充，共同进步~

关于OpenTiny

欢迎加入 OpenTiny 开源社区。添加微信小助手：opentiny-official 一起参与交流前端技术～
OpenTiny 官网：opentiny.design
OpenTiny 代码仓库：github.com/opentiny
TinyVue源码：github.com/opentiny/ti…

欢迎进入代码仓库 Star🌟TinyVue、TinyEngine、TinyPro、TinyNG、TinyCLI、TinyEditor
如果你也想要共建，可以进入代码仓库，找到 good first issue标签，一起参与开源贡献~