Router and Path Mapping not working

Help Requests
1

I have path mapping working. However, if I try to use the mapped path as a moduleId for a route, it can’t resolve. I’m using ts-loader and webpack (with TsconfigPathsPlugin). I assume there’s something extra I need to do?

1 Like
2

I think theres an open issue about aliasing on our webpack plugin repo. Though i may be wrong. Could you help describe it clearer with some pseudo code of what you are trying to do?

3

Folder Structure

  • Root
    • ClientApp
      • app
        • components
          • app
            • app.html
            • app.ts
      • modules
        • core
          • admin
            • index.html
            • index.ts

tsconfig.json

{
...
"baseUrl": ".",
		"paths": {
			"core/*": [ "ClientApp/modules/core/*" ],
		}
}

app.ts - Configuring Router

I can successfully do import { Index } from "core/admin/index"; in this file, but when i try and use the same path for the route (displayed below), it gives an error when trying to navigate.

private configureRouter(config: RouterConfiguration) {
	...
	config.map([
		{
			route: ["", "home"],
			name: "home",
			settings: { icon: "fa fa-home" },
			moduleId: "../home/home",
			nav: true,
			title: "Home"
		}, 
		...
		{
			route: "admin",
			name: "admin",
			moduleId: PLATFORM.moduleName("core/admin/index"),
			title: "Admin"
		}
	]);
}
1 Like
4

You need to config path aliasing with both TypeScript and webpack. Go to your webpack.config.js and modify resolve to similar to the following:

  resolve: {
    // ... existing properties
    alias: {
      core: './ClientApp/modules/core'
    }
  }

Note that './ClientApp/modules/core' varies depends where you run the command. Maybe other folks who have done something similar can help you out here. Anyone please? :smile:

5

That’s what the TsconfigPathsPlugin is doing already. As I said, it is working, just not when used by the router.

1 Like
6

I found a different way of making it work. By adding an index.ts in the core folder with export function configure(config: FrameworkConfiguration) I can add it as a feature during boot making the core folder accessible everywhere via modules/core/*; so I can reference the class I need using modules/core/admin/index. This also resolves another problem I had. So two birds with one stone.

2 Likes