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

Question

我看到了這樣一個問題：How to use Electron's <webview> within Angular2 app?

而且它讓我過去我最初的錯誤，但現在我看到

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) 

我加CUSTOM_ELEMENTS_SCHEMA到我的根模塊和發揮其他模塊都在這裏以及作爲嘗試在NgModule的角度文檔中描述的NO_ERRORS_SCHEMA，但我仍然看到相同的模板錯誤。

該項目有很多文件，我不會在這裏列出所有文件，但可隨時索取任何您認爲相關的內容。

這是從angular2先進的種子在https://github.com/NathanWalker/angular-seed-advanced

我的根模塊內置 '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 { } 

這裏是我的子模塊，事件模塊：

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

任何線索我在做什麼錯在這裏？一旦我解決了這個模板問題，這個工作甚至會起作用嗎？

任何方向都是值得讚賞的。我遵循我可以找到的指示，但仍然無法使用。提前致謝！

Answer 1

一定有一些問題，我的測試。上面的代碼在重建項目後工作，並且webview元素完成它在電子環境中需要做的事情。

Answer 2

爲webview創建一個僞指令。

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

@Directive({ 
    selector: 'webview' 
}) 

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

，並把它添加到您的AppModule聲明數組：

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

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

export class AppModule {} 

貸Philipp他的回答：https://stackoverflow.com/a/39290383/6028371