0

目标

我正在尝试将 rxjs 的 typescript 模块增强作为 npm 包提供，以便在 Angular 项目中使用。

问题

在 Angular 应用程序中使用包在本地开发模式下可以正常工作，但是一旦为生产而构建应用程序，包就不会被导入到最终的 dist 中。

细节

  • 主要是提供了一种新方法：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 {}
}

  • 一旦为生产而构建，包就不会导入到最终的 dist 中： 

    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.

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

所以任何帮助将非常非常感激！
谢谢。

4

2 回答 2

0

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

于 2018-10-30T19:43:02.043 回答
0

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

快速回答

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

package.json {
    sideEffects: true
}

解释

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

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

“包含此属性设置为 false 的包将由 webpack 比那些不包含的包更积极地处理。这些优化的最终结果应该是更小的包大小和代码拆分后包块中更好的代码分布”[源代码]

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

于 2018-10-30T20:53:56.357 回答