Пакет NPM не импортируется в угловое производственное приложение

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 все работает нормально:
  (полная демонстрация здесь: демо )

  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. 
  

Это сложночтобы сказать, происходит ли проблема из-за машинописного текста, angular-cli, webpack или даже ng-packagr, неспособных распознать расширение и правильно импортировать его в окончательный дистрибутив.

Так что любая помощь будет очень признательна!
Спасибо.

Answer 1

Сам нашел ответ, но не без трудностей ..

Быстрый ответ

Добавьте следующее свойство в пакет npm:

package.json {
    sideEffects: true
} 

Пояснение

Проблема была связана с ng-packagr , который устанавливает sideEffects: false в dist версии пакета .json file.

Рекомендуется установить Angular Package Format v6 для оптимизации пакета распространения:

"Пакеты, содержащие это свойство со значением false, будут обрабатыватьсяВеб-пакет более агрессивен, чем те, которые этого не делают. Конечным результатом этих оптимизаций должно быть уменьшение размера пакета и лучшее распределение кода в блоках пакета после разделения кода "[ source ]

При значении false будет объединена только реально используемая часть кода.Однако в моем случае расширение распознается как "объявленное, но никогда не читаемое", поэтому игнорируется в процессе сборки.Если для sideEffects установлено значение true, веб-пакет будет просто беспрепятственно связывать весь пакет.

Answer 2

Вы пытаетесь ng serve --prod или ng build --prod?