Firebase Hosting and Routes Angular Project doesn't work

1
votes

i create a website with Angular. I've finish it and i have deployed it in Firebase Hosting but after deploye i can't navigate in my website. I just have a 404 not found page from firebase hosting. Well when i start my website in localhost i don't have this problem, and i don't know how to solve it...

My app-routing.module.ts :

import { CommonModule } from '@angular/common';
import {RouterModule, Routes} from '@angular/router';
import {InfoMobileComponent} from './info-mobile/info-mobile.component';
import {ContactComponent} from './contact/contact.component';

const routes: Routes = [
  { path: '', redirectTo: '/info', pathMatch: 'full' },
  {
    path: 'info',
    component: InfoMobileComponent
  },
  {
    path: 'contact',
    component: ContactComponent
  },
];


@NgModule({
  declarations: [],
  imports: [
    CommonModule,
    RouterModule.forRoot(routes),
],
  exports: [ RouterModule ]
})
export class AppRoutingModule { }

My firebase.json :

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

And for information, i build my project to the folder " dist ".

2
angularfirebasefirebase-hosting

2 Answers

1
votes

When you say that you build your application in the "dist" folder does that mean that you have modified the basic configuration of angular so as not to put your build in a folder inside dist?

By default, Angular saves the build of the application in a "dist" sub-folder.

Example: dist / my-app

In the case where your build is located in a "dist" sub-folder, you must configure firebase like this:

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

PS : We must also remember to redirect all requests to index.html at the time of the "firebase init"

Hope to have helped you a little !

0
votes

I'm not sure if you found the answers you were needing. I was having issues as well when using Firebase. I had two issues when using Angular 10.

The first was needing to do add project name to the public line in the firebase.json. So it would be just how jboileau173 describes.

The second issue I had was on a redirect. The redirect kept giving a 404 page not found. I was using Angular Routing and everything worked locally. In order to get the redirect to work, I had to move my routing from the app-routing.module.ts and directly into the app.module.ts. So, now my app.module.ts has this line:

import { RouterModule } from '@angular/router';
    
import:[
    RouterModule.forRoot([
       { path: 'redirectPath', component: Redirectcomponent},
       { path: 'otherPathsNeeded', component: otherComponents}
    ])
]

I'm not claiming that is the best answer, but that is how I got it to work for me.

Hopefully you find your answer.