Skip to content

Angular 17 SSR on firebase functions: TypeError: require(...).app is not a function #6516

@misomarcell

Description

@misomarcell

[REQUIRED] Environment info

firebase-tools: 12.8.1

Platform: Windows 11

[REQUIRED] Test case

https://github.com/misomarcell/fire-chat/tree/cb090fbc5b6dae4da079cd0b2b3d0ea4b2108ba1

[REQUIRED] Steps to reproduce

  1. Install the Angular 17.0.0 CLI
  2. Install the above mentioned version of firebase-tools
  3. Create a new Angular project with SSR enabled
  4. Enabled webframeworks with firebase experiments:enable webframeworks
  5. Init the firebase project using firebase init
  6. Set up at least one route in app.routes.ts
  7. Set the rewrite rules in firebase.json to your SSR function:
hosting": [
	{
		"target": "example-app",
		"source": ".",
		"rewrites": [
			{
				"source": "**",
				"function": "ssrexampleapp"
			}
		]
	}
]
  1. Modify angular.json so it builds your browser and server bundles separately:
"build": {
	"builder": "@angular-devkit/build-angular:browser",
	...
}
"server": {
	"builder": "@angular-devkit/build-angular:server",
	...
}
  1. Deploy the application with firebase deploy --only hosting
  2. Open the generated web.app link and navigate a route other than /
  3. It displays an error, usually "Service Unavailable". If you open the logs of your ssr function, you'll see that the error that caused this response is:
TypeError: require(...).app is not a function
    at Object.<anonymous> (/workspace/bootstrap.js:1:51)
    at Module._compile (node:internal/modules/cjs/loader:1256:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1310:10)
    at Module.load (node:internal/modules/cjs/loader:1119:32)
    at Module._load (node:internal/modules/cjs/loader:960:12)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:169:29)
    at ModuleJob.run (node:internal/modules/esm/module_job:194:25)

Which originates from .firebase/example-app/functions/bootstrap.js that was generated by firebase-tools:

exports.handle = require("./dist/server/main.js").app();

[REQUIRED] Expected behavior

Render function works without an exception.

[REQUIRED] Actual behavior

Render function crashes due to the above mentioned exception.

Additional comment

The current firebase-tools library clearly lacks support for Angular 17 and it's renewed way of building the application bundle. Starting from the required modification in angular.json in order to force the firebase CLI to upload the server bundle, all the way to the generated function code is not supported by the cloud running environment or the missing rewrite rule that you need to manually add to firebase.json even tho it's aware that the application has SSR capability.

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions