angular firebase 托管失败

Question

我正在关注 this tutorial 构建 angular 渐进式网络应用。

我在 firebase 上创建了项目并成功部署了它。

You're about to initialize a Firebase project in this directory:

  /Users/nitish/development/ng-pwa

Before we get started, keep in mind:

  * You are initializing in an existing Firebase project directory

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

=== Project Setup

First, let's associate this project directory with a Firebase project.
You can create multiple project aliases by running firebase use --add, 
but for now we'll just set up a default project.

i  .firebaserc already has a default project, skipping

=== Hosting Setup

Your public directory is the folder (relative to your project directory) that
will contain Hosting assets to be uploaded with firebase deploy. If you
have a build process for your assets, use your build's output directory.

? What do you want to use as your public directory? dist
? Configure as a single-page app (rewrite all urls to /index.html)? Yes
? File dist/index.html already exists. Overwrite? No
i  Skipping write of dist/index.html

i  Writing configuration info to firebase.json...
i  Writing project information to .firebaserc...

✔  Firebase initialization complete!
shannon:ng-pwa nitish$ firebase deploy

=== Deploying to 'ng-pwa-6b066'...

i  deploying hosting
i  hosting: preparing dist directory for upload...
✔  hosting: 10 files uploaded successfully

✔  Deploy complete!

托管：

shannon:ng-pwa nitish$ firebase open hosting:site
Opening Hosting: Deployed Site link in your default browser:
https://ng-pwa-6b066.firebaseapp.com
shannon:ng-pwa nitish$

然而在我的浏览器中我看到的是：

我的项目结构与 dist 文件夹：

为什么会这样？

Answer 1

该指南适用于 Angular 5 以及 Angular 应用程序的构建方式在 Angular 6 中发生了变化。

当运行 firebase init 其中一个答案需要更改时。 public 目录现在是特定于应用程序的，而不仅仅是 dist.

What do you want to use as your public directory? dist/ng-pwa

对于现有应用，您可以将 firebase.json 更改为：

{
  "hosting": {
    "public": "dist",
    ...
  }
}

收件人：

{
  "hosting": {
    "public": "dist/ng-pwa",
    ...
  }
}

这是因为 Angular 使使用 CLI 构建多个应用程序变得更加容易，因此它们需要在 dist 中拥有自己的文件夹。如果您需要具体步骤，pwa.ng 是更新的指南。

angular firebase 托管失败

angular firebase hosting unsuccessful

firebase

firebase-hosting

progressive-web-apps

angular