来自 html-template 的 Angular 应用程序在模板 js 上获取 TypeError

问题描述

尝试使用此 html 模板创建 angular(11) 应用程序。https://bootstrapmade.com/flexstart-bootstrap-startup-template/

但是在模板的 js 文件上出现这个错误。

main.js:29 Uncaught TypeError: Cannot read property 'addEventListener' of null
at on (main.js:29)
at main.js:113
at main.js:317

像这样添加了css和js。

index.html，同模板 index.html

<!-- vendor CSS Files -->
  <link href="assets/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
  <link href="assets/vendor/bootstrap-icons/bootstrap-icons.css" rel="stylesheet">
  <link href="assets/vendor/aos/aos.css" rel="stylesheet">
  <link href="assets/vendor/remixicon/remixicon.css" rel="stylesheet">
  <link href="assets/vendor/swiper/swiper-bundle.min.css" rel="stylesheet">
  <link href="assets/vendor/glightBox/css/glightBox.min.css" rel="stylesheet">

  <!-- Template Main CSS File -->
  <link href="assets/css/style.css" rel="stylesheet">

和 js，在 angular.json

"scripts": [
              "src/assets/vendor/bootstrap/js/bootstrap.bundle.js","src/assets/vendor/aos/aos.js","src/assets/vendor/PHP-email-form/validate.js","src/assets/vendor/swiper/swiper-bundle.min.js/","src/assets/vendor/purecounter/purecounter.js","src/assets/vendor/isotope-layout/isotope.pkgd.min.js","src/assets/vendor/glightBox/js/glightBox.min.js","src/assets/js/main.js"
            ]

和 main.js 代码

[![(function() {
  "use strict";

  /**
   * Easy selector helper function
   */
  const select = (el,all = false) => {
    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) => {
    if (all) {
      select(el,all).forEach(e => e.addEventListener(type,listener))
    } else {
      select(el,all).addEventListener(type,listener)
    }
  }]

解决方法

为什么要在 Angular 11 应用程序中编写 JavaScript？ TypeScript 应该是现代 Angular 应用程序的标准，如果可能的话，我建议您改用它。 TypeScript config

TypeScript 是 Angular 应用程序开发的主要语言。

您在 main.js 中的代码必须在 .mobile-nav-toggle 准备就绪之前执行。此时元素不可用，因此它抛出 null。因此，您必须使 main.js 代码在 .mobile-nav-toggle 完全呈现后执行。

如果您不设置问题的 Stackblitz 示例，则很难准确定位错误发生的位置。请这样做以获得更准确的答案。 Stackblitz Angular standard setup

,

将 /** 简单的事件监听器函数 */ 替换为 main.js 中的下面给出的内容。

const on = (type,el,listener,all = false) => {
    let selectEl = select(el,all)
    if (selectEl) {
        if (all) {
            selectEl.forEach(e => e.addEventListener(type,listener))
        } else {
            selectEl.addEventListener(type,listener)
        }
    }
}