Issues with Angular ng-bootstrap tabset component not functioning as expected

    {
  "name": "ModalWindow",
  "version": "1.0.0",
  "repository": {
    "type": "git",
    "url": ""
  },
  "scripts": {
    "build": "webpack --mode production",
    "start": "webpack-dev-server --mode development --open"
  },
  "license": "MIT",
  "dependencies": {
    "@angular/common": "^5.0.0",
    "@angular/compiler": "^5.0.0",
    "@angular/core": "^5.0.0",
    "@angular/forms": "^5.0.0",
    "@angular/platform-browser": "^5.0.0",
    "@angular/platform-browser-dynamic": "^5.0.0",
    "@angular/router": "^5.0.0",
    "core-js": "^2.5.5",
    "rxjs": "6.3.0",
    "rxjs-compat": "^6.3.3",
    "sass": "^1.15.0",
    "zone.js": "^0.8.26"
  },
  "devDependencies": {
    "@ng-bootstrap/ng-bootstrap": "^1.1.1",
    "@types/node": "^10.0.4",
    "angular2-template-loader": "^0.6.2",
    "css-loader": "^0.28.11",
    "html-webpack-plugin": "^3.2.0",
    "less": "^3.0.4",
    "less-loader": "^4.1.0",
    "node-sass": "^4.10.0",
    "raw-loader": "^0.5.1",
    "sass-loader": "^7.1.0",
    "style-loader": "^0.21.0",
    "ts-loader": "^4.3.0",
    "typescript": "^2.8.3",
    "webpack": "4.8.1",
    "webpack-cli": "^2.1.3",
    "webpack-dev-server": "3.1.4"
  }
}

This is my package.json, I am facing issues with the tabset in ng-bootstrap not working properly.

angulartypescriptangular5ng-bootstrap

Answer №1

One noticeable distinction between the latest release 4.0.0 and your current version ^1.1.1 specified in package.json is that in the newest release, you no longer need to import NgbModule as NgbModule.forRoot(). For instance -

This code functions in version 4.x.x

@NgModule({
  imports: [BrowserModule, FormsModule, ReactiveFormsModule, HttpClientModule, NgbModule],
  declarations: [....],
  bootstrap: [...]
})

However, importing NgbModule like above in version 1.1.1 will result in the error below:

ERROR Error: StaticInjectorError(AppModule)[NgbTabset -> NgbTabsetConfig]: StaticInjectorError(Platform: core)[NgbTabset -> NgbTabsetConfig]: NullInjectorError: No provider for NgbTabsetConfig!

This occurs because in the lower version, you must use .forRoot() in your root module to make it accessible in all other modules and components within your application.

Therefore, for version 1.1.1 which you are utilizing, you should apply the following code in your root module app.module.ts

This code works in version 1.1.1

@NgModule({
  imports: [BrowserModule, FormsModule, ReactiveFormsModule, HttpClientModule, NgbModule.forRoot()],
  declarations: [AppComponent, NgbdTabsetBasic],
  bootstrap: [AppComponent]
})

Here is a complete example with Angular 5 and ng-bootstrap version 1.1.1 that you are using -

... (remaining content unchanged)

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

The issue of process.server being undefined in Nuxt.js modules is causing compatibility problems

I've been troubleshooting an issue with a Nuxt.js module that should add a plugin only if process.server is true, but for some reason it's not working as expected. I attempted to debug the problem by logging process.server using a typescript modu ...

javascriptnode.jstypescriptnuxt.js

Understanding the concept of inconsistent return points in Typescript: What implications does it carry?

I am currently working on converting a NodeJs JavaScript code to TypeScript. The code snippet below shows how I save uploaded files using JavaScript and now I'm encountering an error when trying to do the same in TypeScript. The error message says "Fu ...

node.jstypescript

The data remains undefined even after being initialized in the constructor

