Wie ignoriere ich "Unhandled Promise Ablehnung: Template Parse Fehler: ': gcse: searchbox' ist kein bekanntes Element"

Question

Ich benutze google search api mit angular-4 Google API-Skript verwendet sein benutzerdefiniertes Element, das Fehler wirft Gibt es beim Kompilieren eine Möglichkeit, diesen Fehler zu ignorieren?

meine Vorlage ist wie folgt:

<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> 

aber nach dem Parsen gibt es folgende Fehlermeldung:

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

Ich weiß, drei Möglichkeiten, es zu lösen:

1) Mit 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 wird nicht funktionieren, weil:

• CUSTOM_ELEMENTS_SCHEMA jede custom-tag ermöglicht mit jedem Objekt (während Sie :custom:tag haben),
• NO_ERRORS_SCHEMA erlaubt einen beliebigen Tag und jede Eigenschaft

2) außer Kraft setzen 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) Warten Sie, bis Ausgabe https://github.com/angular/angular/issues/12045 gelöst