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

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

0 голосов
/ 25 октября 2018

Цель

Я пытаюсь доставить расширение 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, неспособных распознать расширение и правильно импортировать его в окончательный дистрибутив.

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

Ответы [ 2 ]

0 голосов
/ 30 октября 2018

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

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

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

package.json {
    sideEffects: true
}

Пояснение

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

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

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

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

0 голосов
/ 30 октября 2018

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

...