Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
misomarcell opened this issue Nov 14, 2023 · 1 comment

Comments

@misomarcell
Copy link

misomarcell commented Nov 14, 2023

[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.

@misomarcell misomarcell changed the title Angular 17 SSR on firebase functions: TypeError: require(...).app is not a function Angular 17 SSR on firebase functions: TypeError: require(...).app is not a function Nov 14, 2023
@jamesdaniels
Copy link
Member

Addressing in #6480 which adds support for application builder and mjs

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

3 participants