The ng-bootstrap typeahead is encountering an error: TypeError - Object(...) is not functioning correctly

Hey there! I'm trying to integrate the Angular Bootstrap typeahead component in my Angular 5 application by following the linkToTypeahead. However, I'm encountering some errors along the way. Here's what I'm seeing:

ERROR TypeError: Object(...) is not a function
at new NgbTypeahead (typeahead.js:52)
at createClass (core.js:12449)
at createDirectiveInstance (core.js:12284)
at createViewNodes (core.js:13742)
at callViewAction (core.js:14176)
at execComponentViewsAction (core.js:14085)
at createViewNodes (core.js:13770)
at callViewAction (core.js:14176)
at execComponentViewsAction (core.js:14085)
at createViewNodes (core.js:13770)

and also:

ERROR TypeError: Cannot read property 'instance' of undefined
at nodeValue (core.js:11753)
at Object.eval [as handleEvent] (NgbdTypeaheadBasic.html:9)
at handleEvent (core.js:13547)
at callWithDebugContext (core.js:15056)
at Object.debugHandleEvent [as handleEvent] (core.js:14643)
at dispatchEvent (core.js:9962)
at eval (core.js:10587)
at HTMLDocument.eval (platform-browser.js:2628)
at ZoneDelegate.invokeTask (zone.js:421)
at Object.onInvokeTask (core.js:4740)

I've simply copied the Simple Typeahead code from the official website here.

This is my package.json file:

{
  "name": "test-type-ahead",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build --prod",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^5.2.0",
    "@angular/common": "^5.2.0",
    "@angular/compiler": "^5.2.0",
    "@angular/core": "^5.2.0",
    "@angular/forms": "^5.2.0",
    "@angular/http": "^5.2.0",
    "@angular/platform-browser": "^5.2.0",
    "@angular/platform-browser-dynamic": "^5.2.0",
    "@angular/router": "^5.2.0",
    "@ng-bootstrap/ng-bootstrap": "^2.0.0-alpha.0",
    "bootstrap": "^4.1.0",
    "core-js": "^2.4.1",
    "rxjs": "^5.5.6",
    "zone.js": "^0.8.19"
  },
  "devDependencies": {
    "@angular/cli": "~1.7.3",
    "@angular/compiler-cli": "^5.2.0",
    "@angular/language-service": "^5.2.0",
    "@types/jasmine": "~2.8.3",
    "@types/jasminewd2": "~2.0.2",
    "@types/node": "~6.0.60",
    "codelyzer": "^4.0.1",
    "jasmine-core": "~2.8.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~2.0.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "^1.2.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.1.2",
    "ts-node": "~4.1.0",
    "tslint": "~5.9.1",
    "typescript": "~2.5.3"
  }
}
Here are a couple of things I have already tried:

  1. Reinstalling node_modules with npm, but that didn't fix the issue.
  2. Starting a new project using the Angular CLI and testing out the same code without success.

If anyone has any insights or solutions, I would greatly appreciate the help!

angulartypescripttypeaheadng-bootstraptypeerror

Answer №1

After encountering an issue, I managed to resolve it by installing a stable version of ng-bootstrap:

In my package.json file:

`dependencies
 ....
 "@ng-bootstrap/ng-bootstrap": "^1.1.1",
 ....
 dependencies`

Big thanks to JB Nizet and Niladri for the prompt assistance!

UPDATE: Adding on to @Niladri's advice in the comments, ensure you utilize forRoot() for the modules you intend on using. You can refer to the official documentation of version 1.1, tailored for Angular 5. It's worth noting that while this was stated in the older documentation, newer versions may have undergone changes. Keep this in mind as you proceed with your project!

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Issue with toggling in react js on mobile devices

Currently, I am working on making my design responsive. My approach involves displaying a basket when the div style is set to "block", and hiding it when the user browses on a mobile device by setting the display to "none". The user can then click on a but ...

javascriptcssreactjstypescripttoggle

What is the proper way to type the SubmitEvent so that the event.target.children property can be accessed

Below is the form I currently have: <form id="search" method="post"> <input type="text" name="query" id="search-field"/> </form> I am looking to add a submit event listener in TypeScript: ...

typescript

Angular 2 and TypeScript: Mastering Checkbox Data Binding

Below is the HTML view in which user roles are checked. I want to bind a table of modified user roles using the actualizeRoles() method. How can I achieve this? <md-accordion class="example-headers-align"> <md-expansion-panel hideToggle=" ...

angulartypescript

Difficulty in converting class-based JS useState array to TypeScript Hook

Recently, I've delved into the world of React / TypeScript and have taken on a personal project to enhance my skills. As part of this project, I am in the process of transitioning some class-based code into hooks. Here is the (JS) class-based code th ...

reactjstypescriptionic-frameworkreact-hooks

Tips for creating a personalized asynchronous Express handler that seamlessly receives specific typed parameters

