CODEWITHSUNDEEP
angularng-bootstrap
tpartee
tpartee

Reputation: 549

Why am I getting Build Errors immediately after installing ng-bootstrap in Angular 10?

I just created a brand new Angular 10 project using the Angular CLI, then after setting up my initial modules and routing and testing that it works, I added ng-bootstrap as recommended using the command:

ng add @ng-bootstrap/schematics

Now when I try to ng serve my project, I get the following errors:

Failed to compile entry-point @ng-bootstrap/ng-bootstrap (module as esm5) due to compilation errors:
../../node_modules/@ng-bootstrap/ng-bootstrap/rating/rating.js:148:43 - error NG1006: Cannot combine @Input decorators with query decorators

148         "starTemplate": [{ type: Input }, { type: ContentChild, args: [TemplateRef,] },],
                                              ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
../../node_modules/@ng-bootstrap/ng-bootstrap/rating/rating.module.js:12:51 - error NG6001: The class 'NgbRating' is listed in the declarations of the NgModule 'NgbRatingModule', but is not a directive, a component, or a pipe. Either remove it from the NgModule's declarations, or add an appropriate Angular decorator.

12         { type: NgModule, args: [{ declarations: [NgbRating], exports: [NgbRating], imports: [CommonModule] },] },
                                                     ~~~~~~~~~

  ../../node_modules/@ng-bootstrap/ng-bootstrap/rating/rating.js:14:5
    14 var NgbRating = /** @class */ (function () {
           ~~~~~~~~~
    'NgbRating' is declared here.
../../node_modules/@ng-bootstrap/ng-bootstrap/rating/rating.js:14:5 - 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?

14 var NgbRating = /** @class */ (function () {
       ~~~~~~~~~
../../node_modules/@ng-bootstrap/ng-bootstrap/rating/rating.module.js:7:5 - error NG6002: Appears in the NgModule.imports of NgbRootModule, but itself has errors

7 var NgbRatingModule = /** @class */ (function () {
      ~~~~~~~~~~~~~~~
../../node_modules/@ng-bootstrap/ng-bootstrap/rating/rating.module.js:7:5 - error NG6003: Appears in the NgModule.exports of NgbRootModule, but itself has errors

7 var NgbRatingModule = /** @class */ (function () {
      ~~~~~~~~~~~~~~~
../../node_modules/@ng-bootstrap/ng-bootstrap/rating/rating.module.js:7:5 - error NG6002: Appears in the NgModule.imports of NgbModule, but itself has errors

7 var NgbRatingModule = /** @class */ (function () {
      ~~~~~~~~~~~~~~~
../../node_modules/@ng-bootstrap/ng-bootstrap/rating/rating.module.js:7:5 - error NG6003: Appears in the NgModule.exports of NgbModule, but itself has errors

7 var NgbRatingModule = /** @class */ (function () {

Is this just a bug in the ng-bootstrap package or did I do something wrong in my project or how I added ng-bootstrap? Any suggestions for fixing it?

Upvotes: 2

Views: 2959

Answers (1)

tpartee
tpartee

Reputation: 549

After quite a lot of digging around in the GitHub project and the package.json files trying different things, it seems that the @ng-bootstrap/schematics is an outdated package to be using for installation. By removing that from my package.json file and instead adding "@ng-bootstrap/ng-bootstrap": "^6.0.0" then running an npm update it resolved the issues and my project is once again working.

Upvotes: 6

Related Questions