简体繁体 English

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

[英]Angular + Firebase hosting: how to use static js file in website root?

原文 2019-11-03 15:30:16 3 1 angular/ firebase/ firebase-hosting/ stackblitz

I'm making PWA with Angular and Firebase.我正在使用 Angular 和 Firebase 制作 PWA。 Using StackBlitz for developing.使用 StackBlitz 进行开发。

I want to make "Add to home screen" Chrome standard advice working when user opens my app in browser, but I can't correctly call "service worker" JS from my code...当用户在浏览器中打开我的应用程序时，我想让“添加到主屏幕”Chrome 标准建议起作用，但我无法从我的代码中正确调用“服务工作者”JS ...

I created sw.js in /src folder of my project.我在项目的 /src 文件夹中创建了 sw.js。 I've added it to 'scripts' and 'assets' sections in.angular-cli.json and.angular.json.我已将其添加到 .angular-cli.json 和 .angular.json 中的“脚本”和“资产”部分。 And in StackBlitz everything works fine!在 StackBlitz 中一切正常！

But when I deploy project to Firebase (using Stackblitz build-in functionality) nothing works... Seems like server doesn't see the file in expected dir (/src/sw.js)... Did anybody face same problem?但是，当我将项目部署到 Firebase（使用 Stackblitz 内置功能）时，没有任何效果......似乎服务器在预期的目录（/src/sw.js）中看不到文件......有人遇到同样的问题吗？

1 个解决方案

I don't think there's a way to fix it, I'm pretty sure the problem is the stackblitz server.我认为没有办法解决它，我很确定问题出在 stackblitz 服务器上。 but luckily firebase engineers made a simple node script to replace a single file.但幸运的是 firebase 工程师制作了一个简单的节点脚本来替换单个文件。 It worked for me.它对我有用。 As the link describes just install git, and node, and then in command prompt run these commands: git如链接所述，只需安装 git 和节点，然后在命令提示符下运行以下命令：git

git clone https://gist.github.com/e00c34dd82b35c56e91adbc3a9b1c412.git firebase-hosting-deploy-file git clone https://gist.github.com/e00c34dd82b35c56e91adbc3a9b1c412.git firebase -hosting-deploy-file
cd firebase-hosting-deploy-file cd firebase-hosting-deploy-file
npm install npm安装
then Add your javascript file in the same file tree it is in stackblitz, for me it was in src/assets/scripts/alert.js, so i made an assets folder with a scripts folder, with my js file inside.然后将您的 javascript 文件添加到它在 stackblitz 中的同一文件树中，对我来说它在 src/assets/scripts/alert.js 中，所以我创建了一个带有脚本文件夹的资产文件夹，其中包含我的 js 文件。 do this all within the firebase-hosting-deploy-file directory.在 firebase-hosting-deploy-file 目录中执行所有这些操作。
the run this in prompt: "node deployFile.js [commit]", for me with my file structure it was "node deployFile.js otherproject-a5722 /assets/scripts/alert.js commit"在提示符下运行：“node deployFile.js [commit]”，对我来说，我的文件结构是“node deployFile.js otherproject-a5722 /assets/scripts/alert.js commit”

additional info:附加信息：

I tried replicating your problem, let me know if the link works.我尝试复制您的问题，如果链接有效，请告诉我。 https://stackblitz.com/edit/angular-epvm8w . https://stackblitz.com/edit/angular-epvm8w 。 Basically just in index.html.基本上就在 index.html 中。 the js file just has alert("alert"); js 文件只有 alert("alert"); in it.在里面。 it works like you said but when deployed i think the stackblitz server is replacing the content with html.它像你说的那样工作，但部署时我认为 stackblitz 服务器正在用 html 替换内容。 I think this because in chrome developers panel under sources the js file had the same html as the index template from stackblitz's github.我认为这是因为在源代码下的 chrome 开发人员面板中，js 文件与来自 stackblitz 的 github 的索引模板具有相同的 html。 Makes me think it's just a bug.让我觉得这只是一个错误。 same thing happened to a css file. css 文件也发生了同样的事情。