Angular 5 | Modal not opening

[ghost]

There seems to be a bug when using a modal the programmatical way. When ng2-materialize is not installed as symbolic link but normally with npm, the button click event will generate the following error:

ERROR TypeError: Cannot read property 'length' of undefined
at MzInjectionService.getRootViewContainer (webpack-internal:///../../../../ng2-materialize/dist/shared/injection/injection.service.js:64)

I made a repo where I rewrote your demo-app to retrieve ng2-materialize normally and the error can be reproduced:

https://github.com/darthsitthiander/demo-app

[jfcere]

Hi @darthsitthiander, what a coincidence, I answered the same question this morning :)

There is an issue with Angular 5 with MzInjectionService (see #160 (comment)).

There might be a workaround ... you would need to import MzInjectionService from ng2-materialize/dist/shared and use setRootViewContainer method to set another container for the modal to be injected into so it does not try to fallback to _rootComponents private property that has been renamed in Angular 5.

import { MzInjectionService } from 'ng2-materialize/dist/shared'

...

constructor(
  private injectionService: MzInjectionService,
  private modalService: MzModalService,
) { }

openModal() {
  this.injectionService.setRootViewContainer(/* containerRef */);
  this.modalService.open(MyModalComponent);
}
  

[ghost]

Hey @jfcere! Wow, thanks for the quick reply. I've been struggling with this for a couple of hours now, so help is really appreciated. Just tried your approach and I'm trying to wrap my head around setRootViewContainer. The way I have my code now is

import { Component, OnInit } from '@angular/core';
import { MzModalService } from 'ng2-materialize';
import { LoginComponent } from '../modals/login/login.component';
import { MzInjectionService } from 'ng2-materialize/dist/shared'

...

  constructor(
    private injectionService: MzInjectionService,
    private modalService: MzModalService) {}

  openServiceModal() {
    let containerRef = $('#modal1');
    this.injectionService.setRootViewContainer($(containerRef)); // (containerRef) not working either
    this.modalService.open(LoginComponent);
  }

I am getting the following error:

GuesttoolbarComponent.html:13 ERROR TypeError: Cannot read property 'rootNodes' of undefined
at MzInjectionService.getComponentRootNode

But I'm sure this has to do with my use of the above mentioned function.

[jfcere]

@darthsitthiander yeah I noticed I was a little "vague" on my example.

I noticed the changes I need to do to make it compatible with Angular 5 which I'm going to work on during the next week.

But in the meenwhile the workaround is not pretty as you need to build an object that will "mimic" the ComponentRef that is supposed to be used...

import { Component } from '@angular/core';
import { MzModalService } from 'ng2-materialize';
import { LoginComponent } from '../modals/login/login.component';
import { MzInjectionService } from 'ng2-materialize/dist/shared'

...

constructor(
  private injectionService: MzInjectionService,
  private modalService: MzModalService,
) {
  // set default injection container with mocked object
  this.injectionService.setRootViewContainer({
    hostView: {
      rootNodes: [document.body],
    },
  });
}

openServiceModal() {
  // opening modal will inject it in the default container set earlier
  this.modalService.open(LoginComponent);
}

Note that as the service is a singleton, you could assign the container through setRootViewContainer only once (lets say in your AppComponent constructor) to avoid to do this all over you application. This way when it is going be fixed for Angular 5 you will only have to remove the workaround at this unique place.

[ghost]

Thanks for the reply! I tried mentioned approach yet to no avail. First I had to add my modal component LoginComponent as entryComponent in the app.module.ts. Then I got error messages

GuesttoolbarComponent.html:13 ERROR TypeError: Cannot read property 'onClose' of undefined // as well as 'open'

Basically saying the componentRef couldn't be found.

I'll stick with the web version for now and implement this as soon as it's fixed. Thanks for the help and work on this. I'm looking forward to the upcoming release.

[jfcere]

I am not totaly sure to understand the issue with onClose and open, if you feel like it, you can provide me a link to your repository so I can take a look at it.

Another solution is to rollback to latest version of angular 4.

[ghost]

Hmm, I updated the above mentioned repo and it's working fine there:

https://github.com/darthsitthiander/demo-app

So the problem seems to be somewhere else in my application. I'll get back to you once I've found it.

[ghost]

Got it working now. I had to remove the ModalComponent declaration from the modal.module.ts and move it in the app.module.ts. I think the way I imported components and handled the injections had gone totally wrong somewhere, but I'm not investigating further, except if I can help somehow.

Thanks again!

[jfcere]

Anytime! I'll keep the issue open until I do the fix for Angular 5.

[jfcere]

@darthsitthiander I guess I never mentioned it but the fix has been released since v1.7.0

[ghost]

@jfcere Awesome, I'll check it out in the coming days. Thanks for the heads up!