Angular集成tw-elements时表单输入触发Cannot read properties of null错误求助

正在学习用Angular搭配Tailwind CSS和tw-elements开发，CSS样式运行正常，但点击表单中的输入框时出现以下错误：

zone.js:1714 Uncaught TypeError: Cannot read properties of null (reading 'style')
at d._applyNotch (node_modules\tw-elements\dist\js\index.min.js:11:168833)
at d._getElements (node_modules\tw-elements\dist\js\index.min.js:11:169384)
at node_modules\tw-elements\dist\js\index.min.js:11:169140
at J (node_modules\tw-elements\dist\js\index.min.js:11:72325)
at d._activate (node_modules\tw-elements\dist\js\index.min.js:11:169133)
at HTMLInputElement.<anonymous> (node_modules\tw-elements\dist\js\index.min.js:11:169904)
at HTMLDocument.i (node_modules\tw-elements\dist\js\index.min.js:11:74898)
at _ZoneDelegate.invokeTask (zone.js:409:31)
at Zone.runTask (zone.js:178:47)
at ZoneTask.invokeTask [as invoke] (zone.js:490:34)

环境版本 #

@angular-devkit/architect       0.1502.4
@angular-devkit/build-angular   15.2.4
@angular-devkit/core            15.2.4
@angular-devkit/schematics      15.2.4
@angular/cli                    15.2.4
@schematics/angular             15.2.4
rxjs                            7.8.0
typescript                      4.9.5

Tailwind配置文件内容 #

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{html,js,ts,jsx,tsx}",
    "./node_modules/tw-elements/dist/js/**/*.js"
  ],
  theme: {
    extend: {},
  },
  plugins: [require("tw-elements/dist/plugin")]
  `your text` // 此处为无效代码，需删除
}

angular.json中添加的配置 #

"scripts": [
  "node_modules/tw-elements/dist/js/index.min.js"
]

解决方案 #

• 检查DOM结构合规性：tw-elements的输入组件依赖特定DOM结构，比如输入框必须包裹在对应组件容器（如form-floating）内，且必须搭配<label>元素。错误源于_applyNotch方法找不到目标元素，导致读取style属性时触发空值错误。
• 修复Tailwind配置：删除配置文件末尾的\your text``无效代码，避免配置解析异常。
• 改用Angular专属集成方式：全局引入tw-elements JS易与Angular的Zone.js冲突，建议按需初始化组件。在main.ts中导入并初始化所需组件，示例：

  import { initTE } from "tw-elements";
  initTE({ Input });
  

• 验证版本兼容性：确认tw-elements版本与Angular 15兼容，部分新版本可能对Angular版本有特定要求。

内容的提问来源于stack exchange，提问作者Ouss Ma L'aire Bien