Angular TypeScript项目引入外部JavaScript文件构建部署后报错Unexpected token '<'的问题

嘿，我来帮你搞定这个头疼的问题！你遇到的Unexpected token '<'错误其实很好理解——部署后你的应用请求widget.js时，拿到的根本不是JS文件，而是一段HTML代码（大概率是服务器返回的404错误页面），浏览器本来要解析JS，结果第一行是<标签，自然就报错了。

为啥本地好好的？因为本地开发时，你的静态资源服务器能正确找到widget.js的位置，请求返回的是正常的JS代码；但webpack构建部署后，要么是文件路径配置错了，要么是服务器没正确配置静态资源访问，导致找不到文件返回了HTML。

给你几个实用的解决步骤，按顺序试试：

• 把外部JS放到Angular默认静态资源目录
  先把你的widget.js复制到项目的src/assets文件夹里，这个目录是Angular默认会打包到dist目录的静态资源文件夹，不会被webpack混淆或遗漏。记得检查angular.json里的assets配置，确保包含这个目录：

  "assets": [
    "src/favicon.ico",
    "src/assets"
  ]
  

• 修正index.html里的script标签路径
  本地的相对路径在部署后可能失效，改成根目录相对路径，确保服务器能正确找到文件：

  <script src="/assets/widget.js"></script>
  

• 规范TypeScript的全局变量声明
  你之前用的declare var widget:any可以保留，但建议把它放到项目根目录的typings.d.ts文件里（没有的话新建一个），这样整个项目都能识别这个全局变量，避免局部声明的问题：

  declare var widget: any;
  

• 检查服务器的静态资源配置
  如果部署在Nginx、Apache这类服务器上，要确保服务器允许访问/assets目录下的静态文件。比如Nginx的配置可以加这么一段：

  location /assets {
      root /path/to/your/dist;
      expires 30d;
  }
  

  要是用其他服务器，也要确认静态资源的访问规则，别把JS请求误导向HTML页面。

• 进阶方案：让webpack直接管理外部JS（更稳妥）
  不想用script标签的话，可以让webpack把这个JS打包到你的项目bundle里：

  1. 先安装@types/node（如果没装）：

     npm install @types/node --save-dev
     

  2. 然后在angular.json的scripts数组里添加文件路径：

     "scripts": [
       "src/assets/widget.js"
     ]
     

  这样webpack会自动处理这个文件，部署时就不会出现路径问题了。

按照上面的步骤排查，应该就能解决这个报错啦！

备注：内容来源于stack exchange，提问作者WIlson PC