Ошибки файла Angular 7 и внешнего Java Script

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

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

Cannot set property 'currentTime' of null

здесь 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;
}