OFSC托管插件开发问题：Angular构建资源404及极简方案咨询

核心结论 #

完全可以仅用纯HTML/JS/CSS开发OFSC插件，无需Angular、require等复杂框架或库，足以满足你打印init和open数据的需求。

路径404问题根源 #

你之前Angular打包的插件出现404，是因为Angular默认生成的资源引用为绝对路径（如/polyfills.js），而OFSC插件部署在平台的子路径下，绝对路径会指向OFSC服务器根目录，导致资源找不到。

极简实现方案（两种可选） #

方案1：单文件内嵌式（最稳妥，无路径问题） #

只需要一个index.html文件，将JS和CSS全部内嵌，打包zip后直接上传：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>OFSC Minimal Plugin</title>
    <style>
        /* 可选极简样式，按需调整 */
        body { font-family: Arial, sans-serif; padding: 1rem; }
    </style>
</head>
<body>
    <h3>OFSC Minimal Debug Plugin</h3>

    <script>
        // 监听插件初始化事件，打印init数据
        document.addEventListener('pluginInitialize', (event) => {
            console.log('=== Plugin Initialize Data ===');
            console.dir(event.detail);
        });

        // 监听插件打开事件，打印open数据
        document.addEventListener('pluginOpen', (event) => {
            console.log('=== Plugin Open Data ===');
            console.dir(event.detail);
        });
    </script>
</body>
</html>

方案2：多文件分离式（保持代码结构清晰） #

如果需要拆分HTML、JS、CSS文件，必须使用相对路径（以./开头）引用资源：

1. index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>OFSC Minimal Plugin</title>
    <link rel="stylesheet" href="./styles.css">
</head>
<body>
    <h3>OFSC Minimal Debug Plugin</h3>
    <script src="./script.js"></script>
</body>
</html>

2. script.js

// 监听初始化事件
document.addEventListener('pluginInitialize', (event) => {
    console.log('=== Plugin Initialize Data ===');
    console.dir(event.detail);
});

// 监听打开事件
document.addEventListener('pluginOpen', (event) => {
    console.log('=== Plugin Open Data ===');
    console.dir(event.detail);
});

3. styles.css

body { font-family: Arial, sans-serif; padding: 1rem; }

部署步骤 #

1. 将所有文件打包成一个zip压缩包（确保文件在zip根目录，不要嵌套文件夹）
2. 上传到OFSC插件设置页，配置插件触发条件（如对应实体、事件）
3. 启动插件后，打开浏览器开发者工具的控制台，即可看到打印的init和open数据

若坚持使用Angular的修正方案 #

如果一定要用Angular开发，构建时需指定相对路径：

• 修改angular.json中projects.architect.build.options.baseHref为./
• 或执行构建命令时添加参数：ng build --base-href ./
  这样打包后的资源引用会变成相对路径，避免404问题。

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