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.

Sitnik

The vite config is internal to the CLI and cannot be modified. – Zhao

I created a feature request on github github.com/angular/angular/issues/53897 – Oahu

The request is closed. So how to config vite now? – Disturbance

Your best bet is to use a custom builder if you must configure vite. – Sitnik

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

Mccallion

This is the reason I was trying to change the vite config. I disalbed cli cache in angular.json as the alternative suggested and it worked – Arcanum