ngx-bootstrap Module not found: Error: Can't resolve 'ngx-bootstrap/loader'

Question

I'm using datepicker from [email protected] in an Angular 6.1.10 project. I'm also loading a different locale (nlLocale).

In my feature module:

import { defineLocale, nlLocale, BsDatepickerModule, BsLocaleService} from 'ngx-bootstrap';

defineLocale('nl', nlLocale);

In my component:

import { BsLocaleService } from 'ngx-bootstrap';
export class MyComponent implements OnInit {  
  locale = 'nl';

  constructor(private bsLocaleService: BsLocaleService) {
    this.bsLocaleService.use(this.locale);
  }
}

When I build this using the command:

ng build --watch

I have no problems, I can run the app, use the datepicker and the months appear in Dutch.

However when I build for production:

ng build --prod

I get the following error:
ERROR in ./node_modules/ngx-bootstrap/datepicker/fesm5/ngx-bootstrap-datepicker.js Module not found: Error: Can't resolve 'ngx-bootstrap/loader' in 'E:\MyProject\node_modules\ngx-bootstrap\datepicker\fesm5' ERROR in ./node_modules/ngx-bootstrap/modal/fesm5/ngx-bootstrap-modal.js Module not found: Error: Can't resolve 'ngx-bootstrap/loader' in 'E:\MyProject\node_modules\ngx-bootstrap\modal\fesm5'

I've looked for the file 'ngx-bootstrap-datepicker.js' which exists in 'fesm5' but I see no reference inside the file to anything related to ngx-bootstrap/loader'.

I've tried downgrading to [email protected] and it does work so it obviously indicates a problem with ngx-bootstrap, but from some reading I've been doing others don't seem to be having this problem.

Anyone come across this before?

Lucho · Accepted Answer · 2019-03-28 20:35:52Z

0

Have you done following in the feature modal?

@NgModule({
  imports: [BsDatepickerModule.forRoot(),...]
})

if so, try o to add it to your root module instead

edited Mar 28, 2019 at 20:35

answered Mar 28, 2019 at 20:24

Lucho

1,5471 gold badge13 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Jacques Over a year ago

Tried both, same result

Lucho Over a year ago

Can you update your post on how your modules look like?

techjunkie · Accepted Answer · 2020-07-27 06:10:55Z

0

I am currently using Angular 9 with the latest version of ngx-bootstrap. I believe the latest implementation is to import the BsDatepickerModule in the app.module.ts file like this

Import statement in app.module.ts code:

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { BsDatepickerModule } from 'ngx-bootstrap/datepicker';

in app.module.ts imports:

  imports: [
BrowserAnimationsModule,
BsDatepickerModule.forRoot()

]

Component Code:

import { BsDatepickerConfig } from 'ngx-bootstrap/datepicker';

@Component({ selector: 'app-', templateUrl: './register.component.html', styleUrls: ['./register.component.css'],
})
export class RegisterComponent implements OnInit {


bsConfig: Partial<BsDatepickerConfig>;



constructor() {}

ngOnInit() {

this.bsConfig = Object.assign({}, { containerClass: 'theme-blue' });

}
}

package.json

"@angular/core": "~9.1.7", "bootstrap": "^4.5.0", "ngx-bootstrap": "^5.6.1", "@angular/cli": "~9.1.6"

From the official site:

Usage

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

// RECOMMENDED

import { BsDatepickerModule } from 'ngx-bootstrap/datepicker';

// NOT RECOMMENDED (Angular 9 doesn't support this kind of import)

import { BsDatepickerModule } from 'ngx-bootstrap';

@NgModule({

imports: [

BrowserAnimationsModule,

BsDatepickerModule.forRoot(),

...

] })

export class AppModule(){}

https://valor-software.com/ngx-bootstrap/#/datepicker

techjunkieblog.com

edited Jul 27, 2020 at 6:10

answered Jun 9, 2020 at 21:37

techjunkie

2112 silver badges4 bronze badges

2 Comments

techjunkie Over a year ago

For the newer versions the import statment is import { BsDropdownModule } from 'ngx-bootstrap/dropdown'; You might have to rebuild after adding the library, and also use the Angular cli to add the tool instead of npm with this command ng add ngx-bootstrap type Ctrl+C to stop the app and ng serve --watch to rebuild it

techjunkie Over a year ago

I think from Angular 6-8 you can still follow the old implementations. The best strategy is to identify the ngx-bootstrap version in your package.json file and find the documentation in the official site valor-software.com/ngx-bootstrap/# that matches your version

Collectives™ on Stack Overflow

ngx-bootstrap Module not found: Error: Can't resolve 'ngx-bootstrap/loader'

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related