运行无实体JHipster单体应用出现空白页及类型错误求助

问题根源 #

你的核心问题来自依赖版本冲突，具体拆解：

1. Bootstrap依赖警告：Bootstrap 4.x要求必须安装popper.js@^1.12.9作为peer依赖，当前项目未安装该包——这个警告本身不会直接导致空白页，但可能影响弹窗、下拉等组件的正常渲染。
2. Subscription类型冲突：这是导致编译失败、浏览器空白页的关键原因。JHipster 4.14.4默认搭配Angular 4.x，而你后续安装的Angular 5.x使用的RxJS版本与Angular 4.x不兼容：两个版本的RxJS中都存在Subscription类，但结构定义不同，TypeScript编译器无法识别它们为同一类型，因此抛出TS90010错误。编译失败后无法生成可运行的前端代码，浏览器自然显示空白页。

方案1：彻底清理重置（推荐，避免后续版本混乱） #

如果你想完全从零开始，按以下步骤清理所有JHipster和Angular相关的全局/本地依赖：

1. 清理全局npm包

打开终端执行以下命令：

# 卸载全局JHipster
npm uninstall -g generator-jhipster
# 卸载全局Angular CLI（无论当前安装的是哪个版本）
npm uninstall -g @angular/cli
# 强制清理npm缓存，避免残留旧版本依赖
npm cache clean --force

2. 清理本地项目残留（针对已创建的JHipster项目）

进入你的项目目录，删除依赖文件与编译产物：

# 删除本地依赖文件夹
rm -rf node_modules
# 删除依赖锁定文件
rm package-lock.json yarn.lock
# 删除编译生成的dist目录
rm -rf dist

3. 重新安装指定版本的JHipster

因为你习惯使用4.14.4版本，全局安装该版本即可确保后续创建的项目依赖完全适配：

npm install -g generator-jhipster@4.14.4

之后创建新JHipster项目时，它会自动安装匹配的Angular 4.x及相关依赖，不会再出现版本冲突。

方案2：修复现有项目的冲突 #

如果你不想放弃现有项目，可以尝试以下步骤修复：

1. 安装缺失的Bootstrap依赖

先解决peer依赖警告：

npm install popper.js@^1.12.9 --save

2. 强制统一RxJS版本

JHipster 4.14.4对应的RxJS稳定版本为5.5.10，确保项目仅保留该版本：

# 卸载现有RxJS
npm uninstall rxjs
# 安装适配Angular 4.x的RxJS版本
npm install rxjs@5.5.10 --save

3. 清理TypeScript缓存

TypeScript可能缓存了旧的类型定义，需要手动清理：

# 删除前端编译输出目录（JHipster默认是src/main/webapp/www）
rm -rf src/main/webapp/www
# 重启IDE/编辑器，清除TypeScript服务缓存

4. 重新编译项目

执行JHipster的编译命令恢复项目运行：

./mvnw # 后端编译（若使用Maven）
npm run webpack:build # 前端编译

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