title: Angular Application from html-template getting TypeError on template js
body: <p>Trying to create an angular(11) application, using this html template.<a href="https://bootstrapmade.com/flexstart-bootstrap-startup-template/" rel="nofollow noreferrer">https://bootstrapmade.com/flexstart-bootstrap-startup-template/</a></p>
  <p>But getting this error on the template's js file.</p>
  <pre><code>main.js:29 Uncaught TypeError: Cannot read property 'addEventListener' of null
  at on (main.js:29)
  at main.js:113
  at main.js:317
  </code></pre>
  <p><a href="https://i.stack.imgur.com/cMUz7.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/cMUz7.png" alt="error" /></a>
  Added the css and js like this.</p>
  <p><strong>index.html</strong>, same as template index.html</p>
  <pre><code>&lt;!-- Vendor CSS Files --&gt;
    &lt;link href=&quot;assets/vendor/bootstrap/css/bootstrap.min.css&quot; rel=&quot;stylesheet&quot;&gt;
    &lt;link href=&quot;assets/vendor/bootstrap-icons/bootstrap-icons.css&quot; rel=&quot;stylesheet&quot;&gt;
    &lt;link href=&quot;assets/vendor/aos/aos.css&quot; rel=&quot;stylesheet&quot;&gt;
    &lt;link href=&quot;assets/vendor/remixicon/remixicon.css&quot; rel=&quot;stylesheet&quot;&gt;
    &lt;link href=&quot;assets/vendor/swiper/swiper-bundle.min.css&quot; rel=&quot;stylesheet&quot;&gt;
    &lt;link href=&quot;assets/vendor/glightbox/css/glightbox.min.css&quot; rel=&quot;stylesheet&quot;&gt;
  
    &lt;!-- Template Main CSS File --&gt;
    &lt;link href=&quot;assets/css/style.css&quot; rel=&quot;stylesheet&quot;&gt;
  </code></pre>
  <p>And js, at <strong>angular.json</strong></p>
  <pre><code>&quot;scripts&quot;: [
                &quot;src/assets/vendor/bootstrap/js/bootstrap.bundle.js&quot;,
                &quot;src/assets/vendor/aos/aos.js&quot;,
                &quot;src/assets/vendor/php-email-form/validate.js&quot;,
                &quot;src/assets/vendor/swiper/swiper-bundle.min.js/&quot;,
                &quot;src/assets/vendor/purecounter/purecounter.js&quot;,
                &quot;src/assets/vendor/isotope-layout/isotope.pkgd.min.js&quot;,
                &quot;src/assets/vendor/glightbox/js/glightbox.min.js&quot;,
                &quot;src/assets/js/main.js&quot;
              ]
  </code></pre>
  <p>and the <code>main.js</code> code</p>
  <pre><code>[![(function() {
    &quot;use strict&quot;;
  
    /**
     * Easy selector helper function
     */
    const select = (el, all = false) =&gt; {
      el = el.trim()
      if (all) {
        return \[...document.querySelectorAll(el)\]
      } else {
        return document.querySelector(el)
      }
    }
  
    /**
     * Easy event listener function
     */
    const on = (type, el, listener, all = false) =&gt; {
      if (all) {
        select(el, all).forEach(e =&gt; e.addEventListener(type, listener))
      } else {
        select(el, all).addEventListener(type, listener)
      }
    }]
  </code></pre>
  <p><a href="https://i.stack.imgur.com/VOHcT.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/VOHcT.png" alt="main.js #29" /></a></p>
  <p><a href="https://i.stack.imgur.com/rtn46.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/rtn46.png" alt="main.js-#113" /></a>
  <a href="https://i.stack.imgur.com/YBTQm.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/YBTQm.png" alt="main.js #317" /></a></p>