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

Question

我看到这个问题：How to use Electron's <webview> inside Angular2 app?

\n\n

它让我克服了最初的错误，但现在我看到了

\n\n

zone.js?1478729974810:355 Unhandled Promise rejection: Template parse errors:\n\'webview\' is not a known element:\n1. If \'webview\' is an Angular component, then verify that it is part of this module.\n2. 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-->\n            [ERROR ->]<webview id="inlinePaper" attr.src="{{paper.url | path}}" disablewebsecurity></webview>\n        </div"): PaperComponent@45:12 ; Zone: <root> ; Task: Promise.then ; Value: Error: Template parse errors:(\xe2\x80\xa6) Error: Template parse errors:\n\'webview\' is not a known element:\n1. If \'webview\' is an Angular component, then verify that it is part of this module.\n2. 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-->\n            [ERROR ->]<webview id="inlinePaper" attr.src="{{paper.url | path}}" disablewebsecurity></webview>\n        </div"): PaperComponent@45:12\n    at TemplateParser.parse (http://localhost:5555/node_modules/@angular/compiler/bundles/compiler.umd.js:7711:21)\n    at RuntimeCompiler._compileTemplate (http://localhost:5555/node_modules/@angular/compiler/bundles/compiler.umd.js:17193:53)\n    at eval (http://localhost:5555/node_modules/@angular/compiler/bundles/compiler.umd.js:17098:85)\n    at Set.forEach (native)\n    at compile (http://localhost:5555/node_modules/@angular/compiler/bundles/compiler.umd.js:17098:49)\n    at ZoneDelegate.invoke (http://localhost:5555/node_modules/zone.js/dist/zone.js?1478729974810:203:28)\n    at Zone.run (http://localhost:5555/node_modules/zone.js/dist/zone.js?1478729974810:96:43)\n    at http://localhost:5555/node_modules/zone.js/dist/zone.js?1478729974810:462:57\n    at ZoneDelegate.invokeTask (http://localhost:5555/node_modules/zone.js/dist/zone.js?1478729974810:236:37)\n    at Zone.runTask (http://localhost:5555/node_modules/zone.js/dist/zone.js?1478729974810:136:47)\n

\n\n

我将 CUSTOM_ELEMENTS_SCHEMA 添加到我的根模块和此处使用的其他模块，并尝试 NgModule 的角度文档中描述的 NO_ERRORS_SCHEMA 但我仍然看到相同的模板错误。

\n\n

这个项目有很多文件，我不会在这里列出所有文件，但请随意询问您可能认为相关的任何文件。

\n\n

这是根据https://github.com/NathanWalker/angular-seed-advanced的 angular2 高级种子构建的

\n\n

我的根模块\'web.module.ts\'：

\n\n

// angular\nimport { NgModule, NO_ERRORS_SCHEMA } from \'@angular/core\';\nimport { APP_BASE_HREF } from \'@angular/common\';\nimport { BrowserModule } from \'@angular/platform-browser\';\nimport { RouterModule } from \'@angular/router\';\nimport { Http } from \'@angular/http\';\n\n// libs\nimport { StoreModule } from \'@ngrx/store\';\nimport { EffectsModule } from \'@ngrx/effects\';\nimport { TranslateLoader } from \'ng2-translate\';\n\n// app\nimport { AppComponent } from \'./app/components/app.component\';\nimport { ToolbarComponent } from \'./app/components/toolbar/toolbar.component\';\nimport { HomeComponent } from \'./app/components/home/home.component\';\nimport { routes } from \'./app/components/app.routes\';\n\n// feature modules\nimport { CoreModule } from \'./app/frameworks/core/core.module\';\nimport { AnalyticsModule } from \'./app/frameworks/analytics/analytics.module\';\nimport { multilingualReducer, MultilingualEffects } from \'./app/frameworks/i18n/index\';\nimport { MultilingualModule, translateFactory } from \'./app/frameworks/i18n/multilingual.module\';\nimport { SampleModule } from \'./app/frameworks/sample/sample.module\';\nimport { EventModule } from \'./app/components/event/event.module\';\n\n// config\nimport { Config, WindowService, ConsoleService, EventService } from \'./app/frameworks/core/index\';\nConfig.PLATFORM_TARGET = Config.PLATFORMS.WEB;\nif (String(\'<%= ENV %>\') === \'dev\') {\n  // only output console logging in dev mode\n  Config.DEBUG.LEVEL_4 = true;\n}\n\n// sample config (extra)\nimport { AppConfig } from \'./app/frameworks/sample/services/app-config\';\nimport { MultilingualService } from \'./app/frameworks/i18n/services/multilingual.service\';\n// custom i18n language support\nMultilingualService.SUPPORTED_LANGUAGES = AppConfig.SUPPORTED_LANGUAGES;\n\nlet routerModule = RouterModule.forRoot(routes);\n\nif (String(\'<%= TARGET_DESKTOP %>\') === \'true\') {\n  Config.PLATFORM_TARGET = Config.PLATFORMS.DESKTOP;\n  // desktop (electron) must use hash\n  routerModule = RouterModule.forRoot(routes, {useHash: true});\n}\n\ndeclare var window, console;\n\n// For AoT compilation to work:\nexport function win() {\n  return window;\n}\nexport function cons() {\n  return console;\n}\n\n@NgModule({\n  imports: [\n    BrowserModule,\n    CoreModule.forRoot([\n      { provide: WindowService, useFactory: (win) },\n      { provide: ConsoleService, useFactory: (cons) }\n    ]),\n    routerModule,\n    AnalyticsModule,\n    MultilingualModule.forRoot([{\n      provide: TranslateLoader,\n      deps: [Http],\n      useFactory: (translateFactory)\n    }]),\n    StoreModule.provideStore({\n      i18n: multilingualReducer,\n    }),\n    EventModule\n  ],\n  declarations: [\n    AppComponent,\n    HomeComponent,\n    ToolbarComponent\n  ],\n  providers: [\n    {\n      provide: APP_BASE_HREF,\n      useValue: \'<%= APP_BASE %>\'\n    },\n    EventService\n  ],\n  bootstrap: [AppComponent],\n  schemas: [NO_ERRORS_SCHEMA]\n})\n\nexport class WebModule { }\n

