Angular 6.0 firebase 托管部署不工作

Question

我正在寻找有关如何在我的 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

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

Answer 1

我发现 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 并将 public 目录 从 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

Answer 2

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

Answer 3

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

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

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

连接到我们的 account/Gmail-account 后，我们将在浏览器中收到 firebase CLI 登录成功 消息

3]firebase init

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

? Are you ready to proceed? Yes
? Which Firebase CLI features do you want to setup for this folder? Press Space to select features, then Enter to confirm your choices. Hosting: Configure and deploy Firebase Hosting sites

? What do you want to use as your public directory? dist (This is important! Angular creates the dist folder.)

? Configure as a single-page app (rewrite all urls to /index. html)? Yes

4]ng build --prod

This will create a brand new dist/ folder in our project with the files necessary to launch our app.

5] 在部署应用程序之前，转到 firebase.json 文件并指定您的项目 public 字段，如下所示

"public": "dist/your_project_name",

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

firebase deploy

去多边形后你会得到下面的信息

Deploy complete!

Project Console: https://************ [you will get the actual url name rather than stars]

Hosting URL: https://************* [you will get the actual url name rather than stars]

you can access the website by the URL given in Hosting URL

Answer 4

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

Answer 5

@bajran 可能已经详细阐述了所有步骤，但如果您要从 angular 5 迁移到 6，唯一重要的步骤是，在 firebase.json

中将 "public": "dist", 更改为 "public": "dist/your_project_name",

Answer 6

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

初始化项目时

firebase init

命令并遵循该过程，默认情况下它会覆盖 index.html 文件。因此，如果已经构建（以获得 dist/_Project_Folder），index.html 文件将被覆盖。在

之后再次构建它

firebase init 
ng build --prod

Answer 7

问题是关于

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

如果您输入 Y 表示是 ，那么它将创建自己的 index.html 文件，由 Firebase 生成。为 No 提供此 N 我能够保留我原来的 index.html，它是在 ng build --prod 中使用 ng build --prod 后生成的=11=]。注意：我使用的是 Nx 工作区，但同样适用于其他 Angular 项目。在正常的 Angular 项目案例中，它将是不同的路径，这将只是 dist.

Answer 8

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

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

写N，试了很多次才弄明白

Answer 9

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

Answer 10

您可以检查是否创建了 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 再部署一次。现在您终于可以看到您的项目了！

内容不多，希望对您有所帮助。

Angular 6.0 firebase 托管部署不工作

Angular 6.0 firebase hosting deploy not working

firebase-hosting

firebase-tools

angular