title: Opening dialog box through a service
body: <p>Here is the problem:<br/></p>
  
  <p>I have a <code>nav</code> bar having some <code>nav options</code> including <em>login</em> button which is situated in <code>app.component.html</code> <br/></p>
  
  <p>This is structure of <code>AppComponent</code>:</p>
  
  <pre><code>export class AppComponent {
  
  logInDialogRef: MdDialogRef&lt;LoginComponent&gt;;
  
  public constructor(public http: Http, private viewContainerRef: ViewContainerRef, 
            public dialog: MdDialog) {}
  
  loginUser(){
      let config = new MdDialogConfig();
      config.viewContainerRef = this.viewContainerRef;
      config.role = 'dialog';
      config.width = '40%';
      this.logInDialogRef = this.dialog.open(LoginComponent, config);
  }
  }
  </code></pre>
  
  <p>When I click on <em>login</em>, I get nice pop up for login. I have another <em>nav option</em> which is protected route. </p>
  
  <pre><code>{path: 'products', component: ProductsComponent, canActivate: [AuthGuard]}
  </code></pre>
  
  <p>Suppose I am on some route say <code>solutions</code>. From here I login, I store <code>jwt token</code> in <code>localstorage</code>. Then I click on <code>Products</code>. Since user is logged in it should navigate or it should give pop up if no user is logged in. <br/></p>
  
  <p>But I'm getting nothing. Getting following error:</p>
  
  <pre><code>EXCEPTION: Uncaught (in promise): Error: No provider for ViewContainerRef!
  </code></pre>
  
  <p><code>CanActivate</code> method of Auth.Guard.ts</p>
  
  <pre><code>canActivate() {
  if (tokenNotExpired()) {
      return true;
  }
  
  this.loginService
      .loginUser(this.viewContainerRef)
      .subscribe(res =&gt; this.result = res);
  
  return false;
  }
  </code></pre>
  
  <p><code>LoginService</code> have same <code>loginUser</code> method as above in <code>app.component</code></p>
  
  <p><code>app/login/login.service.ts</code></p>
  
  <pre><code>public loginUser(viewContainerRef: ViewContainerRef): Observable&lt;any&gt; {
  
      let dialogRef: MdDialogRef&lt;LoginComponent&gt;;
      let config = new MdDialogConfig();
      config.viewContainerRef = viewContainerRef;
      config.role = 'dialog';
      config.width = '40%';
      dialogRef = this.dialog.open(LoginComponent, config);
      return dialogRef.afterClosed();
  }
  </code></pre>
  
  <p>I hope information is clear. Please tell if further clarification is needed. <br/></p>
  
  <p>The problem is opening <code>dialog</code> from different component through a service while same can be done from individual component easily i.e. <code>app.component</code> in this case.</p>