Why after the deploy of my Angular application on Firebase Hosting service I am obtaining this page?

0
votes

I am trying to deploy an Angular application on Firebase and I am finding some problem.

First I entered into my project directory and I build my project for production by:

developer@developer-virtual-machine:~/Documents/Angular-WS/color_patch$ ng build --prod

After that the project builded correctly I obtained this folder structure into the dist directory of my project:

enter image description here

this /dist/ folder contains the build process output (included the index.html file)

Then I have done:

firebase init

and I selected this voice: Hosting: Configure and deploy Firebase Hosting sites

following it asked me:

  1. What do you want to use as your public directory? (public): I wrote dist because here was created the color_patch directory that should be my package that have to be deployed

  2. Configure as a single-page app (rewrite all urls to /index.html)? I wrote yes

  3. File dist/index.html already exists. Overwrite? (y/N) I wrote yes

It complete without problem

Then I go into my project directory and I deploy my project by this command:

developer@developer-virtual-machine:~/Documents/Angular-WS/color_patch$ firebase deploy

It complete without error (it says "Deploy complete!")

If I go into my Firebase console, into the hosting section, I can see my deploy and the correct number of files uploaded.

The problem is that, trying to access to the URL of my deployed application I am now obtaining a page containing this message instead my web application:

enter image description here

Why? What is wrong? What am I missing?

1
angularfirebasefirebase-hosting
Did you finish whole process properly ? – Ashish
@Ashish what do you mean? I think yes...I have no error message – AndreaNobili
Give me some time i'll show proper steps for you. – Ashish
@Ashish thatnk you men, waiting for you :-) – AndreaNobili
Please read the answer might help you – Ashish

1 Answers

1
votes

When you get project from you're firebase project with Firebase init.

This is what you get in folder.

Project Structure

In Project structure there is index.html exists. which is firebase hosting documentation file.

For Angular you have to make little changes for deployment.

Like make changes in your

Either just install angular project in you're firebase initialized project

or

you have to provide outputPath from angular.json as you're public directory of firebase project.

Second Image

Then run command as in your angular project:

ng build --prod

It will create the files for hosting in you're firebase project public folder.

Then just run the command :

firebase deploy

For more information about that you can read this documentation