Angular + Firebase托管：如何在网站根目录中使用静态js文件？

Question

我正在使用Angular和Firebase进行PWA。使用StackBlitz进行开发。

当用户在浏览器中打开我的应用程序时，我想使“添加到主屏幕” Chrome标准建议有效，但我无法从我的代码中正确调用“服务工作者” JS ...

我在项目的/ src文件夹中创建了sw.js。我已将其添加到.angular-cli.json和.angular.json中的“脚本”和“资产”部分。而且在StackBlitz中一切正常！

但是当我将项目部署到Firebase时（使用Stackblitz内置功能）没有任何效果...好像服务器在预期目录（/src/sw.js）中看不到文件...有人面对面吗？有问题吗？

Answer 1

我认为没有办法解决它，我很确定问题是stackblitz服务器。但是幸运的是，firebase工程师制作了一个简单的node script来替换单个文件。它为我工作。正如链接所描述的那样，只需安装git和node，然后在命令提示符下运行以下命令： git

1. git clone https://gist.github.com/e00c34dd82b35c56e91adbc3a9b1c412.git firebase-hosting-deploy-file
2. cd firebase-hosting-deploy-file
3. npm安装
4. 然后将您的javascript文件添加到stackblitz所在的同一文件树中，对我来说，它位于src / assets / scripts / alert.js中，因此我创建了一个带scripts文件夹的资产文件夹，其中包含我的js文件。在firebase-hosting-deploy-file目录中执行所有操作。
5. 在提示符“ node deployFile.js [commit]”中运行此文件，对我而言，我的文件结构是“ node deployFile.js otherproject-a5722 /assets/scripts/alert.js commit”

其他信息：

我尝试复制您的问题，让我知道链接是否有效。 https://stackblitz.com/edit/angular-epvm8w。基本上只是在index.html中。 js文件只是具有alert（“ alert”）;在里面。它像您所说的那样工作，但是在部署时，我认为stackblitz服务器正在将内容替换为html。我认为这是因为在chrome开发人员面板中的源代码下，js文件与来自stackblitz的github的索引模板具有相同的html。让我认为这只是一个错误。 CSS文件也发生了同样的事情。