Failed to load chunk with pnpm and Angular lazily loaded components

I am using an Nx monorepo with Angular 19. I just switched from npm to pnpm.

While running locally, I can install and serve my applications without issue, and I can access routes or open components that are lazily loaded without errors.

However, once the application is bundled and deployed to any environment other than localhost, if you access a route or try to load a lazy component, I get an error about failed to download chunk, etc.

This seems tied to pnpm and it symlinking, because after

• setting node-linker=shamefully-hoist in my .npmrc
• deleting my pnpm-workspace.yaml
• installing and deploying

everything now works as expected in development and there are no failed to download chunk errors.

One example of a component with this error is my ChangeLog page. It is a standalone component that is lazily loaded inside my lib.global.routes.ts

export const sharedGlobalShellRoutes: Route[] = [
{
path: 'changelog',
title: 'Changelog',
pathMatch: 'full',
loadComponent: () =>
import('@bevtech/shared/feature/change-log').then(
(ref) => ref.ChangeLogComponent,
),
},
...
];


Which is then referenced by each specific apps lib.routes.ts

export const appRoutes: Route[] = [
appSupplyPlanningFeatureShellRoute,
...sharedGlobalShellRoutes,
];


which is then finally referenced in my applications main.ts

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


Is there some configuration I need to change in order to allow lazily loaded modules and components to work with pnpm and how it does its node_modules structure?

Continue reading...