DevUI 是华为云开源的企业级 UI 组件库，它从华为云 DevCloud 研发工具体系孵化而来。其官网的介绍写道：“DevUI Design 可以让开发人员专门专注于应用逻辑的思考，而设计人员专注于用户体验，交互和流程。”

DevUI 基于 Angular 框架，提供了功能强大、场景丰富的多种组件，如 Tree、Table 等。DevUI 倡导沉浸、灵活、至简的设计价值观，提倡设计者为真实的需求服务，为多数人进行设计，拒绝哗众取宠、取悦眼球的设计。

DevUI 是一款面向企业中后台产品的开源前端解决方案，源自华为内部多年的业务沉淀，致力于通过组件库和设计体系提升开发效率与体验一致性。

• 核心定位与技术基础：基于 Angular 框架构建，提供开箱即用的 UI 组件库，强调“高效、开放、可信、乐趣”的设计价值观，适用于复杂的企业级应用开发。
• 关键特性：
  • 组件库丰富性：涵盖表格（DTable）、表单、弹窗等高频组件，支持虚拟滚动、行展开、列拖拽等高级功能，优化大数据量场景下的性能。
  • 自定义与扩展能力：允许开发者基于 DevUI 规范创建自定义组件，集成外部库（如 D3.js），并通过依赖注入确保可维护性。
  • 主题定制化：通过 CSS 变量和 SCSS mixin 实现品牌主题与暗黑模式动态切换，支持多品牌系统响应式布局。
• 应用场景与实践：在云控制台、风控系统等大型项目中，通过模块化加载、组件复用（复用率达 85%）及性能监控工具，将页面加载时间优化至 800ms 以内。
• 生态整合与创新：与 AI 工具（如 MateChat）结合实现智能交互，并探索低代码化方向，通过可视化拖拽生成代码骨架。

DevUI 通过完整的开发工具链（如环境搭建指南和教程）降低上手门槛，适合需要快速构建高一致性企业应用的团队。

---

安装DevUI：

1. 安装@angular/cli：

@angular/cli 是 Angular 官方提供的命令行接口（CLI），用于简化 Angular 应用的创建、开发、测试和部署流程。它是一个核心工具，帮助开发者自动化常见任务，如项目初始化、代码生成、构建和调试。‌

npm install -g @angular/cli@18.0.0  # 全局安装
ng version                   # 验证安装

Angular版本，当前支持的Angular版本 ^18.0.0

---

2. 创建一个项目

推荐使用@angular/cli创建你的项目

ng new New-Project

---

安装

进入你的项目文件夹，使用npm安装DevUI

npm i ng-devui

可选，字体图标库, 部分Demo依赖此字体库

# npm i @devui-design/icons

---

3. 引入模块

import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { DevUIModule } from 'ng-devui';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RouterOutlet, DevUIModule],
  templateUrl: './app.component.html',
  styleUrl: './app.component.less'
})
export class AppComponent {
  title = 'New-Project';
}

NG0210: The document object is not available in this context. Make sure the DOCUMENT injection token is provided.

解决方案：NG0210 错误的详细分析与修复步骤

一、错误原因

NG0210 错误表示在当前上下文中无法访问 document 对象。这通常发生在以下场景：

服务或组件初始化阶段‌：Angular 尚未完全初始化 DOM，导致 document 未准备好。
非浏览器环境‌：如服务器端渲染（SSR）或 Web Worker 环境中，document 对象不可用。

二、解决方案

使用 DOCUMENT 注入令牌‌
Angular 提供了 DOCUMENT 注入令牌，确保在安全上下文中访问 document。

import { DOCUMENT } from '@angular/common';
import { Inject } from '@angular/core';

constructor(@Inject(DOCUMENT) private document: Document) {
  // 安全访问 document 对象
  this.document.body.style.backgroundColor = 'lightblue';
}

延迟操作至 DOM 完全加载‌
使用 NgZone 或 setTimeout 确保操作在 DOM 完全渲染后执行。

import { NgZone } from '@angular/core';

constructor(private ngZone: NgZone) {
  this.ngZone.runOutsideAngular(() => {
    setTimeout(() => {
      this.document.body.style.backgroundColor = 'lightblue';
    });
  });
}

三、关键点说明

注入令牌的优势‌：DOCUMENT 令牌自动处理不同环境（浏览器/SSR）的兼容性，避免直接访问全局 document 可能引发的错误。

• 性能优化‌：延迟操作可减少初始渲染开销，提升应用性能。
• 错误预防‌：在服务或组件中直接访问 document 时，优先使用 DOCUMENT 注入令牌，避免 NG0210 错误。

如需进一步排查，可检查 angular.json 中的 server 配置，确保 extraProviders 正确注入 DOCUMENT。

---

