title: issue with angular 8 cdk portal new window
body: <p>enter code herei'm trying to open my component in new window like this example:</p>
  
  <p><a href="https://stackblitz.com/edit/angular-open-window" rel="nofollow noreferrer">https://stackblitz.com/edit/angular-open-window</a></p>
  
  <p>the window opens but without my component in it 
  and the console gives my this error:
  VideoConferenceRequestsComponent.html:116 ERROR Error: Must provide a portal to attach</p>
  
  <p>and this is my code but it is in angular 8, not 7 as the example above</p>
  
  <p>window component ts</p>
  
  <pre><code> ```import {Component, ViewChild, OnInit, ComponentFactoryResolver, ApplicationRef, Injector, OnDestroy, Output, EventEmitter } from '@angular/core';
  import {CdkPortal,DomPortalHost} from '@angular/cdk/portal';
  
  @Component({
    selector: 'window',
    templateUrl: './window.component.html',
    styleUrls: ['./window.component.scss']
  })
  export class WindowComponent implements OnInit, OnDestroy {
    @Output() close : EventEmitter&lt;any&gt; = new EventEmitter();
  
  // STEP 1: get a reference to the portal
  @ViewChild('CdkPortal', {static: true}) portal: CdkPortal;
  
  // STEP 2: save a reference to the window so we can close it
  private externalWindow = null;
  
  // STEP 3: Inject all the required dependencies for a PortalHost
  constructor(
    private componentFactoryResolver: ComponentFactoryResolver,
    private applicationRef: ApplicationRef,
    private injector: Injector){}
  
  
  ngOnInit(){
    // STEP 4: create an external window
    this.externalWindow = window.open('', '', 'width=600,height=400,left=200,top=200');
  
    // STEP 5: create a PortalHost with the body of the new window document    
    const host = new DomPortalHost(
      this.externalWindow.document.body,
      this.componentFactoryResolver,
      this.applicationRef,
      this.injector
      );
  
    // STEP 6: Attach the portal
    host.attach(this.portal);
  }
  
  ngOnDestroy(){
    // STEP 7: close the window when this component destroyed
    this.externalWindow.close()
    debugger
    this.close.emit();
  }
  }```
  </code></pre>
  
  <p>window component html</p>
  
  <pre><code>```&lt;ng-container *cdkPortal&gt;
      &lt;ng-content&gt;&lt;/ng-content&gt;
    &lt;/ng-container&gt;```
  </code></pre>
  
  <p>parent component ts:</p>
  
  <p>it contains  a flag just like the example above
    <code>showPortal = false;</code></p>
  
  <p>parent component HTML</p>
  
  <pre><code>```&lt;button (click)="showPortal = true"&gt;open me!&lt;/button&gt;
  
  &lt;window *ngIf="showPortal" (close)="showPortal = false"&gt;
    &lt;h2&gt;Hello world from amother window!!&lt;/h2&gt;
    &lt;button (click)="showPortal = false"&gt;Close me!&lt;/button&gt;
  &lt;/window&gt;```
  </code></pre>
  
  <p>shared module where I imported portal module</p>
  
  <pre><code>```import { MaterialModule } from './../material-module';
  import { NgModule } from '@angular/core';
  import { CommonModule } from '@angular/common';
  import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
  import { ReactiveFormsModule, FormsModule } from '@angular/forms';
  import { TranslateModule } from '@ngx-translate/core';
  import { SharedHeaderComponent } from './components/shared-header/shared-header.component';
  import { RouterModule } from '@angular/router';
  import { NgSelectModule } from '@ng-select/ng-select';    
  import { SharedFooterComponent } from './components/shared-footer/shared-footer.component';
  import { SharedNavbarComponent } from './components/shared-navbar/shared-navbar.component';
  import { HosptailDetailsComponent } from './components/hosptail-details/hosptail-details.component';
  import { ApiInterceptor } from './interceptors/api-interceptor';
  import { JwtInterceptor } from './interceptors/jwt.interceptor';
  import { ErrorInterceptor } from './interceptors/error.interceptor';
  import { NgxIntlTelInputModule } from 'ngx-intl-tel-input';
  import { SharedSidebarComponent } from './components/shared-sidebar/shared-sidebar.component';
  import { LiveVideoPopupComponent } from './components/_popup/live-video-popup/live-video-popup.component';
  import { ModalBasicComponent } from './components/modal-basic/modal-basic.component';
  import { SubscriberComponent } from './components/subscriber/subscriber.component';
  import { PublisherComponent } from './components/publisher/publisher.component';
  import { OpentokService } from './services/opentok.service';
  import { PortalModule } from '@angular/cdk/portal';
  
  
  @NgModule({
    declarations: [
      PublisherComponent,
      SubscriberComponent,
      SharedHeaderComponent,
      SharedFooterComponent,
      SharedNavbarComponent,
      HosptailDetailsComponent,
      SharedSidebarComponent,
      LiveVideoPopupComponent,
      ModalBasicComponent
    ],
    imports: [
      PortalModule,
      ReactiveFormsModule,
      TranslateModule,
      HttpClientModule,
      RouterModule,
      FormsModule,
      CommonModule,
      NgSelectModule,
      // SelectModule
      MaterialModule
    ],
    exports: [
      PortalModule,
      ReactiveFormsModule,
      FormsModule,
      TranslateModule,
      SharedHeaderComponent,
      SharedNavbarComponent,
      SharedFooterComponent,
      PublisherComponent,
      SubscriberComponent,
      LiveVideoPopupComponent,
      ModalBasicComponent,
      HttpClientModule,
      NgSelectModule,
      NgxIntlTelInputModule
    ],
    providers: [
      { provide: HTTP_INTERCEPTORS, useClass: ApiInterceptor, multi: true },
      { provide: HTTP_INTERCEPTORS, useClass: JwtInterceptor, multi: true },
      { provide: HTTP_INTERCEPTORS, useClass: ErrorInterceptor, multi: true },
      OpentokService
    ]
  })
  export class SharedModule { }```
  </code></pre>