如何在angular2模板中使用electron的webview html元素?

How can I use Electron's webview html element inside an angular2 template?

本文关键字:electron webview html 元素 angular2      更新时间:2023-09-26

我看到这个问题:如何使用电子's <在Angular2应用中?>

它让我越过了最初的错误但是现在我看到了

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,并尝试了angular文档中为NgModule描述的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.');
    }
  }
}

你知道我哪里做错了吗?一旦我解决了这个模板问题,这个还能用吗?

任何方向都是感激的。我正在按照我能找到的说明操作,但它仍然不起作用。提前感谢!

为webview创建一个虚拟指令。

import { Directive } from '@angular/core';
@Directive({
    selector: 'webview'
})
/** Dummy directive to allow html-tag 'webview' */
export class WebviewDirective {}

并把它添加到你的AppModule declarations数组中:

...
import { WebviewDirective } from './webview.directive';
@NgModule({
    imports: [...],
    declarations: [..., WebviewDirective],
    providers: [...],
    bootstrap: [...]
})
export class AppModule {}

感谢Philipp的回答:https://stackoverflow.com/a/39290383/6028371

我的测试一定有问题。上面的代码在重新构建项目后工作,webview元素在电子上下文中做了它需要做的事情。