ng2-bootstrap progressbar not working

Question

I am using the ng2-bootstrap progress bar component in a Angular 2 app built with angular-cli. As suggested by the ng2-bootstrap team I have declared and used the progress bar component as shown below:

import { AlertModule, AccordionModule, ModalModule, ProgressbarModule  } from 'ng2-bootstrap';
import { ThreedViewerComponent} from './threed-viewer/threed-viewer.component';

@NgModule({
  declarations: [
    AppComponent,
    ThreedViewerComponent,
  ],
  imports: [
    ...        
    AlertModule.forRoot(),
    AccordionModule.forRoot(),
    ModalModule.forRoot(),
    ProgressbarModule.forRoot(),
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {
  public customClass: string = 'customClass';
  public isFirstOpen: boolean = true;
}

the following is my HTML:

<progressbar [max]="max" [value]="dynamic">
    <span style="color:white; white-space:nowrap;">{{dynamic}} / {{max}}</span>
</progressbar>

and finally my component:

@Component({
  selector: ...  
  templateUrl: ...
})
export class myComponent{
  public max: number = 200;
  public showWarning: boolean;
  public dynamic: number;
  public type: string;

  ...
}

when I serve the app, theprogress bar generates following error but all other ng2-bootstrap components work fine:

Unhandled Promise rejection: Template parse errors: Can't bind to 'max' since it isn't a known property of 'progressbar'. ("
      <progressbar [ERROR ->][max]="max" [value]="dynamic">
        <span style="color:white; white-space:nowrap;">{{dynamic}"): ThreedViewerComponent@85:23 Can't
bind to 'value' since it isn't a known property of 'progressbar'. ("
      <progressbar [max]="max" [ERROR ->][value]="dynamic">
        <span style="color:white; white-space:nowrap;">{{dynamic}} / {{max}}<"): ThreedViewerComponent@85:35 'progressbar' is not a known
element: 1. If 'progressbar' is an Angular component, then verify that it is part of this module. 2. If 'progressbar' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message. ("
      [ERROR ->]<progressbar [max]="max" [value]="dynamic">
        <span style="color:white; white-space:nowrap"): ThreedViewerComponent@85:10 'progressbar' is not a known element:
1. If 'progressbar' is an Angular component, then verify that it is part of this module. 2. If 'progressbar' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message. (" [ERROR ->] © 2017 "): ThreedViewerComponent@91:12 ; Zone: ; Task: Promise.then ; Value: SyntaxError {__zone_symbol__error: Error: Template parse errors: Can't bind to 'max' since it isn't a known property of 'progressbar'. …, _nativeError: ZoneAwareError, __zone_symbol__currentTask: ZoneTask, __zone_symbol__stack: "Error: Template parse errors:↵Can't bind to 'max' …ttp://localhost:4200/polyfills.bundle.js:3011:35)", __zone_symbol__message: "Template parse errors:↵Can't bind to 'max' since i… © 2017 ↵"): ThreedViewerComponent@91:12"} Error: Template parse errors: Can't bind to 'max' since it isn't a known property of 'progressbar'. ("
      <progressbar [ERROR ->][max]="max" [value]="dynamic">
        <span style="color:white; white-space:nowrap;">{{dynamic}"): ThreedViewerComponent@85:23 Can't
bind to 'value' since it isn't a known property of 'progressbar'. ("
      <progressbar [max]="max" [ERROR ->][value]="dynamic">
        <span style="color:white; white-space:nowrap;">{{dynamic}} / {{max}}<"): ThreedViewerComponent@85:35 'progressbar' is not a known
element: 1. If 'progressbar' is an Angular component, then verify that it is part of this module. 2. If 'progressbar' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message. ("
      [ERROR ->]<progressbar [max]="max" [value]="dynamic">
        <span style="color:white; white-space:nowrap"): ThreedViewerComponent@85:10 'progressbar' is not a known element:
1. If 'progressbar' is an Angular component, then verify that it is part of this module. 2. If 'progressbar' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message. (" [ERROR ->] © 2017 "): ThreedViewerComponent@91:12 at SyntaxError.ZoneAwareError (http://localhost:4200/polyfills.bundle.js:3457:33) at SyntaxError.BaseError [as constructor] (http://localhost:4200/vendor.bundle.js:86968:16) at new SyntaxError (http://localhost:4200/vendor.bundle.js:10223:16) at TemplateParser.parse (http://localhost:4200/vendor.bundle.js:22316:19) at JitCompiler._compileTemplate (http://localhost:4200/vendor.bundle.js:54413:68) at http://localhost:4200/vendor.bundle.js:54296:62 at Set.forEach (native) at JitCompiler._compileComponents (http://localhost:4200/vendor.bundle.js:54296:19) at createResult (http://localhost:4200/vendor.bundle.js:54178:19) at ZoneDelegate.webpackJsonp.807.ZoneDelegate.invoke (http://localhost:4200/polyfills.bundle.js:2799:26) at Zone.webpackJsonp.807.Zone.run (http://localhost:4200/polyfills.bundle.js:2591:43) at http://localhost:4200/polyfills.bundle.js:3178:57 at ZoneDelegate.webpackJsonp.807.ZoneDelegate.invokeTask (http://localhost:4200/polyfills.bundle.js:2832:31) at Zone.webpackJsonp.807.Zone.runTask (http://localhost:4200/polyfills.bundle.js:2631:47) at drainMicroTaskQueue (http://localhost:4200/polyfills.bundle.js:3011:35)

Can you please help?

Vivek Doshi Vivek Doshi · Accepted Answer · 2017-04-03T10:09:21

Will you please change your import to this , and try again :

imports: [
    AlertModule.forRoot(),
    AccordionModule.forRoot(),
    ModalModule.forRoot(),
    ProgressbarModule.forRoot(),
    ...        
  ],

Load all bootstrap module first (AlertModule, AccordionModule, ModalModule, ProgressbarModule) and then other modules.

ng2-bootstrap progressbar not working

1 Answers