title: ngOnInit not firing when opening dialog
body: <p>When opening the dialog, <code>ngOnInit</code> is not being called. The only way I can get it to fire is when I resize the window. I tried using <code>detectChanges</code> and <code>zone.run()</code> but it did not change anything.</p>
  
  <p>Here is the code for the dialog component:</p>
  
  <pre><code>(settings-dialog.component.ts)
  
  import { Component, OnInit } from '@angular/core';
  import { ElectronService } from '../../providers/electron.service';
  
  @Component({
    selector: 'app-settings-dialog',
    templateUrl: './settings-dialog.component.html',
    styleUrls: ['./settings-dialog.component.scss']
  })
  export class SettingsDialogComponent implements OnInit {
    public settings;
  
    constructor(
      private electronService: ElectronService,
    ) { }
  
    ngOnInit(): void {
      console.log('Getting settings');
      this.getSettings();
    }
  
    private getSettings() {
      this.settings = this.electronService.settings.getAll();
      console.log(this.settings);
    }
  }
  </code></pre>
  
  <pre><code>(settings-dialog.module.ts)
  import { CommonModule } from '@angular/common';
  import { NgModule } from '@angular/core';
  
  import { SettingsDialogComponent } from './settings-dialog.component';
  
  @NgModule({
    imports: [ CommonModule ],
    providers: [ ],
    declarations: [ SettingsDialogComponent ],
    entryComponents: [ SettingsDialogComponent ]
  })
  export class SettingsDialogModule { }
  </code></pre>
  
  <p>The component is being loaded from the menu bar setup with Electron:</p>
  
  <pre><code>(app.component.ts)
  
  import { Component } from '@angular/core';
  import { MatDialog } from '@angular/material';
  import { TranslateService } from '@ngx-translate/core';
  
  import { SettingsDialogComponent } from './dialogs/settings-dialog/settings-dialog.component';
  import { ElectronService } from './providers/electron.service';
  
  @Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.scss']
  })
  export class AppComponent {
    constructor(public electronService: ElectronService, public translate: TranslateService, private dialog: MatDialog) {
      this.setupMenu();
    }
  
    private setupMenu() {
      const menu = this.electronService.remote.Menu.buildFromTemplate([{
        label: 'File',
        submenu: [{
          label: 'Settings',
          click: () =&gt; this.openSettingsDialog()
        }]
      }]);
  
      this.electronService.remote.Menu.setApplicationMenu(menu);
    }
  
    private openSettingsDialog() {
      this.dialog.open(SettingsDialogComponent);
    }
  }
  
  </code></pre>
  
  <pre><code>(app.module.ts)
  import '../polyfills';
  import 'reflect-metadata';
  
  import { HttpClient, HttpClientModule } from '@angular/common/http';
  import { NgModule } from '@angular/core';
  import { FormsModule } from '@angular/forms';
  import { MatDialogModule } from '@angular/material';
  import { BrowserModule } from '@angular/platform-browser';
  import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
  import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
  import { TranslateHttpLoader } from '@ngx-translate/http-loader';
  
  import { AppRoutingModule } from './app-routing.module';
  import { AppComponent } from './app.component';
  import { WorkspaceModule } from './components/workspace/workspace.module';
  import { SettingsDialogModule } from './dialogs/settings-dialog/settings-dialog.module';
  import { WebviewDirective } from './directives/webview.directive';
  import { ElectronService } from './providers/electron.service';
  
  // AoT requires an exported function for factories
  export function HttpLoaderFactory(http: HttpClient) {
    return new TranslateHttpLoader(http, './assets/i18n/', '.json');
  }
  
  @NgModule({
    declarations: [
      AppComponent,
      WebviewDirective
    ],
    imports: [
      BrowserModule,
      BrowserAnimationsModule,
      FormsModule,
      HttpClientModule,
      AppRoutingModule,
      TranslateModule.forRoot({
        loader: {
          provide: TranslateLoader,
          useFactory: (HttpLoaderFactory),
          deps: [HttpClient]
        }
      }),
      WorkspaceModule,
      MatDialogModule,
      SettingsDialogModule
    ],
    providers: [ElectronService],
    bootstrap: [AppComponent]
  })
  export class AppModule { }
  
  </code></pre>
  
  <p>What am I missing? What have I done wrong? (I don't might trying stuff again)</p>
  
  <p>Thanks!</p>