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!

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

Instructions on transferring information from the app.component to its child components

I am currently working with Angular 6 and I have a specific requirement. I need to send data retrieved from an external API in my app.component to other child components. Instead of repeatedly calling the common API/service in every component, I want to ma ...

Encountering an uncaughtException: Error stating that the module '....nextserverapphomelibworker.js' cannot be located while attempting to utilize pino.transport in Next.js

I recently set up a Next.js project with typescript using create-next-app. Opting for Pino as the logging library, recommended by Next.js, seemed like the logical choice. Initially, when I utilized Pino without incorporating its transport functionality, e ...

The issue with Angular 2's Ng style is that it does not properly remove the old style when there is a change

I am currently experiencing an issue within my project. When assigning an object to ngStyle in a div, the problem arises where ngStyle does not clear the style properties from the previous object when there is a change in the object. It should ideally rem ...

What is the best way to change an array element into a string in TypeScript?

Within my Angular 2 component, I am utilizing an array named fieldlist which is populated by data retrieved from an http.get request. The array is declared as follows: fieldlist: string[] = []; I populate this array by iterating through the JSON response ...

Enhancing the 'UserDetails' model in ASP.NET Angular project (dotnet core 3.0) to accommodate additional user information

Currently working on an ASP.NET Web application with Angular as the front end, using the new template in VisualStudio 2019 for ASP.NET angular with Individual Authentication. This project runs on dotnet core 3.0 Preview 4. https://i.stack.imgur.com/RUKdg. ...

Is ngForIn a valid directive in Angular 4?

While attempting to loop over the properties of an object using *ngFor with in, I encountered a challenge. Here is a sample code snippet: @Controller({ selector: 'sample-controller', template: ` <ul> <li *ngFor="let i in o ...

Exploring ViewChild Usage in Angular 8's Inheritance

I've encountered an issue with inheritance and ViewChild in a class where I always seem to get undefined. Let me simplify the problem for better understanding. First, let's look at the parent class: @Component({ selector: 'parent', ...

How can I make my webpage fill the entire width of an iPhone screen when in landscape mode using Angular or React?

While testing my website on my iPhone, I noticed a significant gap appearing on either side of the app in landscape view in Safari. Is there a solution to fix this issue? The problem occurs in both Angular and React applications, examples of which are disp ...

Issue with angular oidc-client library's automaticSilentRenew functionality

I'm currently implementing oidc authentication using "oidc-client" version 1.10.1. Below is the configuration I have set up for the userManager: const settings = { authority: (window as any).__env.auth.authority, //OAuth 2.0 authorization end ...

I am encountering difficulties installing Angular CLI due to error messages. Can you please provide me with a solution

Error encountered while running 'npm install -g @angular/cli': npm ERR! code ENOENT npm ERR! syscall mkdir npm ERR! path C:\Windows\system32'C:\Users\User\AppData\Roaming\npm' npm ERR! errno -4058 npm ...

Transferring information to an Ionic 5 custom element label

In my ionic 5 app, I have a side menu and tabs. Each page can have different contents for the side menu and the tabs. Instead of duplicating the ion-menu in each page, I created a header component (and one for the tabs) as follows: HEADER COMPONENT: <i ...

Failed to execute start script 'ng serve' in npm start

Let me make it clear: I'm brand new to AngularJS and pretty much any Web Technology. I consider myself a novice in the realm of Web Development. I attempted to install AngularJS, and truth be told, after numerous "Mysterious Button Clicks", I might ...

Tips for importing a module such as 'MyPersonalLibrary/data'

Currently, I am developing a project with two packages using Typescript and React-Native: The first package, PackageA (which is considered the leaf package), includes a REST client and mocks: MyOwnLibrary - src - tests - mocks - restClientMoc ...

Testing a function within a class using closure in Javascript with Jest

Currently, I am attempting to simulate a single function within a class that is declared inside a closure. const CacheHandler = (function() { class _CacheManager { constructor() { return this; } public async readAsPromise(topic, filte ...

Angular Material's floating label feature disrupts the form field's outline styling

Whenever I try to change the appearance of the form field to outline, the floating label ends up breaking the outline. Here is a code snippet for reference: <mat-form-field appearance="outline"> <mat-label>Password&l ...

Having trouble compiling a basic application with npm link to access an external library

After attempting to establish a basic component library for consumption by an application and connecting them using npm link, I encountered errors during compilation and am unsure of what steps I may have missed. The structure is minimal, intended solely t ...

Is it possible to use Angular CLI 6 to run ng serve with Angular 4?

I have a project using Angular 4. I recently updated my Angular CLI version: Angular CLI: 6.1.5 Node: 10.9.0 OS: win32 x64 Now I'm wondering how to run ng serve for my Angular 4 project? However, I noticed that the file angular.json is missing in ...

Can someone guide me on how to customize the CSS of a fab element in Onsen UI?

I've been struggling to change the background color or border of the onsen fab element. I'm working with angular 2 and onsen v2. Even after trying the !important rule, my CSS doesn't seem to take effect unless I disable the fabs default styl ...

The function you are trying to call is not valid... the specified type does not have any call signatures [ts 2349

Having some trouble using functions from Observable Plot example with a marimekko chart in my TypeScript project. I encountered an error on this particular line: setXz(I.map((i) => sum.get(X[i]))) The code snippet causing the issue is as follows: fu ...

What is the method for determining the type of search results returned by Algolia?

My connection between firestore and algoliasearch is working well. I am implementing it with the help of typescript in nextjs. I am attempting to fetch the results using the following code snippet products = index.search(name).then(({hits}) => { ret ...