\n\n

这是我的子模块事件模块：

\n\n

// angular\nimport { NgModule, ModuleWithProviders, Optional, SkipSelf, NO_ERRORS_SCHEMA } from \'@angular/core\';\nimport { CommonModule } from \'@angular/common\';\nimport { FormsModule } from \'@angular/forms\';\nimport { RouterModule } from \'@angular/router\';\nimport { HttpModule } from \'@angular/http\';\n\nimport { eventComponent } from \'./event.component\';\nimport { EventDetailsComponent } from \'./details/event.details.component\';\nimport { EventNavigationComponent } from \'./navigation/event.navigation.component\';\nimport { EventAlphanavComponent } from \'./navigation/event.alphanav.component\';\nimport { EventTrackComponent } from \'./index-track/event.track.component\';\nimport { EventScheduleComponent } from \'./index-schedule/event.schedule.component\';\nimport { EventAlphaComponent } from \'./index-alpha/event.alpha.component\';\nimport { EventAuthorComponent } from \'./index-author/event.author.component\';\nimport { EventAuthorListComponent } from \'./index-author/list/event.author.list.component\';\nimport { EventSponsorComponent } from \'./sponsors/event.sponsor.component\';\nimport { EventExhibitorComponent } from \'./exhibitors/event.exhibitor.component\';\nimport { EventActivitiesComponent } from \'./activities/event.activities.component\';\nimport { PaperComponent } from \'./paper/paper.component\';\n\n// libs\nimport { StoreModule } from \'@ngrx/store\';\n\n// app\nimport { Config, WindowService, ConsoleService, EventService, Path } from \'../../frameworks/core/index\';\n\n// state\n\n/**\n * Do not specify providers for modules that might be imported by a lazy loaded module.\n */\n\n@NgModule({\n  imports: [\n    CommonModule,\n    HttpModule,\n    RouterModule,\n    StoreModule\n  ],\n  schemas: [ NO_ERRORS_SCHEMA ],\n  declarations: [\n    eventComponent,\n    EventDetailsComponent,\n    EventNavigationComponent,\n    EventAlphanavComponent,\n    EventTrackComponent,\n    EventScheduleComponent,\n    EventAlphaComponent,\n    EventAuthorComponent,\n    EventAuthorListComponent,\n    EventSponsorComponent,\n    EventExhibitorComponent,\n    EventActivitiesComponent,\n    PaperComponent,\n    Path\n  ]\n})\nexport class EventModule {\n\n  constructor(@Optional() @SkipSelf() parentModule: EventModule) {\n    if (parentModule) {\n      throw new Error(\'SampleModule already loaded; Import in root module only.\');\n    }\n  }\n}\n

\n\n

知道我在这里做错了什么吗？一旦我解决了这个模板问题，这还能工作吗？

\n\n

任何方向都是值得赞赏的。我正在按照我能找到的说明进行操作，但它仍然无法正常工作。提前致谢！

\n

Answer 1

为 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 {}

感谢菲利普的回答：/sf/answers/2750326841/