JavaScriptSpellCheck集成Angular 5应用遇资源加载问题求助

我之前帮开发者搞定过这个工具的集成问题，你遇到的核心麻烦就是Angular的资源打包规则和库内部硬编码的路径不匹配，下面是一步步的实操解决方案：

1. 正确配置Angular资源目录 #

首先得让Angular把JavaScriptSpellCheck文件夹完整打包到构建后的dist目录里，修改你的angular-cli.json（Angular 5用的是这个配置文件）里的assets数组：

"apps": [
  {
    "name": "appname",
    "assets": [
      "assets",
      "favicon.ico",
      // 添加上这一行，确保整个文件夹被复制到dist根目录
      "JavaScriptSpellCheck"
    ],
    // 其他配置项...
  }
]

划重点：如果你的JavaScriptSpellCheck是放在项目根目录下的，这样配置后，构建时它会直接出现在dist文件夹根目录，对应URL就是/JavaScriptSpellCheck，完全符合工具的要求。

2. 修复库内部的路径引用bug #

这个工具的部分弹窗、设置界面等HTML文件里用了相对路径调用资源，Angular的路由机制会让这些路径解析出错。你需要手动调整库内的几个关键文件：

• 找到JavaScriptSpellCheck里的核心文件spellchecker.js，搜索里面的HTML模板引用（比如./spellchecker-dialog.html这类写法），把它们改成绝对路径/JavaScriptSpellCheck/spellchecker-dialog.html
• 同样检查所有内部引用的CSS、图片、子JS文件，确保路径都以/JavaScriptSpellCheck/开头，避免在不同路由页面下出现路径解析错误。

3. 正确引入库的核心脚本 #

在项目的index.html里，把工具的核心脚本放在</body>标签前引入：

<script src="/JavaScriptSpellCheck/spellchecker.js"></script>

别把这个脚本放到angular-cli.json的scripts数组里，因为这个工具需要在全局环境初始化，直接在index.html里引入可靠性更高。

4. 验证路径是否正常 #

启动Angular项目后，打开浏览器开发者工具的Network面板，触发拼写检查功能，看看请求的资源：

• 如果还有404错误，对比dist/JavaScriptSpellCheck下的文件结构，检查请求路径是否和实际文件路径一致
• 如果你的项目部署在子路径下（比如/my-app/），需要修改angular-cli.json里的apps[0].baseHref为/my-app/，同时把工具的所有路径改成/my-app/JavaScriptSpellCheck/，同步修正库内部的绝对路径。

额外小技巧 #

要是修改库内部文件嫌麻烦，你可以试试在Angular的proxy.conf.json里加代理规则，把/JavaScriptSpellCheck的请求转发到本地资源，但这只是临时 workaround，还是直接修正路径的方案更稳定。

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