CODEWITHSUNDEEP
angular
Avtandil Kavrelishvili
Avtandil Kavrelishvili

Reputation: 1757

why get this error - 'Cannot read property '0' of undefined' when use ng2-bootstrap-modal in prod build?

I have angular 4 project, and I'm using ng2-bootstrap-modal, in debug mode dialog works fine, but when I build in prod mode, start published application and click button to show dialog, get this error:

Cannot read property '0' of undefined
    at t.createDialogHolder (dialog.service.js.pre-build-optimizer.js:52)
    at t.addDialog (dialog.service.js.pre-build-optimizer.js:33)

How can I fix this issue ?

Upvotes: 1

Views: 2370

Answers (6)

kiran kirtkar
kiran kirtkar

Reputation: 79

`if locally work fine and not on server site then use below solution go in node_modules -> ng2-bootstrap-modal-> dist -> dialog.service.js and open dialog service and replace this code

let componentRootViewContainer = this.applicationRef['_rootComponents'][0];

by

let componentRootViewContainer = this.applicationRef.components[0];`

Upvotes: 0

jyothi
jyothi

Reputation: 21

I think it's not good idea of managing npm packages to fix the issue. We can add a constructor and one line in app module to consider components when it's referred to _rootComponents.

//change in app.module.ts
export class AppModule {
  constructor(applicationRef: ApplicationRef) {
  //for ng2-bootstrap-modal in angualar 5+(6, 7 etc..)
    Object.defineProperty(applicationRef, '_rootComponents', {get: () => applicationRef['components']});
  }
}

Upvotes: 2

David Romero
David Romero

Reputation: 1

These lines must be changed:

node_modules -> ng2-bootstrap-modal-> dist -> dialog.service.js

and in

node_modules -> ng2-bootstrap-modal-> src -> dialog.service.js

Upvotes: -1

Avtandil Kavrelishvili
Avtandil Kavrelishvili

Reputation: 1757

I change dialog.service, this:

 let componentRootViewContainer = this.applicationRef['_rootComponents'][0];

by 

let componentRootViewContainer = this.applicationRef.components[0];

Here is whole dialog, just copy and paste it: https://ufile.io/m8qm2

in app.module
import { BootstrapModalModule } from './shared/dialog/bootstrap-modal.module';


imports: [
.....
    BootstrapModalModule,
....
]

Upvotes: 3

Kirill Ilin
Kirill Ilin

Reputation: 63

 BootstrapModalModule.forRoot({container:document.body})

into your app.module

Upvotes: 4

Keshav Gupta
Keshav Gupta

Reputation: 11

In node_modules -> ng2-bootstrap-modal-> dist -> dialog.service.js

Change this.applicationRef['_rootComponents'][0] to this.applicationRef.components[0];

Upvotes: 1

Related Questions