Как подключить стили из npm пакетов при сборке через ng (angular)?

Question

[Андрей]

Для примера - подключаю toastr (библиотека для показа всплывающих сообщений).
Используется angular 9 и соответствующий angular cli
Последовательность действий такова:
1. Добавляю пакет (добавляю в packages.json строку)

{
  ...
  "dependencies": {
    ...
    "toastr": "2.1.4",
    ...
  },
  ...
}

2. Подключаю пакет и использую в любом файле
some.component.ts

...
import toastr from "toastr";
...
constructor() {
   toastr.warning("test");
}

3. Собираю проект с помощью ангуларовской cli
ng build
4. Открываю страницу - и вижу что сообщение отображается без стилей.

Вопрос: что я делаю не так, и как делать правильно?

Answer 1

[the5x]

https://www.npmjs.com/package/ngx-toastr

Comments

[Андрей]

Они проблему не решают а предлагают копировать css в проект либо указывать путь прямо в папку node. Неужели нет другого решения?

[Kovalsky]

Андрей, вы скачали пакет ngx-toastr, вы заюзали его стили в проекте. Какое именно другое решение нужно если цель вроде бы достигнута?

[Андрей]

Kovalsky, менять один пакет на точно такой же, но другой - это не решение. Точно так же я могу подключить стили обычного toastr (или любого другого пакета) - так же в секции styles указать путь к папке node_modules итд.

[Kovalsky]

Андрей, "менять один пакет на точно такой же, но другой" - в смысле? Об этом я в вопросе ничего не нашел

"Точно так же я могу подключить стили обычного toastr (или любого другого пакета) - так же в секции styles указать путь к папке node_modules итд" - ну да, так и делается обычно. А как надо?

Можете делать это не в styles, а явным импортом. Мне так больше нравится например,

[Андрей]

Kovalsky, Об этом я в вопросе ничего не нашел - вот именно, я об этом не спрашивал, но мне именно это посоветовали)
Можете делать это не в styles, а явным импортом. Мне так больше нравится например, - можно здесь по-подробнее?

[Kovalsky]

Андрей, "вот именно, я об этом не спрашивал, но мне именно это посоветовали" - а, я этого не заметил,

"можно здесь по-подробнее?" - как у них в мануалах: для ngx-toastr @import '~ngx-toastr/toastr' и для toastr @import "toastr"

[Антон Швец]

а каким по-вашему должен быть идеальный способ подключения стилей?

[Андрей]

Антон Швец, без влезания руками в папку node_modules и поиска "а куда же автор засунул стили".

[Антон Швец]

Андрей, они должны волшебным образом появится чтоли? Написано же в гайде - импорти вот это, в чем проблема то.

[Андрей]

Антон Швец, проблем нет, просто это не решение. Импортить я могу стили из обычной (не npx) библиотеки. В общем я понял, что нормального решения нет, кроме как импортить в стилях, или сразу указывать node_modules

[Антон Швец]

Андрей, node_modules это просто папка, куда npm скачивает файлы. Т.е. npm скачивает, вы оттуда берете и импортируете.
Можно скачать самому в другую папку, можно замутить какой-нибудь алиас для сборщика, типа ~, суть от этого не меняется и не должна меняться. И это решение, самое что ни на есть ординарное - вшивание стилей из локального файла.