如何用firebase serve替代Angular项目的ng serve并解决本地域名未白名单问题？

Why You're Seeing the Error #

Firebase Auth blocks email action URLs (like verification or password reset links) from unwhitelisted domains, and the standard localhost server from ng serve isn’t automatically trusted. Using firebase serve gets around this because it’s a Firebase-managed local server that’s recognized as a valid domain for your project.

Step-by-Step to Replace ng serve with firebase serve #

1. Set Up Firebase CLI & Initialize Hosting

   • If you haven’t already, install the Firebase CLI globally:

     npm install -g firebase-tools
     

   • Log in to your Firebase account:

     firebase login
     

   • Initialize Firebase Hosting in your Angular project:

     firebase init hosting
     

     During setup:
     • Select your existing Firebase project from the list.
     • Set the public directory to your Angular build output (typically dist/your-project-name — replace your-project-name with your actual app’s name).
     • Answer "Yes" when asked if this is a single-page app (to support Angular’s routing).

2. Build Your Angular Project
   Firebase serve serves static built files, so you need to compile your app first. For development:

   ng build --configuration development
   

   If you want auto-updates when you edit code, run ng build --watch in a separate terminal — this will rebuild your app whenever changes are saved, and firebase serve will pick up the updated files automatically.

3. Start the Firebase Local Server
   Launch the hosting emulator with:

   firebase serve --only hosting
   

   Your app will be accessible at http://localhost:5000 (or another port if 5000 is already in use).

Testing the Email Action URL #

Now, when you trigger a verification email from your app running at localhost:5000, the action link will point to this domain. Clicking it should successfully redirect back to your app without the "Domain is not whitelisted" error — Firebase trusts the firebase serve domain by default.

Bonus: Live Reload Workflow #

If you miss the instant hot-reload of ng serve, use this workaround:

• In one terminal, run ng build --watch to auto-rebuild on code changes.
• In another terminal, keep firebase serve --only hosting running to serve the latest built files.
• Refresh your browser after changes are built, and you’ll see updates immediately.

内容的提问来源于stack exchange，提问作者Jonathan002