CODEWITHSUNDEEP
angularangular-clingx-bootstrap
Jacques
Jacques

Reputation: 7135

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

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?

Upvotes: 2

Views: 9735

Answers (2)

techjunkie
techjunkie

Reputation: 211

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" enter image description here

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

Upvotes: 0

Lucho
Lucho

Reputation: 1547

Have you done following in the feature modal?

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

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

Upvotes: 0

Related Questions