Как правильно загрузить файлы JavaScript?

Question

Я создал файл index.html , который выглядит следующим образом:

<section id="slider" class="slider-element slider-parallax" style="background: url('assets/images/reyl/architecture-bank-bridge-417411.jpg'); background-size: cover;" data-height-xl="670" data-height-lg="500" data-height-md="400" data-height-sm="250" data-height-xs="200">
  <div class="slider-parallax-inner">
    <div class="container clearfix">
      <div class="slider-caption slider-caption-center">
        <h2 data-animate="fadeInUp">
          <div class="text-rotater" data-separator="|" data-rotate="zoomIn" data-speed="10000">
            In Our <span class="t-rotate">Life|Family|Life|Home</span>
          </div>
        </h2>
        <p class="d-none d-sm-block" data-animate="fadeInUp" data-delay="200">Le Magazine des collaborateurs du Groupe REYL, No 1 Décembre 2018</p>
      </div>
    </div>
  </div>
</section>

<app-root></app-root>

<script src="assets/js/jquery.js"></script>
<script src="assets/js/plugins.js"></script>
<script src="assets/js/functions.js"></script>

<app-root></app-root> вызывает файл с именем home.component.html в src / app / home /.

Мой слайдер ( # slider ) отлично работает таким же образом, как и все функции, определенные в моем файле functions.js.

Проблема возникает, когда я пытаюсь переместить секцию #slider из index.html в home.component.html .Когда я делаю это, все функции, определенные в functions.js, перестают работать (я получаю ошибки об отсутствующих библиотеках, или мои функции не обнаруживают элементы DOM).

Как я должен исправить этот видвопросов?

Ниже вы найдете содержимое функции textRotator () (functions.js), которая должна анимировать div ". text-rotater" .Он не работает, когда ползунок # включен home.component.html .

textRotater: function(){

  if( !$().Morphext ) {
    console.log('textRotater: Morphext not Defined.');
    return true;
  }

  console.log('textRotater()');
  console.log('$textRotaterEl');
  console.log($textRotaterEl);
  console.log('$textRotaterEl.length');
  console.log($textRotaterEl.length);

  if( $textRotaterEl.length > 0 ){
    $textRotaterEl.each(function(){
      var element = $(this),
        trRotate = $(this).attr('data-rotate'),
        trSpeed = $(this).attr('data-speed'),
        trSeparator = $(this).attr('data-separator');

      if( !trRotate ) { trRotate = "fade"; }
      if( !trSpeed ) { trSpeed = 1200; }
      if( !trSeparator ) { trSeparator = ","; }

      var tRotater = $(this).find('.t-rotate');

      var pluginData = tRotater.Morphext({
        animation: trRotate,
        separator: trSeparator,
        speed: Number(trSpeed)
      });

      console.log( pluginData );
    });
  }
},

Переменные определены в конце functions.js file

var $window = $(window),
  $body = $('body'),
  $wrapper = $('#wrapper'),
  $header = $('#header'),
  $headerWrap = $('#header-wrap'),
  $content = $('#content'),
  $footer = $('#footer'),
  windowWidth = $window.width(),
  $portfolio = $('.portfolio'),
  $shop = $('.shop'),
  $gridContainer = $('.grid-container'),
  $slider = $('#slider'),
  $sliderParallaxEl = $('.slider-parallax'),
  $sliderElement = $('.slider-element'),
  $textRotaterEl = $('.text-rotater'),
  $cookieNotification = $('#cookie-notification');
(...)

И функции должны вызываться, когда DOM готов:

$(document).ready( SEMICOLON.documentOnReady.init );
$window.on( 'load', SEMICOLON.documentOnLoad.init );
$window.on( 'resize', SEMICOLON.documentOnResize.init );