Angular 18 Vite依赖优化404错误：如何配置optimizeDeps.exclude？

优化依赖目录下的路径/.angular/cache/18.1.4/vite/deps/browser-VFYTEBP2.js?v=ef5c984d对应的文件不存在。该依赖可能与依赖优化器不兼容，请尝试将其添加到optimizeDeps.exclude中。

调试时，我在Vite文档中找到相关配置示例：

export default defineConfig({
  optimizeDeps: {
    include: ['esm-dep > cjs-dep'],
  },
})

请问在Angular项目中应该将这段配置添加到哪里才能生效？

package.json片段 #

"ng": "ng",
"start": "ng serve",
"build": "ng build",
"watch": "ng build --watch --configuration development",
"test": "ng test"



"@angular/animations": "^18.1.4",
"@angular/cdk": "^18.1.4",
"@angular/common": "^18.1.4",
"@angular/compiler": "^18.1.4",
"@angular/core": "^18.1.4",
"@angular/forms": "^18.1.4",
"@angular/material": "^18.1.4",
"@angular/platform-browser": "^18.1.4",
"@angular/platform-browser-dynamic": "^18.1.4",
"@angular/router": "^18.1.4",

angular.json片段 #

"optimization": {
     "scripts": true,
     "styles": {
       "minify": true,
       "inlineCritical": false
     },
     "fonts": true
   }

解答 #

Angular 18及以上版本默认用Vite作为构建工具，你需要在项目根目录新建一个vite.config.ts（或.js）文件，把optimizeDeps配置写在这里面。

示例配置如下：

import { defineConfig } from 'vite';
import angular from '@angular-devkit/build-angular/src/vite/plugins/angular';

export default defineConfig({
  plugins: [angular()],
  optimizeDeps: {
    // 将提示中不兼容的依赖包名填入数组
    exclude: ['目标依赖包名']
  }
});

如果用TypeScript编写配置文件，记得安装Vite的类型依赖：

npm install -D @types/vite

配置完成后重启ng serve或构建命令，配置即可生效。

内容的提问来源于stack exchange，提问作者skdonthi