pnpm搭配Angular懒加载组件时Chunk加载失败的配置问题

];

随后该路由会被各个应用的`lib.routes.ts`引用：
```typescript
export const appRoutes: Route[] = [
  appSupplyPlanningFeatureShellRoute,
  ...sharedGlobalShellRoutes,
];

最终在应用的main.ts中引入：

providers: [
   provideRouter(appRoutes),
   ...
]

请问需要修改哪些配置，才能让懒加载模块和组件适配pnpm的node_modules结构？

解决方案 #

1. 优化pnpm链接器配置（避免shamefully-hoist） #

在项目根目录的.npmrc中，保留pnpm的monorepo隔离特性，同时调整链接器模式并配置公共提升规则：

# 使用isolated模式（pnpm默认推荐，保持依赖隔离）
node-linker=isolated
# 将自有包作用域加入公共提升列表，确保构建工具能正确解析
public-hoist-pattern[]=@bevtech/**

如果isolated模式仍有问题，可以尝试更温和的hoisted模式替代shamefully-hoist：

node-linker=hoisted

2. 配置Angular构建的基础路径 #

在应用的project.json中，确保build目标的baseHref和deployUrl与部署环境匹配：

{
  "targets": {
    "build": {
      "executor": "@angular-devkit/build-angular:application",
      "options": {
        "outputPath": "dist/apps/your-app",
        "baseHref": "/", // 部署在子路径时改为"/your-app/"
        "deployUrl": "/", // 与baseHref一致，或根据CDN地址调整
        ...
      }
    }
  }
}

这两个参数决定了打包后Chunk文件的引用路径，必须与部署环境的实际路径匹配。

3. 确认TypeScript路径映射正确 #

检查项目根目录的tsconfig.base.json，确保所有monorepo内的包都有正确的路径映射：

{
  "compilerOptions": {
    "paths": {
      "@bevtech/shared/feature/change-log": ["libs/shared/feature/change-log/src/index.ts"],
      // 其他包的路径映射
    }
  }
}

正确的路径映射能让Angular构建工具准确解析懒加载的import()语句，生成正确的Chunk文件路径。

4. 保留并正确配置pnpm-workspace.yaml #

不要删除pnpm-workspace.yaml，它是pnpm识别monorepo的核心，配置如下：

packages:
  - "apps/**"
  - "libs/**"

这样pnpm能正确管理仓库内的包依赖关系，避免解析错误。

5. 清理缓存并重新构建 #

执行以下命令确保配置生效：

pnpm nx reset
pnpm install
pnpm nx build your-app --prod

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