在JHipster中本地使用Angular Library时模块找不到问题

我在JHipster应用里制作可复用登录组件，创建了Angular库login-lib，操作步骤如下：

• 使用ng generate library login-lib创建库
• 库中包含组件依赖的必要服务，已在public-api.ts中导出所有相关文件
• 执行ng build login-lib将编译文件输出到根目录dist\login-lib
• 在主应用的login.module中导入LoginLibModule，尝试在LoginWrapperComponent模板用jhi-login-lib渲染组件

但出现模块找不到错误：

./src/main/webapp/app/login/login.module.ts:3:0-84 - Error: Module not found: Error: Can't resolve '../../../../../dist/login-lib/lib/login-lib.module' in 'C:\daten\dev\...\...\src\main\webapp\app\login'

直接导入projects\login-lib源码能正常工作，但从dist路径导入就报错，试过调整导入路径、修改angular.json添加脚本、将dist输出到node_modules、发布到npm等方法，问题仍未解决。

1. 通过package.json映射本地库依赖 #

在项目根目录的package.json中，给login-lib添加本地路径依赖：

"dependencies": {
  // 其他已存在的依赖
  "login-lib": "file:./dist/login-lib"
}

执行npm install后，在模块中直接用import { LoginLibModule } from 'login-lib';导入，无需写冗长的相对路径。

2. 配置tsconfig.json路径别名 #

修改根目录tsconfig.json的compilerOptions.paths，添加库的路径映射：

"compilerOptions": {
  // 其他原有配置
  "paths": {
    "login-lib": ["./dist/login-lib"],
    "login-lib/*": ["./dist/login-lib/*"]
  }
}

配置完成后，导入时直接使用import { LoginLibModule } from 'login-lib';，TypeScript会自动解析到dist目录的编译产物。

3. 确保库编译产物完整 #

重新执行编译命令并监听文件变化，确认编译过程无报错：

ng build login-lib --watch

检查dist/login-lib目录下是否存在package.json、login-lib.module.d.ts等必要文件。若编译产物缺失，清理缓存后重新编译：

ng clean && ng build login-lib

4. 调整JHipster的Webpack解析配置 #

JHipster的Webpack配置可能限制了文件查找范围，修改webpack.common.js（对应项目的Webpack配置文件），将dist目录加入模块解析路径：

resolve: {
  // 现有配置
  modules: [
    'node_modules',
    path.resolve(__dirname, 'dist') // 添加此行
  ]
}

5. 验证public-api.ts导出正确性 #

确保public-api.ts正确导出LoginLibModule及相关内容：

export * from './lib/login-lib.module';
export * from './lib/login-lib.component';
// 按需导出其他服务、指令等

编译后检查dist/login-lib/index.d.ts，确认包含上述导出内容。

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