In my quest to create a unique Express endpoint wrapper, I aim to wrap async functions and handle errors effectively. The current implementation is basic but functional: import type {Request, RequestHandler, Response} from 'express'; type Handle ...

node.jstypescriptexpresstypescript-genericstype-parameter

Angular allows you to dynamically alter the background color of the currently active mat-tab using code

Greetings, I have an Angular page that consists of tabs created with Mat Tab. I successfully changed the background color of the active tab using SCSS and this is the code I used: ::ng-deep .mat-tab-label.mat-tab-label-active { background-color: var(--user ...

angularangular-materialscss-mixinsmat-tab

Loading SVG templates dynamically in Angular can be done by utilizing a string

Is it possible to convert SVG content loaded from a server into a component template in Angular, with the ability to bind properties to it? For example, <tspan [attr.color]="textColor" ...>{{myText}}</tspan>. I have tried loading and ...

javascriptangulartemplatessvg

How to automatically set focus in a text box when a Kendo Window is opened

I am working on a project where I need to set the focus on the first field of a kendo-window when it opens after clicking on a button. I used ViewChild to declare the field, but it is showing as undefined when the window is opened because it hasn't be ...

angularkendo-uikendo-ui-angular2

Can Angular dynamically obtain the current system time without relying on a backend service?

Is there a way to dynamically display the current system time on a webpage using Angular without having to manually refresh the page? I understand that utilizing Date() can provide the current time, but it may not necessarily be synced with the system tim ...

angularlinux

Exploring the concept of individuality within front-end development

Would it be possible to manage identity directly on the front end using Angular's auth guard instead of setting up identity management on the server-side? The auth guard could handle all aspects of identity, even for smaller projects. For instance, in ...

angularasp.net-coresecurityasp.net-identitybackend

The Angular component fails to display the rendered HTML and instead displays the route for the HTML

I just finished creating a new Angular component, but when I try to view the rendered HTML, all I see is the route to the HTML file instead of the actual content. Here is my folder structure: https://i.sstatic.net/7KI93.png This is the component I creat ...

angularcomponents

The 'Key' identifier is not valid for indexing the 'Object' data type

Currently attempting to incorporate functional pluck with a specific sound type, but encountering an issue: function extract<Object extends {}, Key = keyof Object>(key: Key): (o: Object) => Object[Key] { return object => object[key]; } Erro ...

typescripttypestypescript2.0

Using Angular to fetch API response and convert it into a promise

I've been following the Angular tutorial available at https://angular.io/tutorial/toh-pt6. The tutorial demonstrates how to retrieve a Json response from an API call and then match it to a promise. One specific example from the tutorial is as follows ...

javascriptangularaws-api-gateway

Transferring information between components is made easy with ng-content

In my application, I have a set of components that are used to create cards: <app-card-container> <app-card-title>Card title</app-card-title> <app-card-body> // some content </app-card-body> </app-card-con ...

angular

Error encountered in app.module.ts file of Angular 2 application

My friends and I are working on a big school project, creating a cool web app. Suddenly, I encountered some errors in my app.module.ts file that I haven't seen before. It's strange because they are showing up out of nowhere! The error: Error:( ...

angulartypescript

What is the best way to implement custom sorting for API response data in a mat-table?

I have been experimenting with implementing custom sorting in a mat-table using API response data. Unfortunately, I have not been able to achieve the desired result. Take a look at my Stackblitz Demo https://i.sstatic.net/UzK3p.png I attempted to implem ...

htmlangulartypescript

How to empty an array once all its elements have been displayed

My query pertains specifically to Angular/Typescript. I have an array containing elements that I am displaying on an HTML page, but the code is not finalized yet. Here is an excerpt: Typescript import { Component, Input, NgZone, OnInit } from '@angul ...

javascriptangulartypescript

"Encountered an error: Unable to interpret URL from (URL).vercel.app/api/getMessages" while deploying Next.js 13 using TypeScript on Vercel

Hello to all members of the StackOverflow Community: I am encountering an error message stating "TypeError: Failed to parse URL from next-chat-lenx51hr5-gregory-buffard.vercel.app/api/getMessages" while attempting to build my Next.js 13 application using T ...

node.jstypescriptnext.jsvercelnext.js13

Looking for elements that match in an array

Currently working on a basic program that requires checking if the input string exists in the array. To simplify it, for example, if someone types 'Ai', I want the program to display all elements in the array containing the letters 'Ai&apos ...

arraysangularstringtypescript

Tips for transferring a boolean value to a generic parameter in Java?

Looking to pass a boolean value to the Generic type in order to be utilized within a condition. This is the generic type interface OptionTypeBase { [key: string]: any; } type OptionsType<OptionType extends OptionTypeBase> = ReadonlyArray<Opt ...

javascriptreactjstypescriptgenericstypes