Search code examples
firebasedartangular-dart

AngularDart 5 and Firebase deployment


I’m trying to deploy my AngularDart 5 web app to Firebase. These are the steps I followed:

  1. I builded my app with the command pub run build_runner build --output build.
  2. I launched the command firebase init and setted web folder as the public folder.
  3. I deployed my web app with the command firebase deploy.

⚠ The problem is that when I open the website I find only a blank page.

❔ What I’m doing wrong?

Thank you!


Yes, I am still having this issue. The content of my firebase.json is:

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

I don’t know if it helps, but my pubspec.yaml file is:

name: angular_app
description: Angular App
version: 0.0.1

environment:
  sdk: '>=2.0.0-dev.63.0 <2.0.0'

dependencies:
  sass_builder: ^2.0.2
  angular: ^5.0.0-alpha+15
  angular_forms: ^2.0.0-alpha+7
  angular_router: ^2.0.0-alpha+14

dev_dependencies:
  angular_test: ^2.0.0-alpha+13
  build_runner: ^0.8.9
  build_test: ^0.10.2+5
  build_web_compilers: ^0.4.0+4
  test: ^1.0.0

When I deploy on firebase or when I serve the app with firebase serve, I see only “Loading...”.

Thanks for your help!


Solution

    • In your step 3, you need to use firebase deploy to deploy rather than pub.
    • In your firebase.json file, the hosting.public entry shown above is just "web" but your build output directory is "build". The entry should probably be "build/web".
    • Are you setting <base href> in your index.html? If so, to which href value?
    • You wrote that when you serve you only see “Loading...”. Open then JavaScript console. Do you see any error messages?