Question

我使用带有angular-4的谷歌搜索API Google api脚本使用其自定义元素，在编译时抛出错误，有没有办法忽略此错误？

我的模板如下：

<div style="width: 90%;opacity:.70;float: left;clear: both; z-index: 1000">
      <div id="googSrch" style="width: 90%;float: left;">
        <gcse:searchbox></gcse:searchbox>
      </div>
      <button id="closeGoogRslt" style="width:10%;height:30px;background-color: #ff8586;float: right;display: none;">Close Result</button>
      <div id="googRslt" style="display: none;clear: both;">
        <div style="overflow: auto;max-height: 200px;">
          <gcse:searchresults></gcse:searchresults>
        </div>
      </div>
    </div>

但解析后会出现以下错误：

Unhandled Promise rejection: Template parse errors:
':gcse:searchbox' is not a known element:
1. If ':gcse:searchbox' is an Angular component, then verify that it is part of this module.
2. To allow any element add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("ft;clear: both; z-index: 1000">
      <div id="googSrch" style="width: 90%;float: left;">
        [ERROR ->]<gcse:searchbox></gcse:searchbox>
      </div>
      <button id="closeGoogRslt" style="width:10%;he"): ng:///AppModule/Dashboard.html@31:8
':gcse:searchresults' is not a known element:
1. If ':gcse:searchresults' is an Angular component, then verify that it is part of this module.
2. To allow any element add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("e="display: none;clear: both;">
        <div style="overflow: auto;max-height: 200px;">
          [ERROR ->]<gcse:searchresults></gcse:searchresults>
        </div>
      </div>
"): ng:///AppModule/Dashboard.html@36:10 ; Zone: <root> ; Task: Promise.then ; Value: Error: Template parse errors:
':gcse:searchbox' is not a known element:
1. If ':gcse:searchbox' is an Angular component, then verify that it is part of this module.
2. To allow any element add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("ft;clear: both; z-index: 1000">
      <div id="googSrch" style="width: 90%;float: left;">
        [ERROR ->]<gcse:searchbox></gcse:searchbox>
      </div>
      <button id="closeGoogRslt" style="width:10%;he"): ng:///AppModule/Dashboard.html@31:8
':gcse:searchresults' is not a known element:
1. If ':gcse:searchresults' is an Angular component, then verify that it is part of this module.
2. To allow any element add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("e="display: none;clear: both;">
        <div style="overflow: auto;max-height: 200px;">
          [ERROR ->]<gcse:searchresults></gcse:searchresults>
        </div>
      </div>
"): ng:///AppModule/Dashboard.html@36:10
    at syntaxError (http://localhost:4200/vendor.bundle.js:38981:34)
    at TemplateParser.parse (http://localhost:4200/vendor.bundle.js:49472:19)
    at JitCompiler._compileTemplate (http://localhost:4200/vendor.bundle.js:63223:39)
    at http://localhost:4200/vendor.bundle.js:63147:62
    at Set.forEach (native)
    at JitCompiler._compileComponents (http://localhost:4200/vendor.bundle.js:63147:19)
    at createResult (http://localhost:4200/vendor.bundle.js:63032:19)
    at ZoneDelegate.invoke (http://localhost:4200/polyfills.bundle.js:2953:26)
    at Zone.run (http://localhost:4200/polyfills.bundle.js:2703:43)
    at http://localhost:4200/polyfills.bundle.js:3379:57 Error: Template parse errors:
':gcse:searchbox' is not a known element:
1. If ':gcse:searchbox' is an Angular component, then verify that it is part of this module.
2. To allow any element add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("ft;clear: both; z-index: 1000">
      <div id="googSrch" style="width: 90%;float: left;">
        [ERROR ->]<gcse:searchbox></gcse:searchbox>
      </div>
      <button id="closeGoogRslt" style="width:10%;he"): ng:///AppModule/Dashboard.html@31:8
':gcse:searchresults' is not a known element:
1. If ':gcse:searchresults' is an Angular component, then verify that it is part of this module.
2. To allow any element add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("e="display: none;clear: both;">
        <div style="overflow: auto;max-height: 200px;">
          [ERROR ->]<gcse:searchresults></gcse:searchresults>
        </div>
      </div>
"): ng:///AppModule/Dashboard.html@36:10
    at syntaxError (http://localhost:4200/vendor.bundle.js:38981:34)
    at TemplateParser.parse (http://localhost:4200/vendor.bundle.js:49472:19)
    at JitCompiler._compileTemplate (http://localhost:4200/vendor.bundle.js:63223:39)
    at http://localhost:4200/vendor.bundle.js:63147:62
    at Set.forEach (native)
    at JitCompiler._compileComponents (http://localhost:4200/vendor.bundle.js:63147:19)
    at createResult (http://localhost:4200/vendor.bundle.js:63032:19)
    at ZoneDelegate.invoke (http://localhost:4200/polyfills.bundle.js:2953:26)
    at Zone.run (http://localhost:4200/polyfills.bundle.js:2703:43)
    at http://localhost:4200/polyfills.bundle.js:3379:57
api.onUnhandledError @ zone.js:642
handleUnhandledRejection @ zone.js:666
_loop_1 @ zone.js:657
api.microtaskDrainDone @ zone.js:661
drainMicroTaskQueue @ zone.js:592
zone.js:644 Error: Uncaught (in promise): Error: Template parse errors:
':gcse:searchbox' is not a known element:
1. If ':gcse:searchbox' is an Angular component, then verify that it is part of this module.
2. To allow any element add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("ft;clear: both; z-index: 1000">
      <div id="googSrch" style="width: 90%;float: left;">
        [ERROR ->]<gcse:searchbox></gcse:searchbox>
      </div>
      <button id="closeGoogRslt" style="width:10%;he"): ng:///AppModule/Dashboard.html@31:8
':gcse:searchresults' is not a known element:
1. If ':gcse:searchresults' is an Angular component, then verify that it is part of this module.
2. To allow any element add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("e="display: none;clear: both;">
        <div style="overflow: auto;max-height: 200px;">
          [ERROR ->]<gcse:searchresults></gcse:searchresults>
        </div>
      </div>
"): ng:///AppModule/Dashboard.html@36:10
Error: Template parse errors:
':gcse:searchbox' is not a known element:
1. If ':gcse:searchbox' is an Angular component, then verify that it is part of this module.
2. To allow any element add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("ft;clear: both; z-index: 1000">
      <div id="googSrch" style="width: 90%;float: left;">
        [ERROR ->]<gcse:searchbox></gcse:searchbox>
      </div>
      <button id="closeGoogRslt" style="width:10%;he"): ng:///AppModule/Dashboard.html@31:8
':gcse:searchresults' is not a known element:
1. If ':gcse:searchresults' is an Angular component, then verify that it is part of this module.
2. To allow any element add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("e="display: none;clear: both;">
        <div style="overflow: auto;max-height: 200px;">
          [ERROR ->]<gcse:searchresults></gcse:searchresults>
        </div>
      </div>
"): ng:///AppModule/Dashboard.html@36:10
    at syntaxError (http://localhost:4200/vendor.bundle.js:38981:34)
    at TemplateParser.parse (http://localhost:4200/vendor.bundle.js:49472:19)
    at JitCompiler._compileTemplate (http://localhost:4200/vendor.bundle.js:63223:39)
    at http://localhost:4200/vendor.bundle.js:63147:62
    at Set.forEach (native)
    at JitCompiler._compileComponents (http://localhost:4200/vendor.bundle.js:63147:19)
    at createResult (http://localhost:4200/vendor.bundle.js:63032:19)
    at ZoneDelegate.invoke (http://localhost:4200/polyfills.bundle.js:2953:26)
    at Zone.run (http://localhost:4200/polyfills.bundle.js:2703:43)
    at http://localhost:4200/polyfills.bundle.js:3379:57
    at syntaxError (http://localhost:4200/vendor.bundle.js:38981:34)
    at TemplateParser.parse (http://localhost:4200/vendor.bundle.js:49472:19)
    at JitCompiler._compileTemplate (http://localhost:4200/vendor.bundle.js:63223:39)
    at http://localhost:4200/vendor.bundle.js:63147:62
    at Set.forEach (native)
    at JitCompiler._compileComponents (http://localhost:4200/vendor.bundle.js:63147:19)
    at createResult (http://localhost:4200/vendor.bundle.js:63032:19)
    at ZoneDelegate.invoke (http://localhost:4200/polyfills.bundle.js:2953:26)
    at Zone.run (http://localhost:4200/polyfills.bundle.js:2703:43)
    at http://localhost:4200/polyfills.bundle.js:3379:57
    at resolvePromise (http://localhost:4200/polyfills.bundle.js:3331:31)
    at resolvePromise (http://localhost:4200/polyfills.bundle.js:3302:17)
    at http://localhost:4200/polyfills.bundle.js:3379:17
    at ZoneDelegate.invokeTask (http://localhost:4200/polyfills.bundle.js:2986:31)
    at Zone.runTask (http://localhost:4200/polyfills.bundle.js:2753:47)
    at drainMicroTaskQueue (http://localhost:4200/polyfills.bundle.js:3146:35)
    at <anonymous>

Answer 1

我知道有三种方法可以解决它：

1）使用NO_ERRORS_SCHEMA

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

@NgModule({
  imports:      [ BrowserModule ],
  declarations: [ AppComponent ],
  schemas:      [ NO_ERRORS_SCHEMA ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

CUSTOM_ELEMENTS_SCHEMA无效，因为：

CUSTOM_ELEMENTS_SCHEMA允许任何custom-tag（当您拥有:custom:tag）时拥有任何财产，
NO_ERRORS_SCHEMA允许任何标记和任何属性

2）覆盖ElementSchemaRegistry

import { DomElementSchemaRegistry, ElementSchemaRegistry } from '@angular/compiler'
import { SchemaMetadata } from '@angular/core';

const MY_DOM_ELEMENT_SCHEMA = [
  ':gcse:searchresults'
];  

export class CustomDomElementSchemaRegistry extends DomElementSchemaRegistry {
  constructor() {
    super();
  }

  hasElement(tagName: string, schemaMetas: SchemaMetadata[]): boolean {
    return MY_DOM_ELEMENT_SCHEMA.indexOf(tagName) > -1 ||
      super.hasElement(tagName, schemaMetas);
  }
}

platformBrowserDynamic().bootstrapModule(AppModule, {
  providers: [{ provide: ElementSchemaRegistry, useClass: CustomDomElementSchemaRegistry }]
});

<强> Plunker Example

3）等到问题https://github.com/angular/angular/issues/12045解决

Answer 2

在jsp文件上

<div id="searchbox"></div>
<div id="searchresults"></div>

在ts文件上

ngAfterViewInit() {
    this.loadScriptsSearchBox();
    this.loadScriptsSearchResults();
  }
  loadScriptsSearchResults(): any {

    var gcseDiv = document.getElementById('searchresults');
    gcseDiv.innerHTML = '<gcse:searchresults-only></gcse:searchresults-only>'

    var cx = 'partner-pub-XXXX';
    var gcse = document.createElement('script');
    gcse.type = 'text/javascript';
    gcse.async = true;
    gcse.src = 'https://cse.google.com/cse.js?cx=' + cx;
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(gcse, s);

  }
  loadScriptsSearchBox(): any {


    var gcseDiv = document.getElementById('searchbox');
    gcseDiv.innerHTML = '<gcse:searchbox-only></gcse:searchbox-only>'

    var cx = 'partner-pub-XXXX';
    var gcse = document.createElement('script');
    gcse.type = 'text/javascript';
    gcse.async = true;
    gcse.src = 'https://cse.google.com/cse.js?cx=' + cx;
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(gcse, s);


  }

如何忽略＆＃34;未处理的承诺拒绝：模板解析错误：＆＃39;：gcse：searchbox＆＃39;不是一个已知的元素＆＃34;

2 个答案: