angular v17 deployment on netlify fails after migrating from angular v16

[airdroppad]

Describe the bug
Recently migrated my website from angular v16 to angular v17 and when i am trying to deploy on netlify its looking for serverless directory and build fails with error

10:54:16 AM: ✘ [ERROR] Could not resolve "../../dist/dapps/serverless/main"
10:54:16 AM:     .netlify/functions-internal/angular-builder.js:3:27:
10:54:16 AM:       3 │ const { render } = require("../../dist/dapps/serverless/main")

logs

10:53:15 AM: build-image version: fcb0c1b3ada6d25c1cb58e8bc514f5f23cc14f15 (focal)
10:53:15 AM: buildbot version: fb93098f8bc97793cd0cfc3c46306bbf28bb04e9
10:53:15 AM: Fetching cached dependencies
10:53:15 AM: Starting to download cache of 329.3MB
10:53:18 AM: Finished downloading cache in 3.467s
10:53:18 AM: Starting to extract cache
10:53:21 AM: Finished extracting cache in 3.062s
10:53:21 AM: Finished fetching cache in 6.595s
10:53:21 AM: Starting to prepare the repo for build
10:53:22 AM: Preparing Git Reference refs/heads/main
10:53:24 AM: Starting to install dependencies
10:53:27 AM: Python version set to 3.8
10:53:27 AM: Attempting Ruby version 2.7.2, read from environment
10:53:28 AM: Using Ruby version 2.7.2
10:53:28 AM: Started restoring cached go cache
10:53:28 AM: Finished restoring cached go cache
10:53:30 AM: go version go1.19.13 linux/amd64
10:53:30 AM: Using PHP version 8.0
10:53:31 AM: Started restoring cached Node.js version
10:53:33 AM: Finished restoring cached Node.js version
10:53:33 AM: v20.11.1 is already installed.
10:53:33 AM: Now using node v20.11.1 (npm v10.2.4)
10:53:33 AM: Enabling Node.js Corepack
10:53:33 AM: Started restoring cached build plugins
10:53:33 AM: Finished restoring cached build plugins
10:53:33 AM: Started restoring cached corepack dependencies
10:53:33 AM: Finished restoring cached corepack dependencies
10:53:33 AM: No npm workspaces detected
10:53:33 AM: Started restoring cached node modules
10:53:33 AM: Finished restoring cached node modules
10:53:33 AM: Installing npm packages using npm version 10.2.4
10:53:34 AM: npm WARN using --force Recommended protections disabled.
10:53:35 AM: npm WARN ERESOLVE overriding peer dependency
10:53:35 AM: npm WARN ERESOLVE overriding peer dependency
10:53:35 AM: npm WARN ERESOLVE overriding peer dependency
10:53:35 AM: npm WARN While resolving: ngx-range@5.0.0
10:53:35 AM: npm WARN Found: @angular/common@17.2.4
10:53:35 AM: npm WARN node_modules/@angular/common
10:53:35 AM: npm WARN   @angular/common@"^17.2.3" from the root project
10:53:35 AM: npm WARN   17 more (@angular/cdk, @angular/forms, @angular/material, ...)
10:53:35 AM: npm WARN
10:53:35 AM: npm WARN Could not resolve dependency:
10:53:35 AM: npm WARN peer @angular/common@"^15.0.0" from ngx-range@5.0.0
10:53:35 AM: npm WARN node_modules/ngx-range
10:53:35 AM: npm WARN   ngx-range@"^5.0.0" from the root project
10:53:35 AM: npm WARN
10:53:35 AM: npm WARN Conflicting peer dependency: @angular/common@15.2.10
10:53:35 AM: npm WARN node_modules/@angular/common
10:53:35 AM: npm WARN   peer @angular/common@"^15.0.0" from ngx-range@5.0.0
10:53:35 AM: npm WARN   node_modules/ngx-range
10:53:35 AM: npm WARN     ngx-range@"^5.0.0" from the root project
10:53:35 AM: npm WARN ERESOLVE overriding peer dependency
10:53:35 AM: npm WARN While resolving: ngx-range@5.0.0
10:53:35 AM: npm WARN Found: @angular/core@17.2.4
10:53:35 AM: npm WARN node_modules/@angular/core
10:53:35 AM: npm WARN   @angular/core@"^17.2.3" from the root project
10:53:35 AM: npm WARN   20 more (@angular/animations, @angular/cdk, @angular/common, ...)
10:53:35 AM: npm WARN
10:53:35 AM: npm WARN Could not resolve dependency:
10:53:35 AM: npm WARN peer @angular/core@"^15.0.0" from ngx-range@5.0.0
10:53:35 AM: npm WARN node_modules/ngx-range
10:53:35 AM: npm WARN   ngx-range@"^5.0.0" from the root project
10:53:35 AM: npm WARN
10:53:35 AM: npm WARN Conflicting peer dependency: @angular/core@15.2.10
10:53:35 AM: npm WARN node_modules/@angular/core
10:53:35 AM: npm WARN   peer @angular/core@"^15.0.0" from ngx-range@5.0.0
10:53:35 AM: npm WARN   node_modules/ngx-range
10:53:35 AM: npm WARN     ngx-range@"^5.0.0" from the root project
10:53:36 AM: removed 77 packages, changed 2 packages, and audited 1162 packages in 2s
10:53:36 AM: 142 packages are looking for funding
10:53:36 AM:   run `npm fund` for details
10:53:36 AM: 1 moderate severity vulnerability
10:53:36 AM: Some issues need review, and may require choosing
10:53:36 AM: a different dependency.
10:53:36 AM: Run `npm audit` for details.
10:53:36 AM: npm packages installed
10:53:36 AM: Successfully installed dependencies
10:53:36 AM: Starting build script
10:53:39 AM: Detected 1 framework(s)
10:53:39 AM: "angular" at version "17.2.3"
10:53:39 AM: Section completed: initializing
10:53:40 AM: ​
10:53:40 AM: Netlify Build                                                 
10:53:40 AM: ────────────────────────────────────────────────────────────────
10:53:40 AM: ​
10:53:40 AM: ❯ Version
10:53:40 AM:   @netlify/build 29.36.3
10:53:40 AM: ​
10:53:40 AM: ❯ Flags
10:53:40 AM:   baseRelDir: true
10:53:40 AM:   buildId: 65f289b90bcbb10008d2bf0e
10:53:40 AM:   deployId: 65f289b90bcbb10008d2bf10
10:53:40 AM: ​
10:53:40 AM: ❯ Current directory
10:53:40 AM:   /opt/build/repo
10:53:40 AM: ​
10:53:40 AM: ❯ Config file
10:53:40 AM:   /opt/build/repo/netlify.toml
10:53:40 AM: ​
10:53:40 AM: ❯ Context
10:53:40 AM:   production
10:53:40 AM: ​
10:53:40 AM: ❯ Installing plugins
10:53:40 AM:    - @netlify/plugin-angular-universal@1.0.1
10:53:45 AM: ​
10:53:45 AM: ❯ Loading plugins
10:53:45 AM:    - @netlify/plugin-angular-universal@1.0.1 from Netlify app
10:53:45 AM:    - @netlify/plugin-lighthouse@6.0.0 from Netlify app
10:53:45 AM:    - @netlify/angular-runtime@2.0.6 from netlify.toml and package.json
10:53:46 AM: ​
10:53:46 AM: @netlify/plugin-angular-universal (onPreBuild event)          
10:53:46 AM: ────────────────────────────────────────────────────────────────
10:53:46 AM: ​
10:53:46 AM: FYI: You seem to be using a custom build script. Please make sure your script includes: ng build --configuration production && ng run dapps:serverless:production.
10:53:46 AM: ​
10:53:46 AM: (@netlify/plugin-angular-universal onPreBuild completed in 10ms)
10:53:46 AM: ​
10:53:46 AM: @netlify/angular-runtime (onPreBuild event)                   
10:53:46 AM: ────────────────────────────────────────────────────────────────
10:53:46 AM: ​
10:53:46 AM: ​
10:53:46 AM: (@netlify/angular-runtime onPreBuild completed in 8ms)
10:53:46 AM: ​
10:53:46 AM: build.command from netlify.toml                               
10:53:46 AM: ────────────────────────────────────────────────────────────────
10:53:46 AM: ​
10:53:46 AM: $ npm run build
10:53:46 AM: > dapps@0.0.0 build
10:53:46 AM: > ng build
10:53:47 AM: Workspace extension with invalid name (defaultProject) found.
10:53:47 AM: - Building...
10:54:15 AM: Browser bundles
10:54:15 AM: Initial chunk files     | Names               |  Raw size | Estimated transfer size
10:54:15 AM: chunk-GURDAKQK.js       | -                   |   1.58 MB |               307.48 kB
10:54:15 AM: styles-QXFIZAFD.css     | styles              | 821.63 kB |                64.74 kB
10:54:15 AM: main-UBJ4YVCM.js        | main                | 302.38 kB |                68.79 kB
10:54:15 AM: scripts-KFSOFON6.js     | scripts             | 279.34 kB |                71.03 kB
10:54:15 AM: polyfills-BJX5WH5B.js   | polyfills           |  34.37 kB |                11.21 kB
10:54:15 AM: chunk-VH7USTTD.js       | -                   |   5.37 kB |                 2.16 kB
10:54:15 AM: chunk-P4FKFBKP.js       | -                   |   2.37 kB |               924 bytes
10:54:15 AM: chunk-E5U3H25K.js       | -                   | 722 bytes |               722 bytes
10:54:15 AM:                         | Initial total       |   2.99 MB |               527.03 kB
10:54:15 AM: Lazy chunk files        | Names               |  Raw size | Estimated transfer size
10:54:15 AM: chunk-CJ6S3GUO.js       | dashboard-module    | 578.94 kB |                94.39 kB
10:54:15 AM: chunk-AHZPBTJ4.js       | auth-module         | 419.50 kB |               127.70 kB
10:54:15 AM: chunk-XJO3DQFW.js       | landing-module      | 140.35 kB |                24.28 kB
10:54:15 AM: chunk-JQ6S3Z5L.js       | no-head-module      |  19.43 kB |                 5.22 kB
10:54:15 AM: chunk-KR6YVAMN.js       | faq-module          |  17.89 kB |                 5.29 kB
10:54:15 AM: chunk-X6ZHWL2S.js       | -                   |  10.91 kB |                 3.13 kB
10:54:15 AM: chunk-45RKVCWA.js       | -                   |   2.66 kB |               918 bytes
10:54:15 AM: chunk-S346P62U.js       | -                   | 494 bytes |               494 bytes
10:54:15 AM: Server bundles
10:54:15 AM: Initial chunk files     | Names               |  Raw size
10:54:15 AM: chunk-FW4N3BYD.mjs      | -                   |   1.35 MB | 
10:54:15 AM: server.mjs              | server              |   1.08 MB | 
10:54:15 AM: chunk-VLKPGHJO.mjs      | -                   | 296.22 kB | 
10:54:15 AM: polyfills.server.mjs    | polyfills.server    | 262.93 kB | 
10:54:15 AM: chunk-KLN4KM4T.mjs      | -                   | 249.24 kB | 
10:54:15 AM: chunk-RA3KNJJO.mjs      | -                   |  71.12 kB | 
10:54:15 AM: chunk-XJ6DZAGD.mjs      | -                   |   5.44 kB | 
10:54:15 AM: chunk-EZ6RW67L.mjs      | -                   |   2.40 kB | 
10:54:15 AM: chunk-UQQY2DYU.mjs      | -                   |   1.64 kB | 
10:54:15 AM: chunk-C4ZAJBE2.mjs      | -                   | 792 bytes | 
10:54:15 AM: main.server.mjs         | main.server         | 294 bytes | 
10:54:15 AM: render-utils.server.mjs | render-utils.server | 254 bytes | 
10:54:15 AM: Lazy chunk files        | Names               |  Raw size
10:54:15 AM: chunk-WKUJL5D5.mjs      | dashboard-module    | 579.04 kB | 
10:54:15 AM: chunk-OH2DF6LE.mjs      | auth-module         | 523.48 kB | 
10:54:15 AM: chunk-TN7YPEOT.mjs      | landing-module      | 140.45 kB | 
10:54:15 AM: chunk-PAPMBWUD.mjs      | no-head-module      |  19.52 kB | 
10:54:15 AM: chunk-WMPITBSN.mjs      | faq-module          |  17.99 kB | 
10:54:15 AM: chunk-WJYYDL5X.mjs      | xhr2                |  11.80 kB | 
10:54:15 AM: chunk-662NN2Z2.mjs      | -                   |  10.99 kB | 
10:54:15 AM: chunk-WM24H53W.mjs      | -                   |   2.73 kB | 
10:54:15 AM: chunk-NEWK7LEN.mjs      | -                   | 530 bytes | 
10:54:15 AM: Output location: /opt/build/repo/dist/dapps
10:54:15 AM: Application bundle generation complete. [28.488 seconds]
10:54:15 AM: 
10:54:15 AM: 
10:54:15 AM: ▲ [WARNING] Module "quill" used by "node_modules/primeng/fesm2022/primeng-editor.mjs" is not ESM
10:54:15 AM: 
10:54:15 AM:   CommonJS or AMD dependencies can cause optimization bailouts.
10:54:15 AM:   For more information see: https://angular.io/guide/build#configuring-commonjs-dependencies
10:54:15 AM: 
10:54:15 AM: 
10:54:15 AM: ▲ [WARNING] Module "ethereum-blockies-base64" used by "src/app/services/ethereum-avatar.service.ts" is not ESM
10:54:15 AM: 
10:54:15 AM:   CommonJS or AMD dependencies can cause optimization bailouts.
10:54:15 AM:   For more information see: https://angular.io/guide/build#configuring-commonjs-dependencies
10:54:15 AM: 
10:54:15 AM: 
10:54:15 AM: ▲ [WARNING] 3 rules skipped due to selector errors:
10:54:15 AM:   swiper-container::part(pagination) -> Pseudo-elements are not supported by css-select
10:54:15 AM:   .form-floating>~label -> Did not expect successive traversals.
10:54:15 AM:   .form-floating>~label -> Did not expect successive traversals.
10:54:15 AM: 
10:54:15 AM: 
10:54:15 AM: ​
10:54:15 AM: (build.command completed in 29.3s)
10:54:15 AM: ​
10:54:15 AM: @netlify/plugin-angular-universal (onBuild event)             
10:54:15 AM: ────────────────────────────────────────────────────────────────
10:54:15 AM: ​
10:54:16 AM: ​
10:54:16 AM: (@netlify/plugin-angular-universal onBuild completed in 62ms)
10:54:16 AM: ​
10:54:16 AM: @netlify/angular-runtime (onBuild event)                      
10:54:16 AM: ────────────────────────────────────────────────────────────────
10:54:16 AM: ​
10:54:16 AM: Writing Angular SSR Edge Function ...
10:54:16 AM: ​
10:54:16 AM: (@netlify/angular-runtime onBuild completed in 10ms)
10:54:16 AM: ​
10:54:16 AM: Functions bundling                                            
10:54:16 AM: ────────────────────────────────────────────────────────────────
10:54:16 AM: ​
10:54:16 AM: Packaging Functions from .netlify/functions-internal directory:
10:54:16 AM:  - angular-builder.js
10:54:16 AM: ​
10:54:16 AM: ✘ [ERROR] Could not resolve "../../dist/dapps/serverless/main"
10:54:16 AM:     .netlify/functions-internal/angular-builder.js:3:27:
10:54:16 AM:       3 │ const { render } = require("../../dist/dapps/serverless/main")
10:54:16 AM:         ╵                            ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
10:54:16 AM: ​
10:54:16 AM: Dependencies installation error                               
10:54:16 AM: ────────────────────────────────────────────────────────────────
10:54:16 AM: ​
10:54:16 AM:   Error message
10:54:16 AM:   A Netlify Function failed to require one of its dependencies.
10:54:16 AM:   Please make sure it is present in the site"s top-level "package.json".
​
10:54:16 AM:   Build failed with 1 error:
10:54:16 AM:   .netlify/functions-internal/angular-builder.js:3:27: ERROR: Could not resolve "../../dist/dapps/serverless/main"
10:54:16 AM: ​
10:54:16 AM:   Resolved config
10:54:16 AM:   build:
10:54:16 AM:     command: npm run build
10:54:16 AM:     commandOrigin: config
10:54:16 AM:     environment:
10:54:16 AM:       - CI
10:54:16 AM:       - NPM_FLAGS
10:54:16 AM:     publish: /opt/build/repo/dist/dapps/browser
10:54:16 AM:     publishOrigin: config
10:54:16 AM:   functions:
10:54:16 AM:     "*":
10:54:16 AM:       included_files:
10:54:16 AM:         - dist/dapps/browser/index.html
10:54:16 AM:         - dist/dapps/browser/styles.css
10:54:16 AM:         - dist/dapps/browser/styles.css
10:54:16 AM:         - dist/dapps/browser/custom-theme.scss
10:54:16 AM:         - dist/dapps/browser/./node_modules/bootstrap/dist/css/bootstrap.min.css
10:54:16 AM:         - dist/dapps/browser/node_modules/primeng/resources/themes/lara-dark-teal/theme.css
10:54:16 AM:         - dist/dapps/browser/node_modules/primeng/resources/primeng.min.css
10:54:16 AM:         - dist/dapps/browser/node_modules/primeicons/primeicons.css
10:54:16 AM:         - dist/dapps/browser/node_modules/primeflex/primeflex.css
10:54:16 AM:       node_bundler: esbuild
10:54:16 AM:   plugins:
10:54:16 AM:     - inputs: {}
10:54:16 AM:       origin: ui
10:54:16 AM:       package: "@netlify/plugin-angular-universal"
10:54:16 AM:     - inputs: {}
10:54:16 AM:       origin: ui
10:54:16 AM:       package: "@netlify/plugin-lighthouse"
10:54:16 AM:     - inputs: {}
10:54:16 AM:       origin: config
10:54:16 AM:       package: "@netlify/angular-runtime"
10:54:16 AM:   redirects:
10:54:16 AM:     - from: /*
      status: 200
      to: /index.html
    - from: /*
      status: 200
      to: /.netlify/functions/angular-builder
  redirectsOrigin: inline
10:54:16 AM: Build failed due to a user error: Build script returned non-zero exit code: 2
10:54:16 AM: Failing build: Failed to build site
10:54:17 AM: Finished processing build request in 1m1.815s

Expected behavior
It should deploy without error.

Versions

• Angular.js: 17.2.3

If you're using the CLI to build
N/A

If you're using file-based installation

[build]
  command = "npm run build"
  publish = "dist/dapps/browser"

[[plugins]]
  package="@netlify/angular-runtime"

[[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200

[Skn0tt]

Hi @airdroppad! Sorry for the late response, I was on vacation and wasn't able to forward this issue to my team. Let's get this resolved for you now, better late than never.

In your build logs, you can see that you have two different Angular plugins enabled, marked green here:

...
❯ Loading plugins
+ 10:53:45 AM:    - @netlify/plugin-angular-universal@1.0.1 from Netlify app
10:53:45 AM:    - @netlify/plugin-lighthouse@6.0.0 from Netlify app
+ 10:53:45 AM:    - @netlify/angular-runtime@2.0.6 from netlify.toml and package.json
...

These are not compatible with one another. The fix is to disable the @netlify/plugin-angular-universal plugin in your site settings under the "Integrations" tab. That's not possible currently, though, since we disabled the plugin when @netlify/angular-runtime was released. What I didn't consider is that it also makes it impossible for you to disable it. I'll work on a fix for that, and let you know here once that landed.

[Skn0tt]

On a closer look, it seems like you were able to self-solve in the meantime. I'll go ahead and close this issue, let me know if I can still help.