如何在angular2模板中使用Electron的webview html元素？

Question

I saw this question: How to use Electron's <webview> within Angular2 app?

And it got me past my initial error but now I'm seeing

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"></pdf-viewer-->
            [ERROR ->]<webview id="inlinePaper" attr.src="{{paper.url | path}}" disablewebsecurity></webview>
        </div"): PaperComponent@45:12 ; Zone: <root> ; 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"></pdf-viewer-->
            [ERROR ->]<webview id="inlinePaper" attr.src="{{paper.url | path}}" disablewebsecurity></webview>
        </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)

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.

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.

This was built from the angular2 advanced seed at https://github.com/NathanWalker/angular-seed-advanced

My root module 'web.module.ts':

// 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('<%= ENV %>') === '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('<%= TARGET_DESKTOP %>') === '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: '<%= APP_BASE %>'
    },
    EventService
  ],
  bootstrap: [AppComponent],
  schemas: [NO_ERRORS_SCHEMA]
})

export class WebModule { }

Here is my sub module the event module:

// 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.');
    }
  }
}

Any clue what I'm doing wrong here? Will this even work once I have this template problem worked out?

Any direction at all is appreciated. I'm following what instructions I can find but it's still not working. Thanks in advance!

Answer 1

Create a dummy directive for webview.

import { Directive } from '@angular/core';

@Directive({
    selector: 'webview'
})

/** Dummy directive to allow html-tag 'webview' */
export class WebviewDirective {}

and add it to your AppModule declarations array:

...
import { WebviewDirective } from './webview.directive';

@NgModule({
    imports: [...],
    declarations: [..., WebviewDirective],
    providers: [...],
    bootstrap: [...]
})

export class AppModule {}

Credits to Philipp for his answer: https://stackoverflow.com/a/39290383/6028371

Answer 2

There must have been some problem with my testing. The above code worked after rebuilding the project and the webview element does what it needs to do in the electron context.