title: How can I use Electron's webview html element inside an angular2 template?
body: <p>I saw this question: <a href="https://stackoverflow.com/questions/37793412/how-to-use-electrons-webview-within-angular2-app">How to use Electron&#39;s &lt;webview&gt; within Angular2 app?</a></p>
  
  <p>And it got me past my initial error but now I'm seeing</p>
  
  <pre><code>zone.js?1478729974810:355 Unhandled Promise rejection: Template parse errors:
  'webview' is not a known element:
  1. If 'webview' is an Angular component, then verify that it is part of this module.
  2. If 'webview' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message. ("url" [src]="paper.url | path" [original-size]="false" [show-all]="true"&gt;&lt;/pdf-viewer--&gt;
              [ERROR -&gt;]&lt;webview id="inlinePaper" attr.src="{{paper.url | path}}" disablewebsecurity&gt;&lt;/webview&gt;
          &lt;/div"): PaperComponent@45:12 ; Zone: &lt;root&gt; ; Task: Promise.then ; Value: Error: Template parse errors:(…) Error: Template parse errors:
  'webview' is not a known element:
  1. If 'webview' is an Angular component, then verify that it is part of this module.
  2. If 'webview' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message. ("url" [src]="paper.url | path" [original-size]="false" [show-all]="true"&gt;&lt;/pdf-viewer--&gt;
              [ERROR -&gt;]&lt;webview id="inlinePaper" attr.src="{{paper.url | path}}" disablewebsecurity&gt;&lt;/webview&gt;
          &lt;/div"): PaperComponent@45:12
      at TemplateParser.parse (http://localhost:5555/node_modules/@angular/compiler/bundles/compiler.umd.js:7711:21)
      at RuntimeCompiler._compileTemplate (http://localhost:5555/node_modules/@angular/compiler/bundles/compiler.umd.js:17193:53)
      at eval (http://localhost:5555/node_modules/@angular/compiler/bundles/compiler.umd.js:17098:85)
      at Set.forEach (native)
      at compile (http://localhost:5555/node_modules/@angular/compiler/bundles/compiler.umd.js:17098:49)
      at ZoneDelegate.invoke (http://localhost:5555/node_modules/zone.js/dist/zone.js?1478729974810:203:28)
      at Zone.run (http://localhost:5555/node_modules/zone.js/dist/zone.js?1478729974810:96:43)
      at http://localhost:5555/node_modules/zone.js/dist/zone.js?1478729974810:462:57
      at ZoneDelegate.invokeTask (http://localhost:5555/node_modules/zone.js/dist/zone.js?1478729974810:236:37)
      at Zone.runTask (http://localhost:5555/node_modules/zone.js/dist/zone.js?1478729974810:136:47)
  </code></pre>
  
  <p>I added CUSTOM_ELEMENTS_SCHEMA to both my root module and the other module in play here as well as trying the NO_ERRORS_SCHEMA described in the angular documentation for NgModule but I'm still seeing this same template error.</p>
  
  <p>This project has a lot of files and I won't list them all here but feel free to ask for whatever you might feel relevant.</p>
  
  <p>This was built from the angular2 advanced seed at <a href="https://github.com/NathanWalker/angular-seed-advanced" rel="nofollow noreferrer">https://github.com/NathanWalker/angular-seed-advanced</a></p>
  
  <p>My root module 'web.module.ts':</p>
  
  <pre><code>// angular
  import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
  import { APP_BASE_HREF } from '@angular/common';
  import { BrowserModule } from '@angular/platform-browser';
  import { RouterModule } from '@angular/router';
  import { Http } from '@angular/http';
  
  // libs
  import { StoreModule } from '@ngrx/store';
  import { EffectsModule } from '@ngrx/effects';
  import { TranslateLoader } from 'ng2-translate';
  
  // app
  import { AppComponent } from './app/components/app.component';
  import { ToolbarComponent } from './app/components/toolbar/toolbar.component';
  import { HomeComponent } from './app/components/home/home.component';
  import { routes } from './app/components/app.routes';
  
  // feature modules
  import { CoreModule } from './app/frameworks/core/core.module';
  import { AnalyticsModule } from './app/frameworks/analytics/analytics.module';
  import { multilingualReducer, MultilingualEffects } from './app/frameworks/i18n/index';
  import { MultilingualModule, translateFactory } from './app/frameworks/i18n/multilingual.module';
  import { SampleModule } from './app/frameworks/sample/sample.module';
  import { EventModule } from './app/components/event/event.module';
  
  // config
  import { Config, WindowService, ConsoleService, EventService } from './app/frameworks/core/index';
  Config.PLATFORM_TARGET = Config.PLATFORMS.WEB;
  if (String('&lt;%= ENV %&gt;') === 'dev') {
    // only output console logging in dev mode
    Config.DEBUG.LEVEL_4 = true;
  }
  
  // sample config (extra)
  import { AppConfig } from './app/frameworks/sample/services/app-config';
  import { MultilingualService } from './app/frameworks/i18n/services/multilingual.service';
  // custom i18n language support
  MultilingualService.SUPPORTED_LANGUAGES = AppConfig.SUPPORTED_LANGUAGES;
  
  let routerModule = RouterModule.forRoot(routes);
  
  if (String('&lt;%= TARGET_DESKTOP %&gt;') === 'true') {
    Config.PLATFORM_TARGET = Config.PLATFORMS.DESKTOP;
    // desktop (electron) must use hash
    routerModule = RouterModule.forRoot(routes, {useHash: true});
  }
  
  declare var window, console;
  
  // For AoT compilation to work:
  export function win() {
    return window;
  }
  export function cons() {
    return console;
  }
  
  @NgModule({
    imports: [
      BrowserModule,
      CoreModule.forRoot([
        { provide: WindowService, useFactory: (win) },
        { provide: ConsoleService, useFactory: (cons) }
      ]),
      routerModule,
      AnalyticsModule,
      MultilingualModule.forRoot([{
        provide: TranslateLoader,
        deps: [Http],
        useFactory: (translateFactory)
      }]),
      StoreModule.provideStore({
        i18n: multilingualReducer,
      }),
      EventModule
    ],
    declarations: [
      AppComponent,
      HomeComponent,
      ToolbarComponent
    ],
    providers: [
      {
        provide: APP_BASE_HREF,
        useValue: '&lt;%= APP_BASE %&gt;'
      },
      EventService
    ],
    bootstrap: [AppComponent],
    schemas: [NO_ERRORS_SCHEMA]
  })
  
  export class WebModule { }
  </code></pre>
  
  <p>Here is my sub module the event module:</p>
  
  <pre><code>// angular
  import { NgModule, ModuleWithProviders, Optional, SkipSelf, NO_ERRORS_SCHEMA } from '@angular/core';
  import { CommonModule } from '@angular/common';
  import { FormsModule } from '@angular/forms';
  import { RouterModule } from '@angular/router';
  import { HttpModule } from '@angular/http';
  
  import { eventComponent } from './event.component';
  import { EventDetailsComponent } from './details/event.details.component';
  import { EventNavigationComponent } from './navigation/event.navigation.component';
  import { EventAlphanavComponent } from './navigation/event.alphanav.component';
  import { EventTrackComponent } from './index-track/event.track.component';
  import { EventScheduleComponent } from './index-schedule/event.schedule.component';
  import { EventAlphaComponent } from './index-alpha/event.alpha.component';
  import { EventAuthorComponent } from './index-author/event.author.component';
  import { EventAuthorListComponent } from './index-author/list/event.author.list.component';
  import { EventSponsorComponent } from './sponsors/event.sponsor.component';
  import { EventExhibitorComponent } from './exhibitors/event.exhibitor.component';
  import { EventActivitiesComponent } from './activities/event.activities.component';
  import { PaperComponent } from './paper/paper.component';
  
  // libs
  import { StoreModule } from '@ngrx/store';
  
  // app
  import { Config, WindowService, ConsoleService, EventService, Path } from '../../frameworks/core/index';
  
  // state
  
  /**
   * Do not specify providers for modules that might be imported by a lazy loaded module.
   */
  
  @NgModule({
    imports: [
      CommonModule,
      HttpModule,
      RouterModule,
      StoreModule
    ],
    schemas: [ NO_ERRORS_SCHEMA ],
    declarations: [
      eventComponent,
      EventDetailsComponent,
      EventNavigationComponent,
      EventAlphanavComponent,
      EventTrackComponent,
      EventScheduleComponent,
      EventAlphaComponent,
      EventAuthorComponent,
      EventAuthorListComponent,
      EventSponsorComponent,
      EventExhibitorComponent,
      EventActivitiesComponent,
      PaperComponent,
      Path
    ]
  })
  export class EventModule {
  
    constructor(@Optional() @SkipSelf() parentModule: EventModule) {
      if (parentModule) {
        throw new Error('SampleModule already loaded; Import in root module only.');
      }
    }
  }
  </code></pre>
  
  <p>Any clue what I'm doing wrong here? Will this even work once I have this template problem worked out?</p>
  
  <p>Any direction at all is appreciated. I'm following what instructions I can find but it's still not working. Thanks in advance!</p>