动态路径导入 - Angular 组件

Question

有没有办法以这样的格式导入组件或任何与此相关的内容，其中有条件决定使用哪个？

import { environment } from '../../environments/environment';

import { NgModule, APP_INITIALIZER } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';

if (environment.envName == 'dev')
    import { ListInventoryComponent, ConfirmDeleteDialog } from 'this_local_path';
else
    import { ListInventoryComponent, ConfirmDeleteDialog } from 'this_npm_package_path';

我有我正在开发和创建 npm 包的本地组件和模块，但也希望能够在不更改代码中对它的每个引用的情况下测试它们。

Answer 1

您不能以这种方式有条件地导入组件。 你应该使用的是一种叫做Dynamic imports东西。

你可以在这里读更多关于它的内容：

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import

（此外，互联网上还有许多其他指南）。

一个例子是：

const getDynamicComponent = async (envName) => {
    let dynamicComponent;

    if (envName === 'dev') {
        dynamicComponent = await import('this_local_path');
    } else {
        dynamicComponent = await import('this_npm_package_path');
    }

    return dynamicComponent;
}