Visual Studio默认Angular项目模板首次运行触发未处理异常

嘿，这种默认模板里蹦出来的错误确实挺闹心的，我之前也碰到过类似情况，大概率是浏览器兼容、依赖问题或者缓存搞的鬼，下面给你拆解原因和修复办法：

原因1：旧浏览器不支持ES6的Object.assign #

Object.assign是ES6新增的方法，如果你用的是IE11或者更早的旧浏览器，原生根本不认这个方法，自然就找不到它的apply属性了——默认模板一般不会默认开启旧浏览器兼容。

修复步骤： #

• 打开项目里的src/polyfills.ts文件，把下面这行代码的注释去掉：

  import 'core-js/es/object/assign';
  

  要是想更全面兼容，也可以直接引入整个ES6对象相关的polyfill：

  import 'core-js/es/object';
  

• 重新构建项目：终端跑ng build，或者在VS里重新生成解决方案，再启动应用试试。

原因2：依赖安装不完整或文件损坏 #

有时候NuGet/npm依赖安装到一半出问题，导致vendor.js里的代码抽风，比如Object被意外覆盖成了null或者undefined，自然调用不了apply。

修复步骤： #

1. 删除项目根目录下的node_modules文件夹，还有package-lock.json（用yarn的话删yarn.lock）；
2. 终端运行npm install（yarn用户跑yarn install），重新把所有前端依赖装一遍；
3. 清理.NET的缓存：终端跑dotnet clean，接着dotnet restore，再重启项目。

原因3：浏览器缓存了损坏的静态文件 #

有时候浏览器死死抱着旧的vendor.js不肯放，而旧文件刚好是损坏的，就会出这个错。

修复步骤： #

• 先硬刷新页面：Windows/Linux按Ctrl+Shift+R，Mac按Cmd+Shift+R，强制浏览器重新加载所有资源；
• 要是开发环境不想再被缓存坑，可以改一下ASP.NET Core的静态文件配置：在Program.cs（或者老版本的Startup.cs）里，把静态文件的缓存关了：

  app.UseStaticFiles(new StaticFileOptions
  {
      OnPrepareResponse = ctx =>
      {
          ctx.Context.Response.Headers.Append("Cache-Control", "no-cache, no-store, must-revalidate");
          ctx.Context.Response.Headers.Append("Pragma", "no-cache");
          ctx.Context.Response.Headers.Append("Expires", "0");
      }
  });
  

额外排查点 #

• 检查.NET Core和Angular的版本匹配：有些版本组合天生有兼容性问题，尽量用官方推荐的搭配；
• 看看浏览器控制台的其他错误：有时候这个apply错误只是连锁反应，比如某个模块加载失败，先把前面的错误搞定，这个问题可能自动就没了。

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