Angular 5 support.

[oixan]

I just update to angular 5. And the librery stop to work. this is a huge problem. my website is entirely based on it. is there some plan to support angular 5?

[celsomtrindade]

I've ran into the same issue.

I managed to solve this by changing a single line on the project. On this line on the dist files (or on this line on the src file) change this:

this.applicationRef['_rootComponents'][0];

To this:

this.applicationRef['components'][0];

After changing this line, it solved the problem.

[KevinShiCA]

@celsomtrindade This worked for me, thank you! Do you mind telling me how/why this fixes it?

[celsomtrindade]

@KevinShiCA Actually I didn't spent much time looking at this issue, since I'm a bit busy on this new project. But as far as I know, it's the Angular 5 update that changed the element ref properties and it no longer has the _rootComponents property.

Using the components property is enough to fix the issue, but I don't know if this has any side effects at all.

At least in all my applications, where I use this modal a lot, I didn't had any issues after changing those lines. Everything is working so far.

---

Note: Considering how this project doesn't have attention from the owner on fixing issues and/or updating the code, I didn't spent much time on this. Just fixed what worked for me and commented here, so maybe it can help others. There are other pull requests waiting for a long time and no action has been done yet.

[zt1983811]

@celsomtrindade Great fix and really appreciated for that. Consider to this project has less attention from owner now, do you think if someone (may be you) could folk this project and make it more active version of it? Because I am like you, having a lot of project use on this service.

[oixan]

I finally tried the solution proposed by @celsomtrindade. It's work perfectly . Thanks.

[ravlik]

@celsomtrindade it`s work but better solution for big project when using npm or other package manager is below. Because refactoring packages is bad practice.

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

[celsomtrindade]

@ravlik an even better solution is to use an updated package, like this one: https://github.com/KevCJones/ngx-simple-modal

:)

[ujtordai]

Hi Guys,

Did you experience any side effect of the mentioned fix?

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

Please share it if has any side effect.