Sekrab Garage

Overcome a bug in Firebase

Angular universal on Firebase hosting serving locally

AngularFirebase August 1, 20

In Angular Universal generation, the seed code suggests this line to provide the root baseUrl in server.ts:

res.render('index', { req, providers: [{ provide: APP_BASE_HREF, useValue: req.baseUrl }] });

That works on nodejs, and it works when you deploy firebase to your hosting. But it does not work when you serve locally, because req.baseUrl gives a non empty string. All the links you add to your page will be prepended to the full function local path: project_name/us-central1/function_name/, on server side. So clicking any link would yeild to a 404 in Angular, or if you are not handling it "Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment:"

Changing the value used to "" would break the initial root page as well.

After a lot of tug and war, in the function index.js, I decided to keep the nodejs listener to port 5000, while serving firebase.


const universal = require(`./server.js`);

exports.ssr = functions.https.onRequest(universal.server);

// keep this when serving from local
universal.server.listen('5000', function (err) {
	if (err) {
		console.log(err);
		return;
	}

});

Now serving works. And remotely works fine.