全新安装多层ASP.NET Core Angular模板后x-bundles缺失致登录异常

DevOps 小满

2026-6-20

解决ASP.NET Core Angular模板登录页“Could not find x-bundles”报错问题

排查与修复步骤

确认LeptonX包安装完整性
打开项目package.json，检查@volo/abp.ng.theme.lepton-x、@volo/abp.ui.theme.lepton-x等相关包是否存在，版本是否和ABP框架版本一致。如果缺失或版本不匹配，执行以下命令重装：
```
npm install @volo/abp.ng.theme.lepton-x --save
npm install @volo/abp.ui.theme.lepton-x --save
```
清理前端缓存并重新构建
前端依赖缓存或构建残留可能导致资源引用异常，执行以下命令清理后重建：
```
npm clean-install
npm run build
```
重启前后端服务，确保静态资源正确生成并被加载。

验证Bundle配置正确性
检查后端项目的BundleConfig.cs或AbpBundleOptions配置，确认LeptonX相关的CSS、JS bundles已正确注册，示例配置如下：

Configure<AbpBundleOptions>(options =>
{
    options.StyleBundles.Add(
        "LeptonX.Global",
        bundle => bundle.AddFiles(
            "/libs/@volo/abp.ui.theme.lepton-x/styles/leptonx-global.css"
        )
    );
    options.ScriptBundles.Add(
        "LeptonX.Global",
        bundle => bundle.AddFiles(
            "/libs/@volo/abp.ui.theme.lepton-x/scripts/leptonx-global.js"
        )
    );
});

检查静态资源路径
查看wwwroot/libs/@volo/abp.ui.theme.lepton-x目录是否存在对应的CSS、JS文件，若不存在，重新执行npm run build确保资源被复制到正确路径。同时确认angular.json中静态资源的输出配置无误。
调整依赖加载顺序
abp.event、jQuery未定义通常是加载顺序问题，在index.html中确保jQuery先于ABP脚本加载：
```
<script src="~/libs/jquery/jquery.min.js"></script>
<script src="~/libs/abp/core/abp.js"></script>
```