Ошибки Angular 7 и External Java Script

Question

Я впервые создаю SPA в Angular, и у меня возникла проблема с моим компонентом app-video-controls, который я создал.

Я прототипировал приложение в HTML, и ванильный JavaScript работал отлично, однако, когда я перестроил в Angular и импортировал тот же самый файл js, я начал получать сообщение об ошибке:

Невозможно установить свойство 'currentTime', равное нулю

вот это Profile.Component.html

<tr>
<td>
    <div class="row" *ngFor="let user of users">
        <div class="col-12">
            <div class="account-item clearfix">
                    <div class="image">  <a href="#">
                            <img 
                            [src]="user.imagePath" 
                            alt="{{user.name}}">
                          </a></div>
                    <div class="content">
                        <h1>{{user.name}}</h1>
                    </div>
            </div>
            <hr>
        </div>

    </div>

    <div class="row" *ngFor="let user of users">
        <div class="col-6">
            <h2 id="tag">Video</h2>
            <video id="my-video" class="video-js video1" controls="" preload="auto" width="100%">
                    <source id="source_video" [src]="user.videoPath" type="video/mp4">
                    <p class="vjs-no-js">
                     To view this video please enable JavaScript, and consider upgrading to a web browser that
                    <a href="https://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
                    </p>
                    </video>

        </div>
        <div class="col-6">
            <h2>Sections</h2>
        <app-video-controlls></app-video-controlls>
        </div>
    </div>
    <div class="row">
        <div class="col-12">
            <h2>Comments</h2>
                <div class="comments">

                    </div>
        </div>
    </div>

</td>

Вот видео-controls.component.html

<div class="Section1">

<button id="video1" class="video-btn playing">
        <div class="icon"><i class="fas fa-play-circle"></i></div>
        <div class="video-text"><strong>Section 1. Introduction and Warm up</strong><br>
           </div>
    </button>
    <div id="timestamp-1" class="list">
        <ul>
            <li class="question"><button onclick="setCurTime()" type="button">What is your name?</button></li> 
            <li class="question"><button onclick="setCurTime2()" type="button">What do you study?</button></li>
            <li class="question"><button onclick="setCurTime3()" type="button">How did you develop this interest in linguistics?</button></li>
            <li class="question"><button onclick="setCurTime4()" type="button">What do you do for fun?</button></li>
        </ul>
    </div>

            <button id="video2" class="video-btn "> 
                <div class="icon"><i class="fas fa-play-circle"></i></div>
                <div class="video-text"><strong>Section 2. Academic Discussion</strong><br>
            Discussion based on information provided</div>
        </button>
        <div id="timestamp-2" class="list inactive">
                <ul>
                        <li class="question"><button onclick="setCurTime5()" type="button">Argument For Solar Energy</button></li> 
                        <li class="question"><button onclick="setCurTime6()" type="button">Argument For Bike Paths</button></li>
                        <li class="question"><button onclick="setCurTime7()" type="button">What were the two ideas?</button></li>
                        <li class="question"><button onclick="setCurTime8()" type="button">Which idea should be implemented first?</button></li>
                        <li class="question"><button onclick="setCurTime9()" type="button">Safety concerns?</button></li>
                    </ul>
            </div>

            <button id="video-3" class="video-btn">
                <div class="icon"><i class="fas fa-play-circle"></i></div>
                <div class="video-text"><strong>Section 3. Academic Presentation</strong><br>
                    Questions based on an academic lecture</div></button>
                    <div id="timestamp-3" class="list inactive">
                            <ul>
                                    <li class="question"><button onclick="setCurTime10()" type="button">Summarize the video you viewed on cave paintings.</button></li> 
                                    <li class="question"><button onclick="setCurTime11()" type="button">Have you ever taken an art class?</button></li>
                                    <li class="question"><button onclick="setCurTime12()" type="button">Do you think there should be more art classes in primary schools?</button></li>
                                </ul>
                        </div>

                <button id="video-4" class="video-btn"> <div class="icon"><i class="fas fa-play-circle"></i></div>
                    <div class="video-text"><strong>Section 4. Free Discussion</strong><br>
                       Interviewee talks about any topic they like</div> </button>
                       <div id="timestamp-4" class="list inactive">
                            <ul>
                                    <li class="question"><button onclick="setCurTime13()" type="button">Experience living in a foreign country</button></li> 
                                    <li class="question"><button onclick="setCurTime11()" type="button">What did you notice about different cultures living abroad?</button></li>

                                </ul>
                        </div>
</div>

Фрагмент файла angular.json

"scripts": [
          "node_modules/jquery/dist/jquery.min.js",
          "src/app/js/video.js"
        ],

и, наконец, фрагмент JS

var vid = document.getElementById("my-video");

function getCurTime() { 
 alert(vid.currentTime);
} 

function setCurTime() { 
  vid.currentTime=14;
}