title: Angular 4 auxiliary route with component opens md-dialog throws error at server side rendering
body: <p>So, I have an angular app and using <code>md-dialog</code> for modal purpose. Everything working fine but it throws error server-side rendering when try to open auxiliary route. I tried <code>AfterViewInit</code> but it did not work. I thought it must open the component defined in route config, and then execute <code>dialog.open()</code> method in <code>ngAfterViewInit</code> method.</p>
  
  <p>This is relevant route config : </p>
  
  <pre><code>{
    path: 'postm/:postId',
    component: PostIndexModalComponent,   
    outlet:'post'
  },
  </code></pre>
  
  <p>This is the PostIndexModalComponent that opens md-dialog</p>
  
  <pre><code>export class PostIndexModalComponent implements OnInit,OnDestroy,AfterViewInit{
  
  post: any
  isAuthorizedSubscription: Subscription;
  isAuthorized: boolean;
  postId: number;
  urlSub: any;
  
  constructor(public dialog: MdDialog,public router:Router,public activatedRoute:ActivatedRoute) { }
  ngOnInit() {
      this.urlSub = this.activatedRoute.params.subscribe(params =&gt; {
          this.postId = params['postId'];            
      });
  
  }
  ngOnDestroy() {
  
  
  }
  ngAfterViewInit() {
      this.openModal();
  }
  
  openModal() {
      console.log(this.postId);
      let dialogRef = this.dialog.open(PostModalComponent, {
          height: '100%',
          width: '100%',
          panelClass:'da',
          data: {
              postId:this.postId
          }
      });
      dialogRef.afterClosed().subscribe(f =&gt; {
          this.router.navigate([{ outlets: { post: null } }]);
      });
  
  }
  
  closeModal($event) {
      this.router.navigate([{ outlets: { post: null } }]);
  }
  }
  </code></pre>
  
  <p>Auxulary route works in client-side well but, server side rendering gives error:</p>
  
  <blockquote>
    <p>NodeInvocationException: Uncaught (in promise): ReferenceError: document is not defined
    ReferenceError: document is not defined
    at Overlay._createPaneElement (C:\Users\doom\Desktop\feasion\fso.Web\fso.AngularClient\ClientApp\dist\main-server.js:11465:46)
    at Overlay.create (C:\Users\doom\Desktop\feasion\fso.Web\fso.AngularClient\ClientApp\dist\main-server.js:11450:44)
    at MdDialog._createOverlay (C:\Users\doom\Desktop\feasion\fso.Web\fso.AngularClient\ClientApp\dist\main-server.js:26492:30)
    at MdDialog.open (C:\Users\doom\Desktop\feasion\fso.Web\fso.AngularClient\ClientApp\dist\main-server.js:26460:48)
    at PostIndexModalComponent.openModal (C:\Users\doom\Desktop\feasion\fso.Web\fso.AngularClient\ClientApp\dist\main-server.js:65986:37)
    at PostIndexModalComponent.ngAfterViewInit (C:\Users\doom\Desktop\feasion\fso.Web\fso.AngularClient\ClientApp\dist\main-server.js:65981:14)
    at callProviderLifecycles (C:\Users\doom\Desktop\feasion\fso.Web\fso.AngularClient\ClientApp\dist\vendor.js:22011:18)
    at callElementProvidersLifecycles (C:\Users\doom\Desktop\feasion\fso.Web\fso.AngularClient\ClientApp\dist\vendor.js:21986:13)
    at callLifecycleHooksChildrenFirst (C:\Users\doom\Desktop\feasion\fso.Web\fso.AngularClient\ClientApp\dist\vendor.js:21970:17)
    at Object.checkAndUpdateView (C:\Users\doom\Desktop\feasion\fso.Web\fso.AngularClient\ClientApp\dist\vendor.js:23002:5)
    Error: Uncaught (in promise): ReferenceError: document is not defined</p>
  </blockquote>