Can't resolve module because replacement path uses \\ instead of /
shayded-exe opened this issue · comments
I'm trying to lazy load modules with paths mapped via resolve.alias. This is in a monorepo style project.
{
path: 'feature-a',
loadChildren: '@scope/feature-a/feature-a.module#FeatureAModule',
},
My webpack config includes the following:
resolve: {
alias: {
// feature-a resides in the modules folder under the root of the repo
'@scope': root('modules'),
},
}
Webpack gives me the following error during the build:
Module not found: Error: Can't resolve '@scope\feature-a\feature-a.module' in 'C:\code\the-repo\apps\app-a\src\app'
I have confirmed via ?debug=true that angular-router-loader is in fact doing the replacement. It seems like the issue arises because the loader replaces the path separators with backslashes thus preventing webpack from properly resolving the module.
I tested out directly pasting the replacement code into the source and just changing the first separator back to a forward slash, and it worked perfectly.
{
path: 'feature-a',
loadChildren: function() { return import('@scope/feature-a\\feature-a.module')
.then(module => module['FeatureAModule'], (e: any) => { throw({ loadChunkError: true, details: e }); }) },
},
So far I haven't been able to figure out a workaround. What even is the reasoning behind replacing the path separators in the first place?
For now, I have worked around the issue by adding the following after angular-router-loader in the loader chain (this is for use with the setting ?loader=import
):
{
loader: 'string-replace-loader',
options: {
search: `import\\('@(\\w+)\\\\\\\\`,
replace: `import('@$1/`,
flags: 'g',
},
},