Question

我们在Angular中使用了npm-library @ng-plus/modal。项目中的导入就是这样。

import { Modal, Toast, Alert } from '@ng-plus/modal';

现在，我们决定进行修改，并且它作为项目库位于我们应用程序中project/ngplus-modal文件夹下。

我们面临的问题是进口。

我们已经为项目paths定义了@modal。我们尝试将导入内容替换为以下无效的内容。

// Did not work for us: (Desired behaviour)
import { Modal, IModal, Toast, Alert } from '@modal';

以下是有效的方法：

import { Modal } from '@modal/lib/components/modal.component';
import { Toast } from '@modal/lib/components/toast.component';
import { IModal } from '@modal/lib/interfaces/imodal.interface';

但是，我们的问题是该库已经在超过100个文件，而不仅仅是组件，而是模型和接口散布在整个图书馆。如何像这样组织 npm导入？

import { Modal, IModal, Toast, Alert } from 'package';

Answer 1

您可以将所有组件合并到单个导出定义“ index.ts”中，例如：

export * from "lib/components/modal.component";
export * from "lib/components/toast.component";

并将此文件放在树的根中：

index.ts
lib
- 组件
  - 模态..
  - 吐司...

之后，您可以轻松地导入您的方法：

import { Modal, IModal, Toast, Alert } from '@modal';

Answer 2

在@modal目录中创建一个名为index.ts的文件，并使用以下文件填充该文件：

export * from '@modal/lib/components/modal.component';
export * from '@modal/lib/components/toast.component';
export * from '@modal/lib/interfaces/imodal.interface';

其余组件应正常工作。

如何在Angular中简化npm之类的导入

2 个答案: