Angular 6.0 firebase 托管部署不起作用

Posted 2023-02-22

【中文标题】Angular 6.0 firebase 托管部署不起作用

【英文标题】：Angular 6.0 firebase hosting deploy not working

【发布时间】：2018-10-25 21:27:21

【问题描述】：

我正在寻找有关如何在我的 Angular 6.0 项目上正确设置 firebase-tools 托管的教程，而我发现的总是这样。

- firebase init 
- then select the Hosting
- What do you want to use as your public directory? dist
- Configure as a single-page app (rewrite all urls to /index.html)? Yes
- Overwrite? No
- ng build --prod
- firebase deploy

但是在这样做之后，这就是我所拥有的。

【参考方案1】：

您可以检查是否创建了 firebase.json 和 .firebaserc 文件。如果没有，此解决方案适合您。

第 1 步：在您部署 firebase 并且它不工作后，您可以创建 firebase.json 文件并粘贴此代码：

 "database": 
"rules": "firebase_rules.json",
"hosting": 
"public": "dist/"yourdistfilename",
"ignore": [
  "firebase.json",
  "**/.*",
  "**/node_modules/**"
  ]  
 

第 2 步：创建 firebase_rules.json 并粘贴此代码：

  "rules": 
    ".read": false,
    ".write": false
 

请注意，您将文件命名为 firebase.json 和 firebase_rules.json

第 3 步：在终端中运行这个 firebase 初始化数据库。此问题将出现并跟随答案。

实时数据库安全规则应该使用什么文件？ firebase_rules.json 文件 firebase_rules.json 已经存在。是否要使用实时数据库安全规则 (y/N) y 覆盖它（以覆盖并更新到最新代码）

第 4 步：然后您会注意到 .firebaserc 已创建。

第 5 步：您需要再运行一次 firebase init 和 firebase deploy。现在你终于可以看到你的项目了！

虽然不多，但希望能有所帮助。

【参考方案2】：

当我在网络上使用ctrl+shift+R 硬重置清除缓存时，它起作用了！确保在 firebase 上部署了正确的 index.html 文件。

【参考方案3】：

如果你没有单页应用（比如我），当 Firebase 询问时

File dist/apps/ditectrev/index.html already exists. Overwrite?

写N。我试了很多次才弄明白

【参考方案4】：

以下是在 firebase 上托管 angular6.0 应用程序的分步过程

1]npm install -g firebase-tool安装firebase工具

2] firebase login 使用 CLI 工具登录 Firebase。

连接到我们的帐户/Gmail 帐户后，我们将在浏览器中收到 firebase CLI Login Successl 消息

3]firebase init

以下是 Firebase 工具将提出的问题的答案：

？你准备好继续了吗？ 是的 ?您有哪些 Firebase CLI 功能 想要设置这个文件夹？按 Space 选择功能，然后 输入以确认您的选择。 托管：配置和部署 Firebase 托管网站

？你想用什么作为你的公共目录？ dist (This is important! Angular creates the dist folder.)

？配置为单页应用程序（将所有 url 重写为 /index. html)? 是的

4]ng build --prod

这将在我们的项目中创建一个全新的 dist/ 文件夹，其中包含 启动我们的应用所需的文件。

5] 在部署应用程序之前，转到 firebase.json 文件并像这样指定您的项目公共字段

"public": "dist/your_project_name",

6] 现在使用以下命令在 firebase 中部署项目

firebase 部署

解压后会收到如下信息

部署完成！

项目控制台：https://************ [你会得到实际的 url 名字而不是星星]

Hosting URL: https://************* [你会得到实际的 url 名称 而不是星星]

您可以通过 Hosting URL 中给出的 URL 访问该网站

【讨论】：

编辑 firebase.json 以更新公用文件夹是关键，它就像魅力一样。谢谢:)

【参考方案5】：

问题是关于问题的

文件 dist/apps/ditectrev/index.html 已经存在。覆盖？

如果您输入 Y 表示是，那么它将创建自己的 index.html 文件，由 Firebase 生成。给出这个 N 表示否，我能够保留我原来的 index.html，它是在 dist/apps/ditectrev 中使用 ng build --prod 后生成的。注意：我使用的是 Nx 工作区，但同样适用于其他 Angular 项目。在正常的 Angular 项目情况下，它会是不同的路径，只是 dist。

【参考方案6】：

还有一个问题可能会导致这一页。 当我们使用

初始化项目时

firebase init

命令并按照程序，默认情况下会覆盖 index.html 文件。 因此，如果已经构建（以获取 dist/_Project_Folder），则 index.html 文件将被覆盖。

之后再次构建它

firebase init 
ng build --prod

【参考方案7】：

@bajran 可能已经详细说明了所有步骤，但如果您要从 angular 5 迁移到 6，唯一重要的步骤是， 在 firebase.json 中将 "public": "dist", 更改为 "public": "dist/your_project_name",

【参考方案8】：

在我删除缓存并刷新浏览器后它对我有用，谢谢。

【讨论】：

谢谢伙计。我厌倦了部署和尝试，直到阅读了您的评论并清除缓存。

我不敢相信我部署了多少次都没有结果，试图让它发挥作用。感谢 user698314！

帮了我很大的忙！！

这成功了！我真的不能感谢你！

【参考方案9】：

第二种可能的方法是将angular.json中的outputPath更改为dist，因此该行将如下所示"outputhPath": "dist"

【讨论】：

这为我解决了问题。在它在 dist 中创建一个包含所有构建文件的新文件夹之前。

【参考方案10】：

我发现ng build --prod 将创建一个dist 和另一个子文件夹，该文件夹位于项目所在的位置。

dist
|--TheProject_Folder
|  |--assets|index.html - This index html is not using.
|--index.html - This is the html generated in the firebase init

所以我所做的是再次初始化firebase init 并将公共目录从dist更改为dist/TheProject_Folder：

- What do you want to use as your public directory? dist/TheProject_Folder
- Configure as a single-page app (rewrite all urls to /index.html)? Yes
- Overwrite? No

【讨论】：

Angular v6 CLI 项目让多个应用程序共享代码库变得更加容易。因此dist 中的新文件夹。我最近推出了一个新的guide for Angular on Firebase，你可能会觉得有趣。

或.. 只需编辑firebase.json，将“public:dist”更改为“public:dist/your_project_folder”

它对我有用。我部署了几分钟就生效了

覆盖？ N 修复了问题

将公共目录从 dist 更改为 dist/TheProject_Folder 就可以了。非常感谢！