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

Dynamically hide columns in Angular Material Table when screen is resized and move them to a detail row

Is there a way to replicate the functionality of Datatable Jquery in Angular Material Table? I want the exceeded columns to be hidden and go to a detail row when the screen is zoomed out. Here is an example of what I am trying to achieve with Datatable jq ...

Unable to connect information to list item

I'm struggling to figure out why I am unable to bind this data into the li element. When I check the console, I can see the data under calendar.Days and within that are the individual day values. Any assistance would be highly appreciated. Code @Comp ...

What are the ways in which Angular can offer assistance to Internet Explorer 9?

The news is out - the Angular team has just announced their support for Internet Explorer 9! This revelation has left me wondering, how is it even possible? Currently, I am an avid user of AngularJS and have dedicated time to studying its ins and outs. Fr ...

Ways to incorporate Bootstrap components into an Angular application without relying on external modules

I'm attempting to activate Bootstrap 5.3 Tooltips within my Angular 17 application. Within angular.json, I've added bootstrap.bundle.min.js, which includes PopperJS. "scripts": [ "node_modules/bootstrap/dist/js/bootstrap.bundle. ...

Encountering an error when attempting to iterate over an undefined property using an API

I am trying to fetch all classes and their assignments from Google Classroom. I successfully used Google's example code for listing the classes, but had to write my own code for listing the assignments. While the code runs as expected and lists the as ...

Efficiently loading Ionic 3 components within a tab with lazy-loading functionality

Need help with adding a new tab to your project using lazy-loading? You can utilize the @IonicPage decorator for setting up a page as the root of a tab. To implement this, create a new page: // module import { NgModule } from '@angular/core'; ...

Maintain the text layout when copying and pasting from the Angular Application

After noticing that copying and pasting text from an Angular Application to a text editor like Microsoft Word results in losing the original format, I decided to investigate further. An example I used was the angular material website: https://material.ang ...

An instance of an object is being added instead of parameters

I'm having some trouble making a server call using promises. Whenever I try to add my parameters, they end up showing as 'object%20Object' Here's the code snippet for the call: import { Injectable } from '@angular/core'; imp ...

Angular is throwing an error due to an unexpected token when running on an IIS server within a subfolder

I have recently developed an Angular 11 template (Angular version 11 + .Net core 5.0) using visual studio 2019. The Angular application needs to be accessed from a subfolder called caui rather than the root folder. After publishing the Angular application ...

What is the best way to retrieve the data from a specific section when a checkbox is selected in Angular 2?

When I select a checkbox for any section and then click the submit button, I want to display the details of that section in the console. Can someone assist me with this? **Stackblitz link:** : https://stackblitz.com/edit/angular-q7y8k1?file=src%2Fapp%2Fa ...

What is the best way to show TypeScript code using "<code>" tags within an Angular application?

I am looking to showcase some TypeScript (angular code) as plain text on my website using prismjs. However, the Angular framework is executing the code instead. How can I prevent it from running? I have attempted enclosing it within pre and code tags wit ...

Angular proxy - Syntax error found in proxy configuration file: proxy.conf.json

My Angular 6 setup is configured to make HttpRequests, but I encountered a problem that requires me to run them through a proxy. To address this issue, I created a proxy.conf.json file next to my package.json: { "/loans/": { "target" : "https://api. ...

What is the best way to spy on child components within an Angular application?

The Angular tutorials feature an example of a HeroesComponent with a child component named HeroesListComponent. Within the HeroesListComponent, there is a usage of the HeroesService to execute the getHeroes() function. In order to utilize the spyOn funct ...

What are the appropriate scenarios to utilize the declare keyword in TypeScript?

What is the necessity of using declare in TypeScript for declaring variables and functions, and when is it not required? For instance, why use declare var foo: number; when let foo: number; seems to achieve the same result (declaring a variable named ...

The browser Firefox/Chrome managed to survive for more than 2000 milliseconds before finally succumbing and receiving a SIG

When I run ng test in my local Angular project (v10), all the test cases pass successfully and the browser launches with green dots appearing. However, at the last moment, the browser is unexpectedly terminated with a warning displayed in the command promp ...

Creating a Text Typer ReactJS component that functions properly regardless of whether or not it is used within StrictMode is no

My goal is to develop a custom Text Typer component that displays text character by character every 100ms. While it works perfectly fine in production, I encounter issues when testing it in the development environment. Despite trying various solutions, tw ...

What is the significance of the any type in Typescript?

As I delve into learning Typescript, a question arises in my mind. I find myself pondering the purpose of the any type. It seems redundant to specify it when every variable essentially acts as an "any" type by default. Consider this scenario where the out ...

Guide to creating unit tests for a button click function in an Angular project

I wrote some code for unit testing, but it doesn't seem to be working. I'm new to unit testing and would appreciate some guidance on how to use it. COMPONENT.HTML <button class="set-button" (click)="clickFunction()"> SA ...

Utilizing the Angular formArrayName directive in form elements

The Angular official documentation provides the following code example: @Component({ template: ` <form [formGroup]="form"> <div formArrayName="cities"> <div *ngFor="let city of cities.controls; index as i"> ...

Unit testing with Jest in TypeScript for mocking Express and Mongoose

I've been struggling to find comprehensive resources on using jest.fn() to mock TypeScript classes and their methods, like express' Request, Response, NextFunction, and the save() method on a mongoose model. For instance, suppose I have the foll ...