Angular 17 SSR With Firebase Build Error

Site: jonbantayjr.netlify.app

Issue: I recently integrated firebase angular/fire to my Angular v17 website (using Angular plugin) but unable to deploy due to BUILD error. I found something similar in Edge Functions bundling failed however, I don’t have an option to downgrade my Angular version to 16. The site build locally with no issues.

Is there a workaround for this aside from downgrading to Angular v16?

7:58:03 PM: build-image version: fcb0c1b3ada6d25c1cb58e8bc514f5f23cc14f15 (focal)
7:58:03 PM: buildbot version: f24fa6931331a6157a9e11612daa1bc6d6a889ef
7:58:03 PM: Fetching cached dependencies
7:58:03 PM: Starting to download cache of 142.1MB
7:58:04 PM: Finished downloading cache in 926ms
7:58:04 PM: Starting to extract cache
7:58:06 PM: Finished extracting cache in 1.536s
7:58:06 PM: Finished fetching cache in 2.522s
7:58:06 PM: Starting to prepare the repo for build
7:58:06 PM: Preparing Git Reference refs/heads/master
7:58:07 PM: Custom build command detected. Proceeding with the specified command: “npm run build”
7:58:08 PM: Starting to install dependencies
7:58:08 PM: Python version set to 3.8
7:58:08 PM: Attempting Ruby version 2.7.2, read from environment
7:58:08 PM: Using Ruby version 2.7.2
7:58:09 PM: Started restoring cached go cache
7:58:09 PM: Finished restoring cached go cache
7:58:11 PM: go version go1.19.13 linux/amd64
7:58:11 PM: Using PHP version 8.0
7:58:12 PM: Started restoring cached Node.js version
7:58:12 PM: Finished restoring cached Node.js version
7:58:13 PM: v18.19.0 is already installed.
7:58:13 PM: Now using node v18.19.0 (npm v10.2.3)
7:58:13 PM: Enabling Node.js Corepack
7:58:13 PM: Started restoring cached build plugins
7:58:13 PM: Finished restoring cached build plugins
7:58:13 PM: Started restoring cached corepack dependencies
7:58:13 PM: Finished restoring cached corepack dependencies
7:58:13 PM: No npm workspaces detected
7:58:13 PM: Started restoring cached node modules
7:58:13 PM: Finished restoring cached node modules
7:58:13 PM: Installing npm packages using npm version 10.2.3
7:58:20 PM: added 110 packages, and audited 1165 packages in 6s
7:58:20 PM: 120 packages are looking for funding
7:58:20 PM: run npm fund for details
7:58:20 PM: 5 vulnerabilities (3 moderate, 2 high)
7:58:20 PM: To address all issues, run:
7:58:20 PM: npm audit fix
7:58:20 PM: Run npm audit for details.
7:58:20 PM: npm packages installed
7:58:20 PM: Successfully installed dependencies
7:58:20 PM: Starting build script
7:58:21 PM: Detected 1 framework(s)
7:58:21 PM: “angular” at version “17.0.10”
7:58:21 PM: Section completed: initializing
7:58:22 PM: ​
7:58:22 PM: Netlify Build
7:58:22 PM: ────────────────────────────────────────────────────────────────
7:58:22 PM: ​
7:58:22 PM: ❯ Version
7:58:22 PM: @netlify/build 29.33.6
7:58:22 PM: ​
7:58:22 PM: ❯ Flags
7:58:22 PM: baseRelDir: true
7:58:22 PM: buildId: 65c97b2a0d771200088d6c0d
7:58:22 PM: deployId: 65c97b2a0d771200088d6c0f
7:58:22 PM: ​
7:58:22 PM: ❯ Current directory
7:58:22 PM: /opt/build/repo
7:58:22 PM: ​
7:58:22 PM: ❯ Config file
7:58:22 PM: /opt/build/repo/netlify.toml
7:58:22 PM: ​
7:58:22 PM: ❯ Context
7:58:22 PM: production
7:58:22 PM: ​
7:58:22 PM: ❯ Loading plugins
7:58:22 PM: - @netlify/angular-runtime@2.0.5 from Netlify app
7:58:23 PM: ​
7:58:23 PM: @netlify/angular-runtime (onPreBuild event)
7:58:23 PM: ────────────────────────────────────────────────────────────────
7:58:23 PM: ​
7:58:23 PM: ​
7:58:23 PM: (@netlify/angular-runtime onPreBuild completed in 10ms)
7:58:23 PM: ​
7:58:23 PM: build.command from netlify.toml
7:58:23 PM: ────────────────────────────────────────────────────────────────
7:58:23 PM: ​
7:58:23 PM: $ npm run build
7:58:23 PM: > jonbantayjr@0.0.0 build
7:58:23 PM: > ng build
7:58:24 PM: - Building…
7:58:37 PM: ▲ [WARNING] Module “undici” used by “node_modules/@firebase/auth-compat/dist/esm/index.node.esm.js” is not ESM
7:58:37 PM:
7:58:37 PM: CommonJS or AMD dependencies can cause optimization bailouts.
7:58:37 PM: For more information see: Angular
7:58:37 PM:
7:58:37 PM:
7:58:37 PM: ▲ [WARNING] Module “undici” used by “node_modules/@firebase/auth/dist/node-esm/internal.js” is not ESM
7:58:37 PM:
7:58:37 PM: CommonJS or AMD dependencies can cause optimization bailouts.
7:58:37 PM: For more information see: Angular
7:58:37 PM:
7:58:37 PM:
7:58:39 PM: Prerendered 8 static routes.
7:58:39 PM: Initial Chunk Files | Names | Raw Size | Estimated Transfer Size
7:58:39 PM: main-46VMULAF.js | main | 719.04 kB | 158.85 kB
7:58:39 PM: scripts-PMTRN55H.js | scripts | 362.29 kB | 79.25 kB
7:58:39 PM: chunk-FDDPXFJN.js | - | 164.12 kB | 39.74 kB
7:58:39 PM: styles-CHICQ6RK.css | styles | 150.96 kB | 11.07 kB
7:58:39 PM: polyfills-RX4V3J3S.js | polyfills | 33.01 kB | 10.68 kB
7:58:39 PM: | Initial Total | 1.40 MB | 299.58 kB
7:58:39 PM: Lazy Chunk Files | Names | Raw Size | Estimated Transfer Size
7:58:39 PM: chunk-5IP6OBTL.js | index-esm | 29 bytes | 29 bytes
7:58:39 PM: Application bundle generation complete. [15.441 seconds]
7:58:40 PM: ​
7:58:40 PM: (build.command completed in 16.3s)
7:58:40 PM: ​
7:58:40 PM: @netlify/angular-runtime (onBuild event)
7:58:40 PM: ────────────────────────────────────────────────────────────────
7:58:40 PM: ​
7:58:40 PM: Writing Angular SSR Edge Function …
7:58:40 PM: ​
7:58:40 PM: (@netlify/angular-runtime onBuild completed in 9ms)
7:58:40 PM: ​
7:58:40 PM: Functions bundling
7:58:40 PM: ────────────────────────────────────────────────────────────────
7:58:40 PM: ​
7:58:40 PM: The Netlify Functions setting targets a non-existing directory: netlify/functions
7:58:40 PM: ​
7:58:40 PM: (Functions bundling completed in 1ms)
7:58:40 PM: ​
7:58:40 PM: Edge Functions bundling
7:58:40 PM: ────────────────────────────────────────────────────────────────
7:58:40 PM: ​
7:58:40 PM: Packaging Edge Functions from .netlify/edge-functions directory:
7:58:40 PM: - angular-ssr
7:58:43 PM: Failed during stage “building site”: Build script returned non-zero exit code: 2
7:58:43 PM: TypeError: Cannot read properties of undefined (reading “FinalizationRegistry”)
7:58:43 PM: at file:///opt/build/repo/dist/jonbantayjr/server/chunk-7GSUHESY.mjs:25:3878
7:58:43 PM: at file:///opt/build/repo/dist/jonbantayjr/server/chunk-LK223424.mjs:2:1050
7:58:43 PM: at file:///opt/build/repo/dist/jonbantayjr/server/chunk-7GSUHESY.mjs:25:163782
7:58:43 PM: at file:///opt/build/repo/dist/jonbantayjr/server/chunk-LK223424.mjs:2:1050
7:58:43 PM: at file:///opt/build/repo/dist/jonbantayjr/server/chunk-7GSUHESY.mjs:54:88536
7:58:43 PM: at file:///opt/build/repo/dist/jonbantayjr/server/chunk-LK223424.mjs:2:1050
7:58:43 PM: at file:///opt/build/repo/dist/jonbantayjr/server/chunk-7GSUHESY.mjs:106:33
7:58:43 PM: ​
7:58:43 PM: Bundling of edge function failed
7:58:43 PM: ────────────────────────────────────────────────────────────────
7:58:43 PM: ​
7:58:43 PM: Error message
7:58:43 PM: Could not load edge function at “/opt/build/repo/.netlify/edge-functions/angular-ssr/angular-ssr.mjs”. More on the Edge Functions API at Edge Functions API | Netlify Docs.
7:58:43 PM: ​
7:58:43 PM: Error location
7:58:43 PM: While bundling edge function
7:58:43 PM: ​
7:58:43 PM: Resolved config
7:58:43 PM: build:
7:58:43 PM: command: npm run build
7:58:43 PM: commandOrigin: config
7:58:43 PM: publish: /opt/build/repo/dist/jonbantayjr/browser
7:58:43 PM: publishOrigin: config
7:58:43 PM: functionsDirectory: /opt/build/repo/netlify/functions
7:58:43 PM: plugins:
7:58:43 PM: - inputs: {}
7:58:43 PM: origin: ui
7:58:43 PM: package: “@netlify/angular-runtime”
7:58:43 PM: redirects:
7:58:43 PM: - from: /*
status: 200
to: /index.html
redirectsOrigin: config
7:58:43 PM: Build failed due to a user error: Build script returned non-zero exit code: 2
7:58:43 PM: Failing build: Failed to build site
7:58:44 PM: Finished processing build request in 40.529s

Hey there,

Thanks for reaching out! It looks like you were able to get things up and running while staying on Angular v17, can you confirm whether you’ve resolved this issue? If so, please consider posting the solution you found to help others who might run into similar issues :slightly_smiling_face: