Есть задача - вставить в template Angular-приложения внешний js-скрипт

Пример номер один

Самый простой, правильный и надежный способ - добавить скрипт в сборку приложения.

Пошагово:

  1. создать папку
    1
    
    scripts
    
    внутри директории
    1
    
    assets
    
    -
    1
    
    src/assets/scripts
    
  2. поместить js-скрипт внутрь созданной папки -
    1
    
    src/assets/scripts/awesome.js
    
  3. открыть файл
    1
    
    angular.json
    
    в корне проекта
  4. добавить путь к скрипту в ключе
    1
    
    scripts
    
    :
{
  "projects": {
    "awesome-project": {
      "architect": 
            "scripts": ["src/assets/scripts/awesome.js,]
          },
          ....
}

Пример номер два

Есть еще способ добавления - при помощи

1
Renderer2
:

constructor(
  @Inject(DOCUMENT) private document: Document,
  private renderer2: Renderer2
) {}

ngOnInit(): void {
  const textScript = this.renderer2.createElement('script');
  textScript.src = 'https://code.jquery.com/jquery-3.3.1.slim.min.js';
  this.renderer2.appendChild(this.document.body, textScript);

  const srcScript = this.renderer2.createElement('script');
  srcScript.type = 'text/javascript';
  srcScript.text = `
    (function() {
      console.log('Hello from Siberia!')
    }());
  `;
  this.renderer2.appendChild(this.document.body, srcScript);
}

Пробовал этот способ - работает; но в консоли браузера появляется ошибка о необъявленной переменной X; отказался от этого способа.

Итог

Мне с первого раза помог способ номер один.

ESLint: TypeError: this.libOptions.parse is not a function

В новом учебном проекте под [NestJS](https://nestjs.com/) столкнутся с такой ошибкой в WebStorm - **ESLint: TypeError: this.libOptions.pa...… Continue reading

Ubuntu - проблема с KVM Switch

Published on September 12, 2022

WebStorm - hotkeys

Published on June 13, 2022