1、modules 里注释掉ui_ugx
<modules>
<module>netty-mqtt</module>
<module>common</module>
<module>rule-engine</module>
<module>dao</module>
<module>edqs</module>
<module>transport</module>
<!-- <module>ui-ngx</module>-->
<module>tools</module>
<module>application</module>
<module>msa</module>
<module>rest-client</module>
<module>monitoring</module>
</modules>2、程序位置
3、注释相关程序
在 IntelliJ IDEA 中，注释程序的快捷键如下4：
- 单行注释：Windows/Linux 系统下使用
Ctrl + /，macOS 系统下使用Cmd + /。将光标移动到需要注释的行，按下快捷键可在行首添加注释符号//，再次按下则取消注释。 - 多行注释：Windows/Linux 系统下使用
Ctrl + Shift + /，macOS 系统下使用Cmd + Shift + /。先选中要注释的多行代码，然后按下快捷键会在选中的代码前后添加注释符号/* */，若要取消注释，光标在注释内容上按该快捷键即可。 - 方法或类的注释：在方法或类的开头输入
/**，然后按回车键，可自动根据参数和返回值生成注释模板。
4、配置前端服务器的代理规则
const forwardUrl = "http://localhost:8080";
const wsForwardUrl = "ws://localhost:8080";
const ruleNodeUiforwardUrl = forwardUrl;
const PROXY_CONFIG = {
"/api": {
"target": forwardUrl,
"secure": false,
},
"/static/rulenode": {
"target": ruleNodeUiforwardUrl,
"secure": false,
},
"/static/widgets": {
"target": forwardUrl,
"secure": false,
},
"/oauth2": {
"target": forwardUrl,
"secure": false,
},
"/login/oauth2": {
"target": forwardUrl,
"secure": false,
},
"/api/ws": {
"target": wsForwardUrl,
"ws": true,
"secure": false
},
};
module.exports = PROXY_CONFIG;5、程序解释
1. 定义代理配置对象 PROXY_CONFIG
javascript
const PROXY_CONFIG = {
使用 const 关键字声明了一个常量 PROXY_CONFIG，它是一个对象，用于存储多个代理规则。
2. 定义 /api 路径的代理规则
javascript
"/api": {
"target": forwardUrl,
"secure": false,
},
/api：这是一个路径匹配规则，表示当请求的路径以/api开头时，将应用此代理规则。target：指定代理目标地址，这里使用之前定义的forwardUrl常量，即"http://localhost:8080"。这意味着当请求以/api开头时，请求将被转发到http://localhost:8080。secure：设置为false表示在代理过程中不验证 SSL 证书，通常在开发环境中使用，以避免因自签名证书等问题导致的错误。
3. 定义 /static/rulenode 路径的代理规则
javascript
"/static/rulenode": {
"target": ruleNodeUiforwardUrl,
"secure": false,
},
/static/rulenode：路径匹配规则，当请求路径以/static/rulenode开头时应用此规则。target：使用ruleNodeUiforwardUrl常量，其值与forwardUrl相同，即"http://localhost:8080"。请求将被转发到该地址。secure：同样设置为false，不验证 SSL 证书。
4. 定义 /static/widgets 路径的代理规则
javascript
"/static/widgets": {
"target": forwardUrl,
"secure": false,
},
/static/widgets：路径匹配规则。target：使用forwardUrl，请求将被转发到http://localhost:8080。secure：设置为false。
5. 定义 /oauth2 路径的代理规则
javascript
"/oauth2": {
"target": forwardUrl,
"secure": false,
},
/oauth2：路径匹配规则。target：使用forwardUrl，请求将被转发到http://localhost:8080。secure：设置为false。
6. 定义 /login/oauth2 路径的代理规则
javascript
"/login/oauth2": {
"target": forwardUrl,
"secure": false,
},
/login/oauth2：路径匹配规则。target：使用forwardUrl，请求将被转发到http://localhost:8080。secure：设置为false。
7. 定义 /api/ws 路径的代理规则
javascript
"/api/ws": {
"target": wsForwardUrl,
"ws": true,
"secure": false
},
/api/ws：路径匹配规则。target：使用wsForwardUrl，即"ws://localhost:8080"，表示这是一个 WebSocket 请求的代理目标。ws：设置为true表示这是一个 WebSocket 代理，服务器将处理 WebSocket 连接。secure：设置为false，不验证 SSL 证书。
8. 导出代理配置对象
javascript
module.exports = PROXY_CONFIG;
使用 module.exports 将 PROXY_CONFIG 对象导出，以便其他模块可以引入并使用这个代理配置。在 Node.js 环境中，这是一种常见的模块导出方式。
6、复制UI_NGX,并用VS_CODE打开
7、安装并启动yarn
- 安装 Yarn
- 全局安装：如果你使用的是 npm，可以通过以下命令全局安装 Yarn：
bash
npm install -g yarn
- 全局安装：如果你使用的是 npm，可以通过以下命令全局安装 Yarn：
- 初始化项目
- 在项目根目录下运行以下命令，会引导你创建一个
package.json文件，其中包含项目的基本信息和依赖配置。bash
yarn init - 若要使用默认配置快速创建
package.json，可以添加-y选项：bash
yarn init -y
- 在项目根目录下运行以下命令，会引导你创建一个
依赖管理
- 安装依赖
- 安装所有依赖：在项目根目录下有
package.json文件时，运行此命令会安装其中指定的所有依赖。bash
yarn install
- 安装所有依赖：在项目根目录下有
- 运行
start脚本
bash
yarn start7、安装和启动信息
PS E:\ThingsBoard\front_end\ui-ngx> npm install -g yarn
added 1 package in 5s
npm notice
npm notice New major version of npm available! 10.9.2 -> 11.2.0
npm notice Changelog: https://github.com/npm/cli/releases/tag/v11.2.0
npm notice To update run: npm install -g npm@11.2.0
npm notice
yarn init v1.22.22
question name (thingsboard):
question version (4.0.0):
question description: ui_ngx
question entry point (index.js):
question repository url:
question author:
question license (MIT):
question private (true):
success Saved package.json
Done in 555.72s.
PS E:\ThingsBoard\front_end\ui-ngx> yarn install
yarn install v1.22.22
[1/4] Resolving packages...
warning Resolution field "esbuild@0.23.0" is incompatible with requested version "esbuild@^0.21.3"
$ patch-package
patch-package 8.0.0
Applying patches...
@angular/build@18.2.12 ✔
@angular/core@18.2.13 ✔
@mat-datetimepicker/core@14.0.0 ✔
angular-gridster2@18.0.1 ✔
canvas-gauges@2.1.7 ✔
jquery.terminal@2.44.1 ✔
tooltipster@4.2.8 ✔
Done in 1.47s.
PS E:\ThingsBoard\front_end\ui-ngx> yarn start
yarn run v1.22.22
$ node --max_old_space_size=8048 ./node_modules/@angular/cli/bin/ng serve --configuration development --host 0.0.0.0 --open
Node.js version v23.8.0 detected.
Odd numbered Node.js versions will not enter LTS status and should not be used for production. For more information, please see https://nodejs.org/en/about/previous-releases/.
Warning: This is a simple server for use in testing or debugging Angular applications
locally. It hasn't been reviewed for security issues.
Binding this server to an open connection can result in compromising your application or
computer. Using a different host than the one passed to the "--host" flag might result in
websocket connection issues. You might need to use "--disable-host-check" if that's the
case.
Initial chunk files | Names | Raw size
chunk-73WDU2OV.js | - | 4.33 MB |
main.js | main | 601.04 kB |
styles.css | styles | 565.29 kB |
polyfills.js | polyfills | 230.87 kB |
scripts.js | scripts | 189.76 kB |
chunk-SI2BA7CY.js | - | 180.05 kB |
chunk-6CL7JAHA.js | - | 86.23 kB |
chunk-MENE3GOZ.js | - | 76.79 kB |
chunk-L2SQKL3C.js | - | 43.84 kB |
chunk-MZW5XMY2.js | - | 36.18 kB |
chunk-63M355E4.js | - | 3.23 kB |
chunk-CKYI7XNO.js | - | 2.89 kB |
chunk-PSOCTSB3.js | - | 2.62 kB |
| Initial total | 6.35 MB
Lazy chunk files | Names | Raw size
chunk-NWRSS5AK.js | - | 15.51 MB |
home-pages.module-LFJCMKVM.js | home-pages-module | 2.79 MB |
rulechain-page.module-3Z5SQIAK.js | rulechain-page-module | 1.26 MB |
chunk-ZAW6F6ZR.js | - | 223.44 kB |
chunk-7YBANKQP.js | - | 100.16 kB |
map-widget2-SS37WMXJ.js | map-widget2 | 95.97 kB |
chunk-2ZLQYL36.js | - | 93.33 kB |
chunk-HL53M2SS.js | - | 53.31 kB |
chunk-3LGHA4C4.js | - | 35.64 kB |
mode-tbel-6U5H272S.js | mode-tbel | 30.38 kB |
chunk-UEBUGEM2.js | - | 28.32 kB |
chunk-A5TIOYK5.js | - | 24.73 kB |
chunk-ND3CTVRE.js | - | 22.49 kB |
digital-gauge-DWQZBK3I.js | digital-gauge | 9.51 kB |
chunk-MQYQLQFT.js | - | 7.75 kB |
...and 10 more lazy chunks files. Use "--verbose" to show all the files.
Application bundle generation complete. [123.521 seconds]
Watch mode enabled. Watching for file changes...
NOTE: Raw file sizes do not reflect development server per-request transformations.
➜ Local: http://localhost:4200/
➜ Network: http://192.168.247.1:4200/
➜ Network: http://192.168.43.1:4200/
➜ Network: http://192.168.3.11:4200/
➜ press h + enter to show help
14:37:59 [vite] http proxy error: /api/noauth/oauth2Clients?platform=WEB
AggregateError
at internalConnectMultiple (node:net:1139:18)
at afterConnectMultiple (node:net:1712:7)
Initial chunk files | Names | Raw size
main.js | main | 601.04 kB |
Lazy chunk files | Names | Raw size
chunk-GF4LRYXW.js | - | 15.51 MB |
home-pages.module-QPDNUWMQ.js | home-pages-module | 2.79 MB |
rulechain-page.module-RFJLOQUU.js | rulechain-page-module | 1.26 MB |
chunk-C3C7OJHQ.js | - | 223.44 kB |
chunk-TLUZPPSJ.js | - | 93.33 kB |
dashboard-pages.module-CMEL32ZA.js | dashboard-pages-module | 6.09 kB |
Application bundle generation complete. [141.937 seconds]
Page reload sent to client(s).
14:39:31 [vite] http proxy error: /api/noauth/oauth2Clients?platform=WEB
AggregateError
at internalConnectMultiple (node:net:1139:18)
at afterConnectMultiple (node:net:1712:7) (x2)
8、以下信息，表示代表服务器错误， 需运行thingsboard后台
9、前端通过4200端口访问后端成功
![MySQL基础 [一] - 数据库基础](https://i-blog.csdnimg.cn/direct/b1888f03385e41948d55517a96693427.png)
