How to set custom vite config settings in Angular 17?

Question

We would like to configure vite settings in Angular 17 via a vite.config.js file or some other way. Specifically, these settings:

export default {
  optimizeDeps: {
      disabled: false,
      exclude: [
          'my-third-party-package',
      ],
  },
}

Things I have tried but yielded no results:

• Running ng eject
• Reading the official documentation on Angular's new build system (https://angular.io/guide/esbuild#esm-default-imports-vs-namespace-imports)
• Creating a vite.config.js in the root folder and "hoping" Angular picks it up at build time.

Answer 1

Probably when you serve the app with the new Angular build system, you will have an error like this:

typeError: Failed to fetch dynamically imported module

This is because some dependencies are not optimized for Vite.

In order to fix this you must set optimizeDeps on your vite.config.js but it is not possible in Angular. See https://github.com/angular/angular-cli/issues/26859

---

I found the next solution:

Inside angular.json disable cli cache:

"cli": {
  "cache": {
    "enabled": false,
  }
}

See https://github.com/angular/angular-cli/issues/26345

Answer 2

Angular documentation provides a way to exclude dependenies from optimization/bundling by Vite using prebundle options in serve task configuration. Example:

"serve": {
  "builder": "@angular/build:dev-server",
  "configurations": {
    "production": {
      "buildTarget": "sapphire-manager-ui:build:production"
    },
    "development": {
      "buildTarget": "sapphire-manager-ui:build:development"
    }
  },
  "options": {
    "prebundle": {
      "exclude": ["tsyringe", "zod", "nanoid"]
    }
  },
  "defaultConfiguration": "development"
},