angular 生产应用中未导入 NPM 包

Question

目标

我正在尝试将 rxjs 的 typescript 模块扩充作为 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 代码中使用命名导入样式会导致以下结果：

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

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

很难判断问题是否来自 typescript、angular-cli、webpack 甚至 ng-packagr 无法识别扩充并将其正确导入最终 dist。

非常感谢任何帮助！
谢谢。

Answer 1

您是在尝试 ng serve --prod 还是 ng build --prod？

Answer 2

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

快答

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

package.json {
    sideEffects: true
}

说明

该问题与 ng-packagr 有关，它在 [ 的 dist 版本中设置了 sideEffects:false =37=] 文件.

这是 Angular Package Format v6 推荐的设置以优化分发包：

"Packages that contain this property set to false will be processed by webpack more aggressively than those that don't. The end result of these optimizations should be smaller bundle size and better code distribution in bundle chunks after code-splitting" [source]

设置为 false 时，只会捆绑真正使用过的代码部分。然而，在我的例子中，扩充被识别为 "declared but never read" 因此在构建过程中被忽略。将 sideEffects 设置为 true webpack 将毫无疑问地简单地捆绑整个包。

angular 生产应用中未导入 NPM 包

NPM package is not imported in angular production app

npm

typescript

webpack

angular-cli

ng-packagr