如何解决Angular 15中自定义bootstrap-italia的.d.ts导入报错？

1. 配置TypeScript识别自定义类型目录 #

打开项目根目录的tsconfig.json，在compilerOptions中添加typeRoots配置，让TypeScript自动扫描自定义类型文件所在的typings目录：

{
  "compilerOptions": {
    // 保留原有其他配置
    "typeRoots": [
      "./node_modules/@types",
      "./typings" // 新增此行，指定自定义类型根目录
    ]
  }
}

2. 简化导入路径（使用模块名导入） #

将组件中的相对路径导入改为直接以模块名导入，避免路径层级错误：

import { Notification } from 'bootstrap-italia';

你的typings/bootstrap-italia/index.d.ts已经正确导出Notification，此修改可直接适配现有类型声明结构。

3. 确保bootstrap-italia脚本已加载 #

自定义类型仅提供类型校验，实际运行需要加载bootstrap-italia的脚本文件，可通过两种方式实现：

• 方式一：在angular.json中配置
  在项目angular.json的architect.build.options.scripts中添加脚本路径：

  {
    "projects": {
      "你的项目名称": {
        "architect": {
          "build": {
            "options": {
              "scripts": [
                "./node_modules/bootstrap-italia/dist/js/bootstrap-italia.min.js"
              ]
            }
          }
        }
      }
    }
  }
  

• 方式二：在index.html中直接引入
  在src/index.html的<head>或<body>末尾添加脚本引入：

  <script src="node_modules/bootstrap-italia/dist/js/bootstrap-italia.min.js"></script>
  

4. 重启开发服务验证 #

修改配置后，重启Angular开发服务器（执行ng serve），让配置生效。此时再导入Notification即可正常识别。

若问题仍存在，可排查以下点：

• 确认typings/bootstrap-italia的目录结构无错误，index.d.ts与plugins子目录路径正确；
• 检查tsconfig.json的typeRoots路径拼写是否与实际目录一致；
• 验证bootstrap-italia版本与自定义类型声明的API是否匹配。

内容的提问来源于stack exchange，提问作者icolumbro