angular firebase hosting unsuccessful

Question

I am following this tutorial to build angular progressive web app.

I created project on firebase and successfully deployed it.

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!

hosting:

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$ 

However in my browser all I see is:

My project structure with dist folder:

Why this is happening?

Answer 1

That guide is for Angular 5 and how Angular apps get built changed in Angular 6.

When running firebase init one of the answers needs to change. The public directory is now app specific instead of just dist .

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

For an existing app you can change firebase.json from:

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

To:

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

This is because Angular is making it easier to build multiple apps with the CLI so they need their own folder within dist . pwa.ng is a more current guide if you want specific steps.