如何为 Angular 2/Ionic 2 应用程序构建一个共享的 npm 模块

Question

我正在开发几个共享功能的 Ionic 2 实用应用程序，例如身份验证服务和键盘组件，并且自然希望将它们分离到一个共享模块中。该计划是使用npm link 来简化共享模块和应用程序的并发开发。但是，我在尝试构建和运行我的 Ionic 应用程序时遇到了问题，这可能是由于我的共享模块的结构不正确或构建工具配置。

我的共享模块结构如下：

appkit/
    src/
        components/
            Keypad.ts
            index.ts
        pipes/
            PipeA.ts
            PipeB.ts
            index.ts
        services/
            AuthenticationService.ts
            DocumentService.ts
            index.ts
        Appkit.module.ts
        index.ts

    package.json
    tsconfig.json

每个索引文件都有类似的结构，例如src/pipe/index.ts：

export { PipeA } from "./PipeA";
export { PipeB } from "./PipeB";

还有根索引src/index.ts：

export * from "./Appkit.module";
export * from "./components";
export * from "./pipes";
export * from "./services";

我在 src/Appkit.module.ts 中定义 Angular 2 模块的地方：

import { NgModule, ModuleWithProviders } from "@angular/core";
import { IonicModule } from "ionic-angular";
// Components
import { Keypad } from "./components/Keypad";

// Pipes
import { PipeA } from "./pipes/PipeA";
import { PipeB } from "./pipes/PipeB";

// Services
import { AuthenticationService } from "./services/AuthenticationService";
import { DocumentService } from "./services/DocumentService";

@NgModule({
    imports: [IonicModule],
    declarations: [
        // Components
        Keypad,
        // Pipes
        PipeA,
        PipeB
    ],
    exports: [
        // Components
        Keypad,
        // Pipes
        PipeA,
        PipeB
    ]
})
export class Appkit {
    static forRoot(): ModuleWithProviders {
        return {
            ngModule: Appkit,
            providers: [
                AuthenticationService,
                DocumentService
            ]
        };
    }
}

作为构建过程的一部分，我将整个 src 目录复制到 dist/ 并运行 ngc，它似乎完成了所有正确的 AoT 编译。

现在如果我去 Ionic 2 应用程序之一运行 npm link app-kit 然后在 src/app/app.module.ts 添加 Appkit.forRoot() 到导入部分和 npm run build 我得到：

Error: Unexpected value '[object Object]' imported by the module 'AppModule'

Web pack (npm run watch) 设法通过构建，但在运行时产生相同的错误。

我还尝试物理复制共享模块文件夹以检查是否是符号链接问题并得到相同的结果。

如果我在 NgModule 配置中使用提供程序而不是使用 forRoot() 方法，我会收到错误：

Error: Unexpected value 'Appkit' imported by the module 'AppModule'

我不确定我到底哪里出错了，因为我的结构似乎与其他 angular 2 库一致。

Answer 1

经过几次修改后，我得到了它。

1. 在您的自述文件中，您从 nucleus-appkit 导入，但包名为 appkit。

2. 我无法直接从根目录导入，我必须从dist 文件夹导入。例如

import { Appkit } from 'appkit/dist';

1. 您不应在已发布的包中包含*.ts 文件。就此而言，*.ngfactory.ts 文件也不应该包含在内，但是当我将它们留在其中时它们不会导致任何错误。您想要的文件是：*.js、*.js.map 和 *.metadata.json。

确保将您的依赖项和 peerDependencies 添加到我的应用程序的 package.json 后，应用程序已编译。