Firebase deploy error: "No i18n config on project."

Question

To deploy my Angular project I ran ng build --configuration production and then firebase deploy --only hosting. It says:

Thank you for trying our early preview of Angular support on Firebase Hosting.
During the preview, support is best-effort and breaking changes can be expected. Proceed with caution.

Documentation: https://firebase.google.com/docs/hosting/frameworks/angular
File a bug: https://github.com/firebase/firebase-tools/issues/new?template=bug_report.md
Submit a feature request: https://github.com/firebase/firebase-tools/issues/new?template=feature_request.md

We'd love to learn from you. Express your interest in helping us shape the future of Firebase Hosting: https://goo.gle/41enW5X

Error: No i18n config on project.

I have Transloco 5.0.7 installed. Reading how to Configure internationalization (i18n) rewrites, it appears that Firebase Hosting is looking for this:

  "i18n": {
      "root": "/localized-files"
    },

in firebase.json. It expects to see localized-files in the public directory:

public/localized-files/

My Angular app doesn't have this directory structure. I have:

src/app/assets/i18n/

I tried

  "i18n": {
      "root": "src/app/assets/i18n/"
    },

  "i18n": {
      "root": "app/assets/i18n/"
    },

  "i18n": {
      "root": "/assets/i18n/"
    },

and

  "i18n": {
      "root": "assets/i18n/"
    },

These all throw similar errors:

hosting: Couldn't find specified i18n root directory /assets/i18n in public directory .

Is there another config line in firebase.json that tells Firebase Hosting that Angular puts index.html in an app directory, not a public directory?

Answer 1

I figured it out.

The two doc pages I read were:

Configure Hosting behavior

Configure internationalization (i18n) rewrites

If you have Transloco installed and running you don't need to touch anything there. Find the folder with your Transloco files. My folder is in

src/app/assets/i18n

Open firebase.json and make two changes. First, put in the path to your i18n folder:

"i18n": {
    "root": "/assets/i18n"
},

Next, remove the line "source": ".", and replace it with the path to the folder that contains your index.html file. Firebase calls this your public directory.

"public": "dist/en-US",

Watch out for a few things. First, don't use source. This no longer works. You must use public.

Second, public points to the directory that contains your index.html file. An Angular app has two index.html files! In fact, Angular apps have two of every file: src and dist. dist is where your compiled, ready to deploy files are. Don't point your public folder to src.

Third, I have no idea why Angular compiles my app into dist/en-US instead of dist. I think this is a bug in Transloco.

Here's my entire firebase.json file:

{
  "hosting": {
    "public": "dist/en-US",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "i18n": {
      "root": "/assets/i18n"
    },
    "frameworksBackend": {
      "region": "us-central1"
    }
  },
  "firestore": {
    "rules": "firestore.rules",
    "indexes": "firestore.indexes.json"
  },
  "storage": {
    "rules": "storage.rules"
  },
  "emulators": {
    "auth": {
      "port": 9099
    },
    "functions": {
      "port": 5001
    },
    "firestore": {
      "port": 8080
    },
    "hosting": {
      "port": 5000
    },
    "storage": {
      "port": 9199
    },
    "ui": {
      "enabled": true
    },
    "singleProjectMode": true
  },
  "functions": [
    {
      "source": "functions",
      "codebase": "default",
      "ignore": [
        "node_modules",
        ".git",
        "firebase-debug.log",
        "firebase-debug.*.log"
      ],
      "predeploy": [
        "npm --prefix \"$RESOURCE_DIR\" run build"
      ]
    }
  ]
}

Answer 2

I think that there is no need to replace source by public.

I’ve prepared an example repository at ng-test-i18n. This repository is targeting Angular v16 with @ngneat/transloco v6.0.0.

I guess the problem was the wrong value for the i18n root. I've used src/assets/i18n and for such configuration deployment to Firebase worked without any issues or warnings.

Below is entire firebase.json file:

{
  "hosting": {
    "source": ".",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "frameworksBackend": {
      "region": "us-central1"
    },
    "i18n": {
      "root": "src/assets/i18n"
    }
  }
}

Note: deployment to Firebase was done using firebase-tools v12.5.2