如何解决如何在 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}`
);
}
}
但这会导致错误,提示未找到模块 @dashboard
。但是,如果我以非动态方式使用路径,例如:
import { Injectable } from '@angular/core';
@Injectable({
providedIn: 'root'
})
export class LayoutService {
loadInfoWidget() {
return import(
/* webpackMode: "lazy" */
/* webpackPrefetch: true */
`@dashboard/widget-info`
);
}
}
然后一切正常。我明白问题是 Webpack 没有选择动态路径?可以配置吗?
注意:
如果我像这样使用没有别名的相对路径:
import { Injectable } from '@angular/core';
@Injectable({
providedIn: 'root'
})
export class LayoutService {
loadWidget(name: string) {
return import(
/* webpackChunkName: "[request]" */
/* webpackMode: "lazy" */
/* webpackPrefetch: true */
`../../../../widgets/${name}-widget/src/lib/${name}-widget.component`
);
}
}
然后就可以了,但这有点“难看”,目前还不确定它是否会导致任何其他问题。此外,它给出了诸如 info-widget-src-lib-info-widget-component.js
之类的块文件名,这也比“dashboard-widget-info.js”更“丑陋”。
问题:
那么,是否可以使用 NX、打字稿和 Angular 配置动态别名路径,如果可以,如何配置?或者,如果您有更好的方法来解决这个问题,请分享您的想法。
谢谢!
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。