javascript - 如何在 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 的 Angular 文档中描述的 NO_ERRORS_SCHEMA，但我仍然看到相同的模板错误。

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

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

我的根模块“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 创建一个虚拟指令。

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