Question

目标

我正在尝试将rxjs的打字稿模块扩展作为npm软件包提供，以用于Angular项目中。

问题

在本地开发模式下，在Angular应用程序中使用程序包可以很好地工作，但是一旦将应用程序构建用于生产环境，则程序包不会在最终发行版中导入。

详细信息

大多数扩充提供了一种新方法： Observable.safeSubscribe（）
（完整的源代码在这里：ngx-safe-subscribe.ts）

import { Observable, Subscription } from 'rxjs';

declare module 'rxjs/internal/Observable' {
    interface Observable<T> {
        safeSubscribe: typeof safeSubscribe;
    }
}

export function safeSubscribe<T>(...): Subscription {
    ...
}
Observable.prototype.safeSubscribe = safeSubscribe;

该软件包是使用ng-packagr

一旦导入并在Angular项目中使用，一切都可以正常工作：
（此处完整的演示：demo）

import { Component, OnDestroy } from '@angular/core';
import { of } from 'rxjs';
import '@badisi/ngx-safe-subscribe';

@Component({
    selector: 'my-app',
    templateUrl: './app.component.html'
})
export class AppComponent implements OnDestroy  {
    constructor() {
        of([]).safeSubscribe(this, () => { console.log('ok'); });
    }
    ngOnDestroy(): void {}
}

为生产而构建的软件包不会在最终版本中导入：

ng serve --prod

[error in console]: TypeError: Object(...)(...).safeSubscribe is not a function

我最近一次尝试的都是最新的

angular@7.0.0, typescript@3.1.3, ng-packagr@4.4.0

在旁注中，在Visual Studio Code中使用命名的导入样式将导致以下结果：

import { safeSubscribe } from '@badisi/ngx-safe-subscribe';

[ts] 'safeSubscribe' is declared but its value is never read.

很难判断问题是出自打字稿，angular-cli，webpack还是ng-packagr，无法识别增强并将其正确导入最终版本。

任何帮助将不胜感激！
谢谢。

Answer 1

您要尝试提供--prod还是ng build --prod吗？

Answer 2

自己找到答案，但并非没有困难。

快速解答

将以下属性添加到npm包中：

package.json {
    sideEffects: true
}

说明

该问题与 ng-packagr 有关，该文件在 package.json 文件的dist版本中设置了 sideEffects：false 。

推荐使用Angular Package Format v6进行此设置以优化分发包：

“包含将此属性设置为false的包将由 webpack比没有的webpack更积极。的最终结果这些优化应该是更小的捆绑包大小和更好的代码在代码拆分后以束块的形式分发“ [source]

设置为false时，仅捆绑实际使用的代码部分。但是在我的情况下，增强被识别为“已声明但从未读取”，因此在构建过程中被忽略。将sideEffects设置为true时，webpack将毫无疑问地捆绑整个程序包。

NPM软件包未导入角度生产应用程序中

2 个答案: