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

Strategies for managing the "ref" property of Material-UI component props within our custom components

I have a unique custom component setup as shown below: // ... import { PaperProps, styled } from '@mui/material'; type ComponentProps = PaperProps & { a: string, b: string }; export const MyPaper = styled(Paper)(/* ... */); const Compo ...

javascriptreactjstypescripttypesmaterial-ui

Angular 2's one-of-a-kind singleton solution

I'm feeling a bit lost when it comes to singleton services in Angular 2. I need a translation service that will be accessible throughout the entire application, and I want to ensure that only one instance of the service exists. My issue arises when tr ...

angulartypescript

Eliminate unnecessary HTML elements in Angular

I am currently using ngSwitchCase for 3 different cases, and I have noticed that I am duplicating the same code inside each case. Is there a way to eliminate this redundancy? The redundant code is located within the "app-device" component <div *ngS ...

htmlangularredundancy

The element class type 'xxx' is lacking several properties compared to the 'ElementClass' type, including context, setState, forceUpdate, props, and others. This issue is flagged with error code TS2605

Encountering an error while attempting to execute my react app: D:/React/my-components/src/App.tsx TypeScript error in D:/React/my-components/src/App.tsx(23,4): JSX element type 'Confirm' is not a constructor function for JSX elements. ...

reactjstypescript

Error message indicating that the function 'slice' is not defined for the data variable

I've already searched for solutions to a similar issue, but none of them worked for me. I'm dealing with an object that fetches a list of cities including their names, populations, and states. Here is my HTTP service request: cidadesUrl = 'h ...

htmlangulartypescript

Mastering the art of typing a member of an abstract generic class in Typescript with consideration for potential additional implementations

It's quite challenging to put into words, but essentially I aim to create a base abstract class outlining an abstract interface that must vary based on whether a derived class implements a specific interface or not. Here is a TypeScript playground de ...

typescriptinheritanceconditional-types

explore and view all images within a directory

Hello, I am new to NextJS and encountering some issues. I have a folder in my public directory containing 30 images that I want to import all at once in the simplest way possible, without having to import each image individually by name. Here is the curren ...

typescriptnext.jsnextjs-image

Obtain the query response time/duration using react-query

Currently utilizing the useQuery function from react-query. I am interested in determining the duration between when the query was initiated and when it successfully completed. I have been unable to identify this information using the return type or para ...

javascriptreactjstypescripttimereact-query

The express application's GET route is causing a "Cannot GET" error to be thrown

I am managing different types of pages: the main root page (/) today's chapter page (/929 OR /929/) which eventually redirects to /929/<CHAPTER> where <CHAPTER> is a natural number between 1 to 929 individual chapter pages (/929/<CHAP ...

node.jsregextypescriptexpress

Exploring code coverage for the sortmethod in Angular applications

Within my project, I have a file named sorting.helper.ts that contains all of my sorting methods: In another file, I then called upon these methods. How can I ensure that both files are included in the code coverage analysis for my .spec file? import { C ...

angularunit-testingtestingcode-coverage

Tips for displaying only the components associated with the user's role in Angular

Greetings everyone! I have a dashboard that features a menu showcasing all the components. I am looking to implement a functionality where, if logged in with the admin role, all components should be displayed. On the other hand, if logged in with the respo ...

angularangular2-routingrolesangular-router-guardsangular-guards

Using TypeScript with React and Redux to create actions that return promises

Within my React application, I prefer to abstract the Redux implementation from the View logic by encapsulating it in its own package, which I refer to as the SDK package. From this SDK package, I export a set of React Hooks so that any client can easily u ...

javascriptreactjstypescriptredux

bundle.js encountered a TypeError when attempting to read a property that was undefined, specifically while trying to access the PriceIndexationDataControlStandard

In the midst of developing a React component using the Microsoft PCF Framework, I encountered a perplexing error seemingly out of the blue. While making changes in TypeScript without even executing any build commands, the rendering of my component suddenly ...

reactjstypescriptpcf

Develop a child interface within Typescript

I am unsure if the term sub interface is correct, but my goal is to develop an interface that inherits all properties from the super interface except for some optional ones. Despite referring to the TypeScript documentation for interfaces, I was unable to ...

typescript

Is it possible to assign a type to an anonymous object in TypeScript?

Check out the code snippet below: hello({ name: "Michael" } as x) // <-- Except missing id here, but it doesn't type x = { id: string name: string } function hello(x: any) { console.log(x) } TS Playground No error is thrown de ...

typescript

Tips for dynamically calling a property member of a function type in Typescript

How can I determine if a member is a function in TypeScript? Is dynamic typing discouraged in TypeScript? function checkIfFunction<T, K extends keyof T>(obj: T, propName: K) { if (typeof obj[propName] === "function") { obj[p ...

typescripttypescript-typingstypescript-generics

What is the reason behind this build error I am encountering while using react-three-xr?

I'm having trouble understanding this error message. What steps can I take to resolve it? Although I have included three-xr in my react app, I am encountering the following error: Failed to compile. ../../node_modules/@react-three/xr/src/DefaultXRCon ...

reactjstypescriptthree.jsreact-three-fiberreact-three-drei

Converting an HTMLElement to a Node in Typescript

Is there a method to transform an HTMLElement into a Node element? As indicated in this response (), an Element is one specific type of node... However, I am unable to locate a process for conversion. I specifically require a Node element in order to inp ...

javascripttypescripthtmlelements

What's the best way to process a string array using iteration in Typescript?

I have an array of colors: colors = ['red','blue','purple']; I would like to display the following message: colors in ('red','blue','purple') When I tried to achieve this using forEach metho ...

javascriptarraysstringtypescriptloops

You have encountered an issue with the runtime-only build of Vue, which does not include the template compiler

Lately, I have been utilizing Vue in a project and encountered an issue where upon compiling, my browser page displays as white with an error message stating "You are using the runtime-only build of Vue where the template compiler is not available. Either ...

javascripttypescriptvue.jsvuejs2