Angular/Express 应用程序正在 Chrome 中查找旧的 javascript 文件

Question

我有一个 Angular Web 应用程序，由 Express 服务器提供服务。我发现当我更新我的应用程序并将其部署（到 Google App Engine）并刷新浏览器时，有时会出现空白页面和此错误：

main.f2b54282bab6f51a.js:1 Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.

Angular 中启用了输出哈希，您可以从 main.js 文件名中看到，错误中列出的文件名是来自 previous 部署的文件名。因此，浏览器似乎正在使用过时的缓存 JavaScript 文件。

在 Chrome 中执行“清空缓存并硬重新加载”可以修复该页面，这也表明这是缓存的问题。 （这个错误在 Firefox 中也会发生。我在 Safari 中还没有看到它。）

我认为浏览器可能正在缓存index.html页面，所以我尝试在Express中禁用应用程序的缓存：

 // serve angular app                                            
 let options = {                                                 
   setHeaders: (res, path, stat) => {                            
     res.set({                                                   
       'Cache-Control': 'no-store',                              
       'Expires': 0,                                             
     });                                                         
   }                                                             
 };                                                              
 app.use(express.static(__dirname + '/dist/dashboard', options));                                                                 

我可以使用

curl -v

验证这些标头在提供应用程序时是否正确设置，但问题仍然发生。

这实际上是缓存问题，还是其他原因？

Answer 1

我目前正在使用这个，它似乎有效：

 app.use((req, res, next) => {                                                                 
   let suffixes = ['.png', '.jpg', '.jpeg', '.svg', '.mp4', '.ico', '.json', '.js' ];          
   if (!suffixes.some(o => req.url.endsWith(o))) {                                             
     res.set('Cache-Control', 'no-cache, no-store, must-revalidate');                          
     res.set('Pragma', 'no-cache');                                                            
     res.set('Expires', '0');                                                                  
   }                                                                                           
   next();                                                                                     
 });                

 app.use(express.static(__dirname + '/dist/dashboard', options));                                                                 

它仅针对与角度路由相对应的 url 发送“不缓存此”标头；这样它仍然会缓存静态文件，例如缓存更有意义的图像。

请注意，我仍在缓存 Javascript 文件，因为 Angular 在名称中生成唯一的哈希值（例如

main.ea9376f39d804178.js

），因此在新部署后，将提供新文件。

最好查看 Chrome 调试器的网络部分中的请求，看看哪些请求正在缓存（即状态为 304），以确保它按照您的预期进行。