Search code examples
angularfirebaseangularfire

Angularfire doesn't load app-root

I have a angularfire app that works perfect when I run it in my localhost. When I deploy it to firebase it doesn't give me any error in the console or in the browser's console. I can see my app-root component when I inspect the page BUT it doesn't load the components so my page appears blank.

index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>JM</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
  <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

</head>
<body>

  <app-root></app-root>
</body>
</html>

firebase.json

{
  "hosting": {
    "public": "src"
  }
}

File structure:

enter image description here

Commands I ran to deploy to firebase:

ng build --prod
firebase deploy

No errors when I ran these commands

Solution

  • You have your hosting config set to deploy the "src" folder which isn't valid browser code. It's all TypeScript. You need to deploy the "dist" folder which is the compiled code that works in the browser.

    Change your firebase.json to:

    {
  "hosting": {
    "public": "dist"
  }
}