brandonroberts / angular-router-loader

A Webpack loader that enables string-based module loading with the Angular Router

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

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',
  },
},