I'm using google search api with angular-4 Google api script uses its custom element which is throwing error while compiling, is there any way to ignore this error?
my template is as follows:
<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>
but after parsing it gives following error:
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>
I know three options to solve it:
1) Using 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 won't work because:
CUSTOM_ELEMENTS_SCHEMA allows any custom-tag(while you have :custom:tag) with any property,NO_ERRORS_SCHEMA allows any tag and any property2) Override 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 }]
});
3) Wait until issue https://github.com/angular/angular/issues/12045 is solved