Currently, within my Angular 15 project, I am utilizing a package called bootstrap-italia. This particular package is dependent on the standard Bootstrap package and includes additional custom components and types. However, it should be noted that this package does not come with built-in TypeScript declarations. In an attempt to address this limitation, I created some .d.ts files manually in a typings/bootstrap-italia folder located in the root folder of my project. These files included an index.d.ts file and a plugins folder containing individual .d.ts files for each component type I required. Despite my efforts, I encountered an error during compilation which stated:
Error: Module not found: Error : Can't resolve '../../../../../typings/bootstrap-italia' in 'C:\Users\ivanc\Dev\angular\CitizenPortal\Frontend\src\lib\components\various\notification'typings/bootstrap-italia/index.d.ts:
import Notification from './plugins/notification';
export { Notification };
typings/bootstrap-italia/plugins/base-component.d.ts:
export type GetInstanceFactory<T> = (element: string | Element) => T | null;
export type GetOrCreateInstanceFactory<
T,
C extends ComponentOptions = ComponentOptions
> = (element: string | Element, config?: C) => T;
export type ComponentOptions = Record<string, any>;
export default class BaseComponent {
static readonly VERSION: string;
static readonly DATA_KEY: string;
static readonly EVENT_KEY: string;
constructor(element: string | Element);
dispose(): void;
}
typings/bootstrap-italia/plugins/notification.d.ts:
import BaseComponent, { GetOrCreateInstanceFactory } from './base-component';
declare class Notification extends BaseComponent {
static getOrCreateInstance: GetOrCreateInstanceFactory<
Notification,
Partial<Notification.Options>
>;
static Default: Notification.Options;
constructor(
element: string | Element,
options?: Partial<Notification.Options>
);
toggle(relatedTarget?: HTMLElement): void;
show(timeout?: number, relatedTarget?: HTMLElement): void;
hide(): void;
}
declare namespace Notification {
enum Events {
show = 'show.bs.modal',
hidden = 'hidden.bs.modal',
}
interface Options {
timeout: number;
}
interface Event extends CustomEvent {
target: HTMLElement;
relatedTarget?: HTMLElement;
}
}
export default Notification;
To integrate these definitions into Angular components .ts file, I have added the following import statement:
import { Notification } from '../../../../../typings/bootstrap-italia';