Angular 16集成noVNC及启动终端模块导入错误求助

问题描述 #

在Angular 16应用中集成noVNC时，无法导入所需模块启动服务，尝试三种导入方式：

import * as RFB from "../../../node_modules/novnc/core/rfb.js";
import RFB from '@novnc/novnc/core/rfb';
import { RFB } from 'novnc';
public rfb: RFB;

均触发以下错误：

Module not found: Error: Can't resolve '../../app/ui.js' in 'C:\Chethan\Projects\VM-ware\nexus_gui\node_modules\novnc\lib\input'

参考旧版Angular示例项目后仍无法解决问题。

解决方案 #

1. 安装兼容版本的noVNC #

部分noVNC版本存在路径解析bug，优先安装经过验证的兼容版本：

npm uninstall novnc
npm install @novnc/novnc@1.4.0

2. 配置Angular打包规则 #

修改导入语句为标准包路径：

import RFB from '@novnc/novnc/core/rfb';

打开angular.json，在build.options中添加allowedCommonJsDependencies，让webpack正确识别noVNC依赖：

"build": {
  "builder": "@angular-devkit/build-angular:browser",
  "options": {
    // 其他现有配置
    "allowedCommonJsDependencies": [
      "@novnc/novnc"
    ]
  }
}

3. 本地资源导入（备选方案） #

若上述方法无效，将noVNC核心文件复制到项目assets目录，调整导入路径：

import RFB from '../assets/novnc/core/rfb.js';

注意：复制时需同步调整rfb.js及依赖文件内的相对路径，确保打包时能正确解析。

4. 全局CDN引入（快速方案） #

在index.html中直接引入CDN资源：

<script src="https://unpkg.com/@novnc/novnc@1.4.0/core/rfb.js"></script>

组件中声明全局变量后使用：

declare const RFB: any;

export class VncComponent {
  rfb: any;

  initVncConnection() {
    const container = document.getElementById('vnc-container');
    this.rfb = new RFB(container, 'ws://your-vnc-server-address');
  }
}

内容的提问来源于stack exchange，提问作者chethu