小编Max*_*Max的帖子

如何在 Nx 中配置动态别名路径?

背景:

我正在构建一个 Angular 仪表板,在其中动态导入小部件(Angular 模块和组件)(无需路由)。我在这篇精彩文章的帮助下实现了这一点https://netbasal.com/welcome-to-the-ivy-league-lazy-loading-components-in-angular-v9-e76f0ee2854a

我也在使用 Nx,我的每个小部件都是一个“NX Angular 库”。

问题:

在我的代码中,我想使用 Nx 设置的路径别名,如下所示:

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class LayoutService {

  loadWidget(name: string) {
    return import(
      /* webpackMode: "lazy" */
      /* webpackPrefetch: true */
      `@dashboard/widget-${name}`
    );
  }
}

Run Code Online (Sandbox Code Playgroud)

但这会导致错误提示@dashboard找不到模块。但是,如果我以非动态方式使用路径,例如:

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class LayoutService {

  loadInfoWidget() {
    return import(
      /* webpackMode: "lazy" */
      /* webpackPrefetch: true */
      `@dashboard/widget-info`
    );
  }
}
Run Code Online (Sandbox Code Playgroud)

然后一切正常。我知道问题是 …

typescript webpack angular nrwl nrwl-nx

7
推荐指数
0
解决办法
1661
查看次数

标签 统计

angular ×1

nrwl ×1

nrwl-nx ×1

typescript ×1

webpack ×1