modal.defaultViewContainer is erroring out

[nsabarisri6]

Hi,

I am trying to import angular2-modal in my project.

import { Component, OnInit, ViewContainerRef, ViewEncapsulation } from '@angular/core';
import { Modal } from 'angular2-modal/plugins/bootstrap';
import { RecipeItemDetailComponent } from '../recipeitemdetail/recipeitemdetail.component'
@Component({
  selector: 'app-recipevarieties',
  templateUrl: './recipevarieties.component.html',
  styleUrls: ['./recipevarieties.component.css']
})
export class RecipevarietiesComponent implements OnInit {

  public recipeList = [{ name: 'Chicken Biriyani', image: '../assets/images/chickbiriyani.jpg' },
  { name: 'Chilly Chicken', image: '../assets/images/chillyChicken.jpg' }, { name: 'Chicken Tikka', image: '../assets/images/chickenTikka.jpeg' },
  { name: 'Mushroom masala', image: 'https://i.ytimg.com/vi/dPLw0rX-QO0/maxresdefault.jpg' },
  { name: 'Chilli Prawns', image: 'http://www.cookingandme.com/wp-content/uploads/2013/03/8600732154_2e7a116538_z.jpg' }];
  public cart = [];
  constructor(vcRef: ViewContainerRef, public modal: Modal) {
     modal.defaultViewContainer = vcRef;
  }
  selectRecipe(recipe) {
    this.modal.alert()
      .size('lg')
      .showClose(true)
      .title('A simple Alert style modal window')
      .body(`
            <h4>Alert is a classic (title/body/footer) 1 button modal window that 
            does not block.</h4>
            <b>Configuration:</b>
            <ul>
                <li>Non blocking (click anywhere outside to dismiss)</li>
                <li>Size large</li>
                <li>Dismissed with default keyboard key (ESC)</li>
                <li>Close wth button click</li>
                <li>HTML content</li>
            </ul>`)
      .open();    
  }
  ngOnInit() {
  }

}

But I get error saying

Property 'defaultViewContainer' does not exist on type 'Modal

I also followed your earlier workaround and included

<span defaultOverlayTarget></span>

But still no use. I get the same error. When I used,

modal.overlay.defaultViewContainer = vcRef; ==> I can see the modal, but not the content.

(This idea was mentioned by another guy in the same thread)

Reference:

https://github.com/shlomiassaf/angular2-modal/issues/210

Please help me.

Thanks, Sabarisri N

[SilverJan]

Facing the same issue in v3.0.1.

The overlay.service.d.ts file does not contain the field 'defaultViewContainer' which obviously causes the error.

[thekeldeo]

i got that error too, and still get error when add modal.overlay.defaultViewContainer = vcRef;

==> Property 'defaultViewContainer' does not exist on type 'Overlay'.

[zopxy]

the same error

[karocksjoelee]

same error here as well

[thekeldeo]

hey i just fixed by included <span defaultOverlayTarget> to main template and remove modal.overlay.defaultViewContainer = vcRef; or overlay.defaultViewContainer = vcRef;

[karocksjoelee]

@thekeldeo Can you explain what to "included to main template" ?

[thekeldeo]

here is my app.component.ts:

@Component({
  selector: 'app',
  styleUrls: ['./app.component.scss'],
  template: `
    <main [class.menu-collapsed]="isMenuCollapsed" baThemeRun>
      <span defaultOverlayTarget></span>
      <toaster-container></toaster-container>
      <div class="additional-bg"></div>
      <router-outlet></router-outlet>
    </main>
  `
})

[karocksjoelee]

@thekeldeo Thank you ~ but mine still not working . Maybe because I've used module lazyloading ??

[SilverJan]

@thekeldeo Unfortunately not working for me either.

.open() on a modal instance causes ~20s ideling in the whole view.

[arkwl]

It's not working for me either. Any other fixes?

[arkwl]

@nsabarisri6 have you tried to reproduce the error on plunker?

[ghost]

I found the solution for this problem here, provided by romanchuk: https://github.com/shlomiassaf/angular2-modal/issues/278

I have created a Github repo in which I applied this solution (Git clone it and run npm run ng serve from the root directory of the project): https://github.com/ronh73/modalng2 (because I use Angular-CLI/Webpack, I can not use plunker)

The key thing here is to remove the line modal.overlay.defaultViewContainer = vcRef; from the constructor and instead of that add some code to the app.module.ts.

[ghost]

Unfortunately I can not add bootstrap to my solution.

[developersatish]

error TS2339: Property 'defaultViewContainer' does not exist on type 'Overlay'.

91     overlay.defaultViewContainer = vcRef;