augury_package.ts

// how augury could be loaded in a user's app...
@NgModule({
  declarations: [
    // ...
  ],
  imports: [
    AuguryWrapperModule, // ignore these stupid names :)
    BrowserModule,
    // ...
  ],
  providers: [],
  bootstrap: [AppComponent, AuguryWrapper], // also put `<augury-ui></augury-ui>` in index.html

})
export class AppModule { }

// Augury opened in a popup...
  private popout = () => {
    const popup = window.open(null, 'Augury UI', 'menubar=no,location=no,resizable=yes,scrollbars=no,status=no');
    popup.document.write(require('to-string-loader!./index.html'));
    popup._auguryParser = this.parser;
    // inject Augury UI app and it will use the parser on the window object...
  };

// Augury wrapper module...
@NgModule({
  imports: [
    BrowserModule,
    RouterModule.forRoot([
      {
        path: 'main',
        loadChildren: './module#AuguryModule'
      }
    ])
  ],
  declarations: [
    AuguryWrapper,
  ],
  providers: [
  ],
  bootstrap: []
})
export class AuguryWrapperModule {}

// Augury inner module...
@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    RouterModule.forChild([
      {
        path: '',
        component: AuguryUIComponent,
      },
    ])
  ],
  declarations: [
    AuguryUIComponent,
    // ...
  ],
  providers: [
    Options,
    UserActions,
    ComponentViewState,
    ComponentPropertyState,
    {
      provide: AuguryServer,
      useValue: (<any>window)._auguryParser ?
        (<any>window)._auguryParser : new AuguryParser()
    },
    { provide: ErrorHandler, useClass: UncaughtErrorHandler },
  ],
  bootstrap: []
})
export class AuguryModule {}