Incompatible with Angular v22 / Vite build

[dinobot71]

Hi, our project has been using this plugin for several years with prior versions of angular and it worked great. But now, we upgraded to Angular 22 and moved from webpack to Vite...and the devbridge plugin refuses to be recognized or register properly so that IntelliJ can see the typing. Compiling also fails. :(

✘ [ERROR] TS2339: Property 'devbridgeAutocomplete' does not exist on type 'JQuery<HTMLElement>'. [plugin angular-compiler]

   ...<some file>.ts:326:8:
      326 │     tai.devbridgeAutocomplete ({
          ╵         ~~~~~~~~~~~~~~~~~~~~~

note that the 'tai' variable is just JQuery:

let tai: JQuery = $(`#...`);

I've tried everything I can think of to try and ensure types are installed, TS config files have devbridge added in the "typing" section, and ensured I'm importing properly in the file where I'm using it...nothing works.

I'm using the latest plugin (2.0.6) and it should be compatible with Angular...its got all the TS gear. But...just completely fails to be recognized.

JQuery is 3.71
JQueryUI is 1.13.2

I'm using the alternative plugin name since JQueryUI registers its own autocomplete plugin.

Can you provide a clear example of how this plugin intended to be used in an Angular/Vite environment?

[dinobot71]

Tried adding "./node_modules/devbridge-autocomplete/dist/jquery.autocomplete.js", to angular.json 'scripts' directive for the build, and also adding devbridge-autocomplete to the allowedCommonJsDependencies build directive...didn't seem to make any difference.

[dinobot71]

Tried bundling the scripts jquery.autocomplete.esm.js instead of jquery.autocomplete.js doesn't seem to make any difference.

[dinobot71]

note that in my scripts list...I made sure dev bridge and other plugins are AFTER the jquery/jqueryui lines. So if its an ordering thing, where jquery has to be included first...that should be ok.

[dinobot71]

In case it helps, my compiler options (tsconfig.json):

  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "esModuleInterop": true,
    "experimentalDecorators": true,
    "module": "esnext",
    "moduleResolution": "bundler",
    "importHelpers": true,
    "target": "ES2022",
    "typeRoots": [
      "node_modules/@types"
    ],
    "types": [
      "jquery",
      "jquery.fancytree",
      "select2",
      "bootstrap",
      "jquery.contextmenu",
      "plotly.js",
      "devbridge-autocomplete"
    ],
    "paths": {
      "./node_modules/jquery-ui-dist/jquery-ui.min.js": [
        "../node_modules/@types/jqueryui"
      ],
      "./node_modules/plotly.js/dist/plotly.min.js": [
        "../node_modules/@types/plotly.js"
      ],
      "crypto": [
        "./node_modules/crypto-browserify"
      ],
      "stream": [
        "./node_modules/stream-browserify"
      ],
      "vm": [
        "./node_modules/vm-browserify"
      ],
      "@env/*": [
        "src/environments/*"
      ],
      "@/*": [
        "src/app/*"
      ],
      "@root/*": [
        "src/*"
      ]
    },
    "useDefineForClassFields": false
  },
  "angularCompilerOptions": {
    "fullTemplateTypeCheck": true,
    "strictInjectionParameters": true
  }
}

[dinobot71]

Is there any way to debug or trace what the plugin is or isn't doing when the build happens? I'm just not sure what to even investigate here.

[dinobot71]

I've extended my typings.d.ts with:

    value: string;
    data: any;
}

type HintCallback = (this: HTMLElement, hint: string) => void;
type HideCallback = (this: HTMLElement, container: JQuery) => void;
type BeforeRenderCallback = (this: HTMLElement, container: JQuery, suggestions: AutocompleteSuggestion[]) => void;
type InvalidateSelectionCallback = (this: HTMLElement) => void;

interface AutocompleteOptions {
    serviceUrl?: string | ((query: string) => string);
    lookup?: AutocompleteSuggestion[] | string[] | ((query: string, done: (suggestions: { suggestions: AutocompleteSuggestion[] }) => void) => void);
    onSelect?: (suggestion: AutocompleteSuggestion) => void;
    minChars?: number;
    maxHeight?: number;
    deferRequestBy?: number;
    width?: number | string;
    params?: object;
    formatResult?: (suggestion: AutocompleteSuggestion, currentValue: string) => string;
    noCache?: boolean;
    containerClass?: string;
    tabDisabled?: boolean;
    showNoSuggestionNotice?: boolean;
    noSuggestionNotice?: string;
    orientation?: 'top' | 'bottom' | 'auto';
    triggerSelectOnValidInput?: boolean;
    preventBadQueries?: boolean;
    onHint?: HintCallback | null;
    onHide?: HideCallback;
    beforeRender?: BeforeRenderCallback;
    onInvalidateSelection?: InvalidateSelectionCallback;
    delimiter?: string | RegExp | null;
    groupBy?: string;
    ignoreParams?: boolean;
    lookupLimit?: number | string;
}

interface AutocompleteInstance {
    clear(): void;
    clearCache(): void;
    disable(): void;
    enable(): void;
    hide(): void;
    dispose(): void;
    setOptions(options: AutocompleteOptions): void;
}

interface JQuery {
    devbridgeAutocomplete(options?: AutocompleteOptions): JQuery;
    devbridgeAutocomplete(methodName: 'disable' | 'enable' | 'hide' | 'clear' | 'clearCache' | 'dispose'): void;
    devbridgeAutocomplete(methodName: 'setOptions', options: AutocompleteOptions): void;
    devbridgeAutocomplete(): AutocompleteInstance;
}

That seems to work as far as compiling goes. InteliJ is happy, and "ng build" gets past the file that uses devBridge. Don't know if it actually works yet, but progress maybe.