Deploying an Angular application on Firebase is a great way to

I am facing an issue with hosting my Angular(5) project on Firebase. Although I have successfully deployed the application, when I access the project URL, it displays a default Firebase hosting screen instead of my actual Angular project.

https://i.stack.imgur.com/AJB5j.png

Upon checking my firebase.json file, the current setup is as follows:

 {
  "hosting": {
    "public": "dist",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}

Prior to deployment, I ran ng build --prod --aot=false to generate a production folder in 'dist' within my Angular project directory. Despite this, my project is not visible at the specified URL. The structure of the dist folder looks like this:

https://i.stack.imgur.com/gL2NF.png

In addition, here is the configuration used for setting up Firebase init:

https://i.stack.imgur.com/AHHkT.png

angularfirebasehostingfirebase-hosting

Answer №1

Could you provide me with the complete tree directory structure of your application?

I am using an Angular application that is being hosted on Firebase Hosting. My firebase.json file is mostly similar to yours, except for this particular line:

{
  "hosting": {
    "public": "public/dist",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}

This could potentially be a solution... but it all depends on how your directory tree is structured. Please share your directory tree so we can compare and see if this configuration will work for you.

Answer №2

When working with Angular 6, it is essential to specify the project name in the public property.

{
  "hosting": {
    "public": "dist/projectName",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}

The inclusion of dist is necessary as this is the directory where the production files are stored after running the ng build --prod command.

Answer №3

First step: ng build --prod Once you complete the first step, a new folder named "dist" will be generated inside src/app/ with the content ready for deployment/hosting.

Second step: firebase deploy -p dist/<Enter Your Project Name here> For example, if your project is named "test", run: firebase deploy -p dist/test

During the second step, all files located in the dist folder will be deployed to Firebase hosting (you can verify this in the Firebase console).

Answer №4

Here is my process for deploying Angular 7.2.15 to Firebase:

  1. Begin by running firebase init

    • To proceed, answer "Yes"
    • Select "Hosting: Configure and deploy Firebase Hosting sites" as the Firebase CLI feature
    • Set your public directory as "dist"
    • Choose to configure as a single-page app with URL rewrite to /index.html
    • If prompted to overwrite existing dist/index.html file, select "No"

  2. Next step:

    Execute the command ng build --prod

After completing these steps, the project structure will look like this:

-.firebase
-dist
 - myapp
-node_modules
-myapp
  - dist
    -myapp
-public
-.firebaserc
-.gitignore
-.firebase.jsom
-package-lock.json

  1. Copy ALL FILES from myapp/dist/myapp into dist/myapp

  2. Lastly, run firebase deploy

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Issue with a child element that is malfunctioning because of the parent element

There seems to be an issue with the child tag link not working because of the parent tag link. Is there a solution for this problem? Please provide suggestions. Here is the code snippet: <div class="d-flex flex-wrap mx-auto mb-4"> < ...

htmlangular

Is it possible to send requests to multiple APIs using a TypeScript event handler?

I'm facing a challenge in pinging multiple APIs within a single function. It seems like it should be possible, especially since each API shares the same headers and observable. I attempted to write a function for this purpose, but unfortunately, it do ...

javascriptangulartypescript

How to access the result without using subscribe in Angular?

I am facing unexpected behavior with a method in my component: private fetchExternalStyleSheet(outerHTML: string): string[] { let externalStyleSheetText: string; let match: RegExpExecArray; const matchedHrefs = []; while (match = this.hrefReg.exe ...

angulartypescriptobservable

Exploring the depths of Angular's nested formGroups

I am facing a challenge in updating my form with data. There is a nested formGroup within another formGroup, and despite receiving the data, the form does not update; it remains empty. The data is visible in the logs, indicating an issue with the form&apos ...

angularangular-formbuilder

The Maven build encountered an error while trying to execute a goal, resulting in the inability to

I'm currently working on a Windows 7 computer and I've received some code that requires me to execute "mvn install" in order to build the application. However, when I try to run this command, I encounter the following error: Failed to execute ...

node.jswindowsangularmavennpm

The Angular Material date picker unpredictably updates when a date is manually changed and the tab key is pressed

My component involves the use of the Angular material date picker. However, I have encountered a strange issue with it. When I select a date using the calendar control, everything works fine. But if I manually change the date and then press the tab button, ...

javascripthtmlangulartypescriptangular-material

A guide to merging two JSON objects into a single array

Contains two different JSON files - one regarding the English Premier League stats for 2015-16 season and the other for 2016-17. Here is a snippet of the data from each file: { "name": "English Premier League 2015/16", "rounds": [ { "name": ...

javascriptangulartypescript

Issue with Firebase authentication during registration for a React application

Every time I attempt to register locally, I encounter the following error: "auth/network-request-failed", message: "A network error (such as timeout, interrupted connection or unreachable host) has occurred."} After registration, I'm simply directin ...

reactjsfirebasefirebase-authentication

Unable to retrieve values from input fields that have been established using interpolation

I'm currently developing a straightforward app that involves a form with formArray. Within the formArray, users can select a product name and amount. Once both are chosen, a third input field - total - computes the total price of the items (product pr ...

angularformsstring-interpolation

What steps can I take to ensure my CSS selector for the element is functioning properly?

Here is an example of some code: <html> <head> <style> .test{ background-color: red; p { background-color: yellow; } } </style> </head> <body> <div class="test"> ...

javascriptcssangular

How to Restrict the Use of Conditional "If" Statements in Another Function in Angular 7

How can I use an IF condition inside a function to only execute once for a specific action and not for another action? I have a function that is called twice, but I want the first "IF" condition inside the function to only be triggered when the add bank b ...

javascriptangular

Can projects be published on npm and installed from a specific directory?

Currently working on an Angular library project, I am exploring the possibility of publishing the entire library alongside a pre-built angular application either on gitlab or npm. However, my concern lies in ensuring that when a user installs the library v ...

angularnpmgitlab

enigmatic issue arising in Angular/Node

Could someone please shed some light on what might be causing the issue in my code? Thank you in advance! webpack: Compilation Failed. My Angular CLI: 1.6.3 Node: 8.9.4 OS: Windows 32-bit Angular: 5.2.1 Error Message: ERROR in ./node_modules/css-loader ...

angularjsangularnpmangular-ui-bootstrapbootstrap-4

The code below is not working as it should be to redirect to the home page after logging in using Angular. Follow these steps to troubleshoot and properly

When looking at this snippet of code: this.router.navigate(['/login'],{queryParams:{returnUrl:state.url}}); An error is displayed stating that "Property 'url' does not exist on type '(name: string, styles: AnimationStyleMetadata". ...

javascriptangulartypescriptfirebaseauthentication

Angular is facing a challenge in locating the main parent based on its class interface

After reading the angular documentation here, I implemented a Parent class like this: export abstract class Parent {} In the AlexComponent, I set this component as the Parent for its children with the following code: providers: [{ provide: Parent, useExis ...

angularparent-childangular14angular-providersangular-dependency-injection

The property 'toLowerCase' cannot be accessed as it is undefined or null

Scenario: A textbox is present with a list of data below it. Upon typing in the textbox, the list gets filtered based on the text entered. Code: Pipe: @Pipe({ name: 'search' }) export class SearchPipe implements PipeTransform { transform( ...

angulartypescriptpipe

Understanding vulnerabilities in Angular and implementing effective solutions to address them

click here to view the image Hello everyone, I encountered an error message while attempting to install Bootstrap in my project using the code npm install --saved bootstrap. Can anyone provide assistance in simpler terms? ...

angularnpmangular-ui-bootstrapangular-ng

Having trouble retrieving an Enum within an Angular template?

I am trying to use an enum to read a property of an array. However, I encountered an error with the following code: <ng-container *ngFor="let elem of list"> <div class="ui-g-12 ui-sm-12 ui-md-12 ui-lg-12 ui-xl-12"> &l ...

angulartypescriptenumsangular2-template

Testing Angular Library Before Release

My Angular library consists of modules, each containing services. I am looking for a way to easily test my library when I make changes to one of the services. Is there a simple solution that doesn't involve publishing and installing it in the main pr ...

angularnpm

Issues with property binding in Angular are causing problems

Suppose the app component has a variable defined for the value in the input field. However, every time the button event is triggered, the string is printed as empty and the binding does not seem to work at all. export class AppComponent { numVal =1235; ...

angular