Encountered compilation errors while trying to compile the entry-point @ng-bootstrap/ng-bootstrap with `es2015` as esm2015. Compilation was unsuccessful

Seeking assistance in resolving the errors provided below.

I am currently in the process of upgrading my angular project from version 8 to 12. Initially, I attempted to upgrade progressively from version to version, starting with "7 to 8, 8 to 9". However, upon reaching version 9, I encountered numerous errors and incompatible dependencies. Despite spending a significant amount of time troubleshooting, I was unable to resolve these issues. Eventually, I decided to leapfrog to the latest version, but now I am faced with the following errors.

ERROR in Failed to compile entry-point @ng-bootstrap/ng-bootstrap (`es2015` as esm2015) due to compilation errors:
node_modules/@ng-bootstrap/ng-bootstrap/fesm2015/ng-bootstrap.js:7538:37 - error NG1006: Cannot combine @Input decorators with query decorators
7538     starTemplate: [{ type: Input }, { type: ContentChild, args: [TemplateRef,] }],
node_modules/@ng-bootstrap/ng-bootstrap/fesm2015/ng-bootstrap.js:7559:47 - error NG6001: The class 'NgbRating' is listed in the declarations of the NgModule 'NgbRatingModule', but is not a directive, a component, or 
7559     { type: NgModule, args: [{ declarations: [NgbRating], exports: [NgbRating], imports: [CommonModule] },] }
node_modules/@ng-bootstrap/ng-bootstrap/fesm2015/ng-bootstrap.js:7332:7
7332 class NgbRating {
'NgbRating' is declared here.
node_modules/@ng-bootstrap/ng-bootstrap/fesm2015/ng-bootstrap.js:7332:7 - error NG6003: Appears in the NgModule.exports of NgbRatingModule, but could not be resolved to an NgModule, Component, Directive, or Pipe class.
Is it missing an Angular annotation?
7332 class NgbRating {
node_modules/@ng-bootstrap/ng-bootstrap/fesm2015/ng-bootstrap.js:7548:7 - error NG6002: Appears in the NgModule.imports of NgbModule, but itself has errors
7548 class NgbRatingModule {
node_modules/@ng-bootstrap/ng-bootstrap/fesm2015/ng-bootstrap.js:7548:7 - error NG6003: Appears in the NgModule.exports of NgbModule, but itself has errors
7548 class NgbRatingModule {

This is the information displayed when entering "ng --version".

Angular CLI: 12.2.1  
Node: 14.17.0  
Package Manager: npm 7.20.5  
OS: win32 x64  
Angular: 13.0.0-next.1  
... animations, common, compiler, compiler-cli, core, forms  
... language-service, platform-browser, platform-browser-dynamic  
... router  

Package                         Version  
---------------------------------------------------------  
@angular-devkit/architect       0.901.15  
@angular-devkit/build-angular   0.901.15  
@angular-devkit/core            9.1.15  
@angular-devkit/schematics      12.2.1  
@angular/cdk                    12.2.1  
@angular/cli                    12.2.1  
@schematics/angular             12.2.1  
rxjs                            6.6.7  
typescript                      4.3.5  

Answer №1

To ensure compatibility, make sure to update your Angular project's ng-bootstrap version by running npm i @ng-bootstrap/ng-bootstrap

After updating, run this command:

npm i @ng-bootstrap/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="29474e044b46465d5a5d5b485969181907190719">[email protected]</a>

The following are the supported versions of ng-bootstrap for Angular:

ng-bootstrap    Angular Bootstrap CSS
1.x.x            5.0.2  4.0.0
2.x.x            6.0.0  4.0.0
3.x.x            6.1.0  4.0.0
4.x.x            7.0.0  4.0.0
5.x.x            8.0.0  4.3.1
6.x.x            9.0.0  4.4.1
7.x.x,8.x.x     10.0.0  4.5.0
9.0.0           11.0.0  4.5.0
10.0.0          12.0.0  4.5.0
11.0.0          13.0.0  4.6.0
12.0.0-beta.x   13.0.0  5.0.0 

Answer №2

The latest update did not go smoothly as expected. It's crucial to proceed with caution when updating and resolving any dependency issues that may arise. Moving to version 9 could potentially lead to various complications, so it's recommended to address the dependencies beforehand before considering upgrading to higher Angular versions. Attempting to force the update may result in malfunctions within the system.

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

Encountering a POST 504 error while attempting to proxy an Angular application to a Node server

error message: Failed to connect to http://localhost:4200/api/user/login with a 504 Gateway Timeout error. Encountered this issue while attempting to set up a login feature in my Angular application and establish communication with the Express backend. Th ...

Angular input form is throwing an error because it is unable to retrieve the property 'name' of an undefined value

I've been working on creating a simple Angular component following a tutorial I found. The component fetches data from an angular-in-memory-web-api using a service called UserService. I have also added an input form for creating new users. The issue ...

ControlValueAccessor failing to populate with data from external service

After realizing the previous question was slightly off track, I am focusing on creating a custom component that can be bound to a FormControl within a FormGroup. I have successfully made it work for user input using CVA, but facing issues when preloading ...

Importing multiple modules in Typescript is a common practice

I need to include the 'express' module in my app. According to Mozilla's documentation, we should use the following code: import { Application }, * as Express from 'express' However, when using it in TypeScript and VSCode, I enc ...

Deliver a locally defined variable from a template to the parent component

Currently, I am facing a challenge in passing a local input from an input field present in a child component to a parent component. Let me provide you with an example to illustrate: // Exporting itemInput in the Parent component: itemInput: string; // Te ...

The functionality of the Drawer component in material-ui v1.0 seems to be incompatible with TypeScript

Every time I try to utilize Drawer from [email protected] using typescript, I encounter the following error: TS2322: Type '{ children: Element; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes & Re ...

Adjusting the content of mat-cards to fill in blank spaces

I have encountered an issue with the alignment in a list using mat-card. Here is my current layout: https://i.stack.imgur.com/VKSw4.jpg Here is the desired layout: https://i.stack.imgur.com/8jsiX.jpg The problem arises when the size of content inside a ...

What are the consequences of not subscribing to an HttpClient request that returns observables in an Angular application?

Exploring Angular and TypeScript, I am currently delving into the concepts of HttpClient, observables, and subscribe. When I include the following code in a component function: console.log(this.http.get('assets/user.json')); I receive an objec ...

Managing time in an Angular application using Typescript

I am facing an issue with formatting the time obtained from an API in my FormArray. The time is received in the format: 14.21.00 My goal is to convert this time to the following format: 2:21 PM I have attempted to format it using Angular's DatePip ...

Retrieving the value of an object using an array of keys

Consider the following object: const obj = { A:{ a1:'vala1', a2:'vala2' }, B:{ b1: 'valb1', b2: 'valb2' }, C:{ c1:{ c11:'valc11' }, c2:'valc2' } } We also have an array: const ...

able to utilize service within a loop

import { Component, Input, Output, OnInit, OnChanges } from '@angular/core'; import { ViewComponent } from '../view/view.component'; import { HitoService } from '../../services/hito.service'; @Component({ selector: 'ap ...

Implementing conditional asynchronous function call with identical arguments in a Typescript React project

Is there a way in React to make multiple asynchronous calls with the same parameters based on different conditions? Here's an example of what I'm trying to do: const getNewContent = (payload: any) => { (currentOption === myMediaEnum.T ...

Passing a variable to a cloned template in Angular 2: A guide

When working with Angular2, I encountered an issue with my template code that I am cloning every time a user clicks a button. Despite following instructions provided in this post How to dynamically add a cloned node in angular2 (equivalent to cloneNode), I ...

Exploring methods for efficiently handling extensive XLSX files in a Node.js environment

Currently, I am utilizing the ts-xlsx library on the server side to read data. The process involves reading data from the frontend as a byte array using file-reader and then sending this byte array to a library to process the data. However, in cases where ...

Issue with setting cookies in Node.js using Express

Recently I made the switch from regular JavaScript to TypeScript for my project. Everything seems to be functioning properly, except for session handling. This is the current setup of my project: Server.ts App.ts /db/mongo/MongoHandler.ts and some other ...

Stop the direct importing of modules in Angular applications

I have a feature module that declares components and also configures routing through a static function. @NgModule({ declarations: FEATURE_COMPONENTS, entryComponents: FEATURE_COMPONENTS, imports: [ UIRouterModule, ... ] }) export class Fea ...

Why is it that PowerShell cannot execute Angular commands?

Recently, I started diving into Angular and encountered an issue using PowerShell in Windows. Every time I run an angular command like: ng new new-app or ng serve I keep getting this error message: ng : File C:\Users\< username >\ ...

Getting a date object that is three months prior to the current date in Typescript

I need to retrieve the date object that is 3 months before the current date by using the following code snippet: toDate = new Date(); fromDate = this.toDate.getMonth() - 3; The issue I am facing is that the variable fromDate only contains a number, but I ...

Testing an asynchronous function in JavaScript can lead to the error message: "Have you neglected to utilize await?"

Here is an example of the code I am working with: public getUrl(url) { //returns URL ... } public getResponseFromURL(): container { let myStatus = 4; const abc = http.get(url, (respon) => const { statusCode } = respon; myStatus = statusCode ...

Enhancing Efficiency: Streamlining Editing in KendoUI Grid for Angular 2/4

According to the information provided on this link, it seems that batch editing of the kendo ui grid for angular 2/4 is currently unavailable. Is there anyone who has come up with a solution or workaround for this issue? ...