ERROR ReferenceError: document is not defined
    at Object._document (/Users/david/test/New-Project/.angular/cache/18.2.21/New-Project/vite/deps_ssr/chunk-AJBEBQTB.js:8200:15)
    at Object.factory (/Users/david/test/New-Project/.angular/cache/18.2.21/New-Project/vite/deps_ssr/chunk-5T2TB3DN.js:14925:32)
    at eval (/Users/david/test/New-Project/.angular/cache/18.2.21/New-Project/vite/deps_ssr/chunk-5T2TB3DN.js:14846:35)
    at runInInjectorProfilerContext (/Users/david/test/New-Project/.angular/cache/18.2.21/New-Project/vite/deps_ssr/chunk-5T2TB3DN.js:13462:5)
    at R3Injector.hydrate (/Users/david/test/New-Project/.angular/cache/18.2.21/New-Project/vite/deps_ssr/chunk-5T2TB3DN.js:14845:11)
    at R3Injector.get (/Users/david/test/New-Project/.angular/cache/18.2.21/New-Project/vite/deps_ssr/chunk-5T2TB3DN.js:14735:23)
    at R3Injector.get (/Users/david/test/New-Project/.angular/cache/18.2.21/New-Project/vite/deps_ssr/chunk-5T2TB3DN.js:14740:27)
    at injectInjectorOnly (/Users/david/test/New-Project/.angular/cache/18.2.21/New-Project/vite/deps_ssr/chunk-5T2TB3DN.js:13580:36)
    at ɵɵinject (/Users/david/test/New-Project/.angular/cache/18.2.21/New-Project/vite/deps_ssr/chunk-5T2TB3DN.js:13586:59)
    at injectArgs (/Users/david/test/New-Project/.angular/cache/18.2.21/New-Project/vite/deps_ssr/chunk-5T2TB3DN.js:13629:17)
17:22:07 [vite] Internal server error: NG0210: The document object is not available in this context. Make sure the DOCUMENT injection token is provided.
      at getDocument (/Users/david/test/New-Project/.angular/cache/18.2.21/New-Project/vite/deps_ssr/chunk-5T2TB3DN.js:18038:9)
      at Object.initTransferState (/Users/david/test/New-Project/.angular/cache/18.2.21/New-Project/vite/deps_ssr/chunk-5T2TB3DN.js:18075:52)
      at eval (/Users/david/test/New-Project/.angular/cache/18.2.21/New-Project/vite/deps_ssr/chunk-5T2TB3DN.js:14846:35)
      at runInInjectorProfilerContext (/Users/david/test/New-Project/.angular/cache/18.2.21/New-Project/vite/deps_ssr/chunk-5T2TB3DN.js:13462:5)
      at R3Injector.hydrate (/Users/david/test/New-Project/.angular/cache/18.2.21/New-Project/vite/deps_ssr/chunk-5T2TB3DN.js:14845:11)
      at R3Injector.get (/Users/david/test/New-Project/.angular/cache/18.2.21/New-Project/vite/deps_ssr/chunk-5T2TB3DN.js:14735:23)
      at injectInjectorOnly (/Users/david/test/New-Project/.angular/cache/18.2.21/New-Project/vite/deps_ssr/chunk-5T2TB3DN.js:13580:36)
      at ɵɵinject (/Users/david/test/New-Project/.angular/cache/18.2.21/New-Project/vite/deps_ssr/chunk-5T2TB3DN.js:13586:59)
      at inject (/Users/david/test/New-Project/.angular/cache/18.2.21/New-Project/vite/deps_ssr/chunk-5T2TB3DN.js:13595:10)
      at Object.useFactory (/Users/david/test/New-Project/.angular/cache/18.2.21/New-Project/vite/deps_ssr/chunk-5T2TB3DN.js:35081:31)

Component 'AppComponent2' is not resolved:
 - templateUrl: ./app.component.html
 - styleUrl: ./app.component.less
Did you run and wait for 'resolveComponentResources()'?

✘ [ERROR] TS-991010: 'imports' must be an array of components, directives, pipes, or NgModules.
  Value is a reference to 'NgModule'. [plugin angular-compiler]

    src/app/app.component.ts:10:64:
      10 │ ...s: [RouterOutlet, DevUIModule, BrowserAnimationsModule, NgModule],
         ╵                                                            ~~~~~~~~

  Reference is declared here.

    node_modules/@angular/core/index.d.ts:7453:21:
      7453 │ export declare const NgModule: NgModuleDecorator;
           ╵                      ~~~~~~~~

DevUI是华为云开源的企业级Angular UI组件库，源自华为内部业务沉淀，专注于提升开发效率和体验一致性。其核心特性包括丰富的组件库（支持虚拟滚动、列拖拽等高级功能）、灵活的主题定制（CSS变量/SCSS实现动态换肤）以及强大的扩展能力。通过模块化设计和85%的组件复用率，在华为云控制台等项目中实现800ms内的页面加载优化。DevUI配套完整的开发工具链，并与AI工具MateChat深度整合，支持低代码开发方向。安装需Angular CLI 18.0.0环境，适用于快速构建复杂企业级应用。

---

MateChat：https://gitcode.com/DevCloudFE/MateChat
MateChat官网：https://matechat.gitcode.com
DevUI官网：https://devui.design/home