Внешние библиотеки в некоторых компонентах Angular 5

Question

Я пытаюсь интегрировать эту библиотеку в мой проект.Я смог установить пакет npm.Однако теперь мне нужно добавить скрипт в мой index.html.Эта библиотека будет использоваться только администратором страницы.Есть ли способ добавить сценарий только в AdminComponent, где администратор может создавать новые страницы?В противном случае библиотека будет загружена, но почти никогда не будет использоваться, и ее размер составляет около 500 КБ, что значительно для повышения производительности.

Заранее спасибо.

Answer 1

Я наконец-то исправил проблему с помощью смеси предыдущего ответа и некоторого дополнительного кода.Вместо добавления всего сценария в index.html я закончил тем, что добавил при загрузке просто оператор if:

window.addEventListener('load', () => {
  if(CKEDITOR) {
    const textarea = document.querySelector('textarea');
    CKEDITOR.replace(textarea);
  }
})

Если в окне существует CKEDITOR, то он его инициализирует.После того, как этот код был добавлен, я написал следующее в компоненте, который я собираюсь использовать в редакторе:

const ckEditorScript = document.createElement('script');
ckEditorScript.setAttribute('src','https://cdn.ckeditor.com/4.5.11/full/ckeditor.js');
document.head.appendChild(ckEditorScript);

Answer 2

Хотя это не угловой способ, но вы можете добавить тег <script> в тег HTML-заголовка, добавив следующий код в ngOnInit ловушку жизненного цикла AdminComponent

const ckEditorScript = document.createElement('script');
ckEditorScript.setAttribute('src','https://cdn.ckeditor.com/4.5.11/full/ckeditor.js');
document.head.appendChild(ckEditorScript);

Таким образом, скриптбудет загружен, только если пользователь перейдет на AdminComponent