My goal is to extract queryParams from a URL and leverage that information to resolve data in the following manner: data = { searchValue: null || undefined }; constructor(private http: HttpClient, private route: ActivatedRoute) { route.queryParams.su ...

angulartypescriptrxjs

Getting a specific array from the API with fetch in Angular: A step-by-step guide

I am trying to retrieve images from an API, but I'm having trouble accessing all the arrays to get to the data. Currently, I am only able to fetch the posts arrays in a single call and not beyond that. https://i.stack.imgur.com/aFWlD.jpg My method fo ...

angulartypescriptapi

What would be a colloquial method to retrieve the ultimate result from the iterator function?

I've got a rather complex function that describes an iterative process. It goes something like this (I have lots of code not relevant to the question): function* functionName( config: Config, poolSize: number ): Generator<[State, Step], boo ...

javascripttypescriptiteratorgeneratoryield

How to securely authenticate with Spring using end user credentials in an Angular application

I currently have a set of RESTful web services that are supported by Spring Boot. These services are secured with basic HTTP authentication. I am working on developing an Angular2 front end, which will be hosted on a separate server. My goal is for the fr ...

springsecurityangularhttp-authentication

Ways to initiate a fresh API request while utilizing httpClient and shareReplay

I have implemented a configuration to share the replay of my httpClient request among multiple components. Here is the setup: apicaller.service.ts import { Injectable } from '@angular/core'; import { HttpClient } from '@angular/common/http& ...

angulartypescriptrxjs

Is it possible for TypeScript to automatically determine the specific type that was used in a union type parameter?

I need some help with a utility function I'm working on that can remove a specified number of elements from either a string or an array. My goal is to have the compiler determine whether the return value should be a string or an array based on what is ...

typescript

What is the most efficient way to retrieve 10,000 pieces of data in a single client-side request without experiencing any lag

Whenever I retrieve more than 10 thousand rows of raw data from the Database in a single GET request, the response takes a significant amount of time to reach the client side. Is there a method to send this data in smaller chunks to the client side? When ...

reactjstypescriptexpressknex.jsmobx

Enhancing SQLite syntax in Ionic 2: A fresh approach!

Having trouble with updating my SQLite table using this script, I've edited the query but it still doesn't work. try{ this.sqlite.create({ name: 'data.db', location: 'default' }) .then((db: SQLiteObject) => ...

angularsqliteionic2

Steps to automatically close a Bootstrap modal after redirection using RouterLink in Angular 6

Currently, I am working on my first Angular application. The issue I am facing involves a Bootstrap modal with a button that redirects to another section within the app. <button type="button" class="btn btn-info btn-lg" routerLink="/contactar">Cont ...

jqueryangularbootstrap-modal

The error message "TypeError: (0 , N.createContext) is not a function" indicates that

I'm currently in the process of developing a cutting-edge application using Next.js 14, TypeScript, and Telegram Open Network. However, I've hit a roadblock while attempting to incorporate the TONConnectUIProvider at the root of my app. Upon run ...

reactjstypescriptnext.jsnext.js14ton

Using Array.push within a promise chain can produce unexpected results

I have developed a method that is supposed to retrieve a list of devices connected to the network that the client has access to. export const connectedDevicesCore = (vpnId: string, vpnAuthToken: string) => Service.listVPNConnectionsCore ...

javascriptnode.jsarraystypescriptpromise

Guide on submitting a form through the Angular 2 HTTP post method with JavaScript

Currently working on grasping the concepts of Angular2, but facing challenges when attempting to utilize http.post() for submitting a form to my Web API. ...

javascriptangularangular2-http

Definition for a function within a specific namespace that returns the specified object

Seeking to define the type of a function within a namespace (L.DomEvent.on(e)) that returns this, I encountered an issue with my JavaScript source code: L.DomEvent = { // @function on(el: HTMLElement, eventMap: Object, context?: Object): this on: ...

typescript

Exploring the Concept of Angular4 Component Nesting and Input Issues

I've taken on the challenge of completing an exercise from the book "Angular From Theory To Practice - Asim Hussain". The exercise involves refactoring an app using Angular CLI instead of having all components in the same file. You can find a sample f ...

angular

Ways to conceal an element in Angular based on the truth of one of two conditions

Is there a way to hide an element in Angular if a specific condition is true? I attempted using *ngIf="productID == category.Lane || productID == category.Val", but it did not work as expected. <label>ProductID</label> <ng-select ...

javascripthtmlangulartypescript

Issue with migrating TypeOrm due to raw SQL statement

Is it possible to use a regular INSERT INTO statement with TypeOrm? I've tried various ways of formatting the string and quotes, but I'm running out of patience. await queryRunner.query('INSERT INTO "table"(column1,column2) VALUES ...

sqltypescriptpostgresqltypeorm

Combining 2 lists in Angular Firebase: A Simple Guide

I have been searching for a solution for the past 2 hours, but unfortunately haven't found one yet. Although I have experience working with both SQL and NoSQL databases, this particular issue is new to me. My problem is quite straightforward: I have t ...

angulartypescriptfirebasefirebase-realtime-databaseangularfire

Prevent repetition of errors during compiling in the ahead-of-time (AOT

I need assistance with optimizing my codebase in Angular 2 using angular-cli. When I run the command "ng build --prod", I encounter an error that is preventing the output of the dist folder. This error claims that there is a duplicate identifier in one of ...

angularangular-cliangular2-template