title: How to configure dynamic aliased paths in Nx?
body: <p><strong>Background:</strong></p>
  <p>I am building an Angular dashboard where I import widgets (Angular modules and components) dynamically (without routing). I achieved this with the help from this great article <a href="https://netbasal.com/welcome-to-the-ivy-league-lazy-loading-components-in-angular-v9-e76f0ee2854a" rel="noreferrer">https://netbasal.com/welcome-to-the-ivy-league-lazy-loading-components-in-angular-v9-e76f0ee2854a</a>.</p>
  <p>I am also using Nx and my each widget is a 'NX Angular library'.</p>
  <p><strong>Issue:</strong></p>
  <p>In my code I'd like to use the path alias set with Nx like like so:</p>
  <pre class="lang-js prettyprint-override"><code>import { Injectable } from '@angular/core';
  
  @Injectable({
    providedIn: 'root'
  })
  export class LayoutService {
  
    loadWidget(name: string) {
      return import(
        /* webpackMode: &quot;lazy&quot; */
        /* webpackPrefetch: true */
        `@dashboard/widget-${name}`
      );
    }
  }
  
  </code></pre>
  <p>But this will result in an error saying module <code>@dashboard</code> not found. However, if I use path in non dynamic way like:</p>
  <pre class="lang-js prettyprint-override"><code>import { Injectable } from '@angular/core';
  
  @Injectable({
    providedIn: 'root'
  })
  export class LayoutService {
  
    loadInfoWidget() {
      return import(
        /* webpackMode: &quot;lazy&quot; */
        /* webpackPrefetch: true */
        `@dashboard/widget-info`
      );
    }
  }
  </code></pre>
  <p>Then it all works fine. I understand the issue is that Webpack doesn't pick up the dynamic paths? Is it possible to configure?</p>
  <p><strong>Note:</strong></p>
  <p>If I use relative paths without alias like so:</p>
  <pre class="lang-js prettyprint-override"><code>import { Injectable } from '@angular/core';
  
  @Injectable({
    providedIn: 'root'
  })
  export class LayoutService {
  
    loadWidget(name: string) {
      return import(
        /* webpackChunkName: &quot;[request]&quot; */
        /* webpackMode: &quot;lazy&quot; */
        /* webpackPrefetch: true */
        `../../../../widgets/${name}-widget/src/lib/${name}-widget.component`
      );
    }
  }
  </code></pre>
  <p>Then it works, but this is a little 'ugly' and not sure yet if it will be causing any other issues. Plus it gives the chunk filename of something like <code>info-widget-src-lib-info-widget-component.js</code> which is also even more 'ugly' than, say 'dashboard-widget-info.js`.</p>
  <p><strong>Question:</strong></p>
  <p>So, is it possible to configure dynamic aliased paths with NX, typescript and Angular, if so how? Or if you have any better approach tackling this, please share your ideas.</p>
  <p>Thank you!</p>