In an angular 4 / nodejs application, I am retrieving the following date field from MongoDB:
"2018-06-14T03:00:00.000Z"
Here is my HTML:
<div *ngIf="this.Lacador.dataAssociacao">
<p style="margin-top: 10px" type="text"> <label style="font-weight: normal"> {{ this.Lacador.dataAssociacao | date:"dd/MM/yyyy" }} </label></p>
</div>
In the screen, the date is displayed (as per image), but I have an error in the console which messes with all the scripts of the page:
ERROR Error: InvalidPipeArgument: 'function Date() { [native code] }' for pipe 'DatePipe'
at invalidPipeArgumentError (common.es5.js:2610)
at DatePipe.webpackJsonp.../../../common/#angular/common.es5.js.DatePipe.transform (common.es5.js:3506)
at checkAndUpdatePureExpressionInline (core.es5.js:11665)
at checkAndUpdateNodeInline (core.es5.js:12370)
at checkAndUpdateNode (core.es5.js:12303)
at debugCheckAndUpdateNode (core.es5.js:13167)
at debugCheckRenderNodeFn (core.es5.js:13146)
at Object.eval [as updateRenderer] (LacadoresViewComponent.html:96)
at Object.debugUpdateRenderer [as updateRenderer] (core.es5.js:13131)
at checkAndUpdateView (core.es5.js:12275)
Date displayed correctly:
Any clues on why it throws an exception, even through it formats the field as I want?
Edit: Added a missing quote.
Related
I've tried this in several different angular apps and get the same error. I've verified that the latest version of Handlebars is installed. Whenever I try to use the triple mustache {{{ }}} to render html as html within an html file, the compiler throws this error (I'm using VSCode, but the same error occurs within the stackblitz below):
Template parse errors:
Parser Error: Missing expected : at the end of the expression [{{{item}}}] in ng:///AppModule/AppComponent.html#9:37 ("DropListEnterPredicate]="enter" (cdkDropListDropped)="drop()">
<div cdkDrag class="example-box">[ERROR ->]{{{item}}}</div>
</div>
</div> "): ng:///AppModule/AppComponent.html#9:37
Parser Error: Unexpected end of expression: {{{item}}} at the end of the expression [{{{item}}}] in ng:///AppModule/AppComponent.html#9:37 ("DropListEnterPredicate]="enter" (cdkDropListDropped)="drop()">
<div cdkDrag class="example-box">[ERROR ->]{{{item}}}</div>
</div>
</div> "): ng:///AppModule/AppComponent.html#9:37
Parser Error: Missing expected } at the end of the expression [{{{item}}}] in ng:///AppModule/AppComponent.html#9:37 ("DropListEnterPredicate]="enter" (cdkDropListDropped)="drop()">
<div cdkDrag class="example-box">[ERROR ->]{{{item}}}</div>
</div>
</div> "): ng:///AppModule/AppComponent.html#9:37
I've copied a simple stackblitz, in it I've duplicated the error by putting the triple braces around the {{{item}}}.
https://stackblitz.com/edit/angular-4kmtwp
I've tried { {{ item }} }, {{ '{' }} {{ item }} {{ '}' }}, &123;&123;&123; item &125;&125;&125; but none of those render the html.
The solution was to change the line:
<div cdkDrag class="example-box">{{{item}}}</div>
to
<div cdkDrag class="example-box" [innerHtml]="item"></div>
As an additional note, if there are class names within the innerHtml that you need to style, you may need to set the encapsulation within the typescript file as ViewEncapsulation.None.
i.e. encapsulation: ViewEncapsulation.None
I am developing a simple Angular 6 application. At a certain point a 'Template parse error' appeared, literally out of nowhere: "let-" is only supported on ng-template elements. I don't use any template or ng-template in my code. Anybody with an idea?
Uncaught Error: Template parse errors:
"let-" is only supported on ng-template elements. ("
</thead>
<tbody>
<template ngFor [ngForOf]="rows" [ERROR ->]let-rowz="$implicit" let-index="index">
<tr *ngIf="!(datePicker.onlyCurrentMonth && rowz[0].sec"): ng:///DatepickerModule/DayPickerComponent.html#38:37
"let-" is only supported on ng-template elements. ("
</thead>
<tbody>
<template ngFor [ngForOf]="rows" let-rowz="$implicit" [ERROR ->]let-index="index">
<tr *ngIf="!(datePicker.onlyCurrentMonth && rowz[0].secondary && rowz[6].sec"): ng:///DatepickerModule/DayPickerComponent.html#38:58
at syntaxError (compiler.js:2547)
at TemplateParser.push../node_modules/#angular/compiler/fesm5/compiler.js.TemplateParser.parse (compiler.js:19495)
at JitCompiler.push../node_modules/#angular/compiler/fesm5/compiler.js.JitCompiler._parseTemplate (compiler.js:25041)
at JitCompiler.push../node_modules/#angular/compiler/fesm5/compiler.js.JitCompiler._compileTemplate (compiler.js:25028)
at compiler.js:24971
at Set.forEach (<anonymous>)
at JitCompiler.push../node_modules/#angular/compiler/fesm5/compiler.js.JitCompiler._compileComponents (compiler.js:24971)
at compiler.js:24881
at Object.then (compiler.js:2538)
at JitCompiler.push../node_modules/#angular/compiler/fesm5/compiler.js.JitCompiler._compileModuleAndComponents (compiler.js:24880)
If I'm not wrong you are using an *ngFor and you are trying to get the index and if that's the case try following the below example.
<div *ngFor="let element of array; let $index = index">{{$index}}</div>
And I think what you are doing is let-index = index;, which I concluded from the error trace you have uploaded. You are using an - between let and index.
The problem can be "ngx-bootstrap", try to remove it and use "ngx-bootstrap";
I am attempting to set up a ngb-datepicker to close on clicking outside of it. I am however receiving this error:
GamesComponent.html:9 ERROR TypeError: dp.close is not a function
at GamesComponent.push../src/web/apps/command-center/games/games.component.ts.GamesComponent.closeCalendar (games.component.ts:202)
at Object.eval [as handleEvent] (GamesComponent.html:12)
at handleEvent (core.js:10050)
at callWithDebugContext (core.js:11143)
at Object.debugHandleEvent [as handleEvent] (core.js:10846)
at dispatchEvent (core.js:7509)
at core.js:7953
at HTMLDocument.<anonymous> (platform-browser.js:1140)
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:421)
at Object.onInvokeTask (core.js:3748)
The relevant html is below
<ng-template #popContent class="col-lg-3 align-items-center">
<ngb-datepicker (select)="convertNgbDatetoDate($event)"
name="dp" ngbDatepicker #d="ngbDatepicker"
(blur)="onInputBlur()"
(document:click)="closeCalendar($event, d)">
</ngb-datepicker>
</ng-template>
and the ts
closeCalendar(event, dp) {
console.log(dp)
const path = event.path.map(p => p.localName);
if ((!path.includes('ngb-datepicker') && !path.includes('ng-
container') && !path.includes('gns-sentient-dates') &&
!path.includes('howser-input'))) {
dp.close();
this.onInputBlur();
}
}
Any ideas as to what I am missing?
Closing ngb-datepicker with clicking outside is an open issue of ng-bootstrap since 2016. Have a look at this issue.
Possible workarounds:
A)
use view:
(click)="d.toggle(); $event.stopPropagation();" (document:click)="d.close()"
or B)
use component:
if(!this._eref.nativeElement.querySelector('ngb-datepicker').contains(event.target)
&& !this._eref.nativeElement.querySelector('.input-group-addon').contains(event.target)) {
let self = this;
setTimeout(function(){
self.dynamicId.close();
},10);
}
or C)
use view:
<input style="background-color: white;" class="form-control" placeholder="YYYY-MM-DD" name="date" [(ngModel)]="date" ngbDatepicker #eToggle="ngbDatepicker" (click)="eToggle.toggle(); sToggle.close();$event.stopPropagation()" (document:click)="decideClosure($event, eToggle)" readonly>
and component:
decideClosure(event, datepicker) { const path = event.path.map(p => p.localName); if (!path.includes('ngb-datepicker')) { datepicker.close(); } }
This is my input box that should show date in one month.
<div class="form-group">
<label for="datum_uplate">Datum isteka:</label>
<input type="date" class="form-control" id="datum_isteka" name="datum_isteka" >
This is my jsp code, I don't want to use javascript for security reasons.
<%
LocalDateTime.now().plusMonths(1);
int months = int.Parse("datum_isteka".toString());
LocalDateTime newDate = LocalDateTime.now().plusMonths(months);
%>
And when I launch my tomcat this is what comes up:
Type Exception Report
Message java.lang.ClassNotFoundException: org.apache.jsp.index_jsp
Description The server encountered an unexpected condition that prevented it from fulfilling the request.
Exception
org.apache.jasper.JasperException: java.lang.ClassNotFoundException: org.apache.jsp.index_jsp
org.apache.jasper.servlet.JspServletWrapper.getServlet(JspServletWrapper.java:176)
org.apache.jasper.servlet.JspServletWrapper.service(JspServletWrapper.java:380)
org.apache.jasper.servlet.JspServlet.serviceJspFile(JspServlet.java:386)
org.apache.jasper.servlet.JspServlet.service(JspServlet.java:330)
javax.servlet.http.HttpServlet.service(HttpServlet.java:742)
org.apache.tomcat.websocket.server.WsFilter.doFilter(WsFilter.java:52)
Root Cause
java.lang.ClassNotFoundException: org.apache.jsp.index_jsp
java.net.URLClassLoader.findClass(URLClassLoader.java:381)
org.apache.jasper.servlet.JasperLoader.loadClass(JasperLoader.java:129)
org.apache.jasper.servlet.JasperLoader.loadClass(JasperLoader.java:60)
org.apache.jasper.servlet.JspServletWrapper.getServlet(JspServletWrapper.java:171)
org.apache.jasper.servlet.JspServletWrapper.service(JspServletWrapper.java:380)
org.apache.jasper.servlet.JspServlet.serviceJspFile(JspServlet.java:386)
org.apache.jasper.servlet.JspServlet.service(JspServlet.java:330)
javax.servlet.http.HttpServlet.service(HttpServlet.java:742)
org.apache.tomcat.websocket.server.WsFilter.doFilter(WsFilter.java:52)
Note The full stack trace of the root cause is available in the server logs.
You are getting the error because of the below line:
int months = int.Parse("datum_isteka".toString());
The syntax that you are using will not work in Java.
If I am thinking correct, you are trying to get the input value and want evaluate in the jsp, which not possible because jsp code will executed way before you can see the html content in browser.
If you don't want use JavaScript in your code then to get the textbox value you need to submit the page like below:
<!-- here I am using post method, coz I dont want users to see the content in the browser -->
<form method="post" action="index.jsp">
<div class="form-group">
<label for="datum_uplate">Datum isteka:</label>
<input type="date" class="form-control" id="datum_isteka" name="datum_isteka" >
<input type="submit" value="Get Months">
</form>
<%
// to get the you use the java code
if (request.getParameter("datum_isteka") != null ) {
LocalDateTime.now().plusMonths(1);
//int months = int.Parse("datum_isteka".toString());
int months = Integer.parseInt(request.getParameter("datum_isteka")); // here you may need to handle empty string, `parseInt` method will throw error if the given value is empty, i.e; `datum_isteka` textbox value.
LocalDateTime newDate = LocalDateTime.now().plusMonths(months);
}
%>
Now the newDate will have the required value.
I get a error JSON in following format
error = [{field:'one', desc:'This is error for field one', value='FromPostFieldOne'},
{field:'two', desc:'This is error for field two', value='FromPostFieldTwo'}];
which I want to display in following template
{#error}
<form>
<input type="text" name="one" id="one" value="<!- value for field one from JSON-->"/>
<!-- Display error from JSON for field one here -->
<input type="text" name="two" id="two" value="<!- value for field two from JSON -->"/>
<!-- Display error from JSON for field two here -->
</form>
{/error}
I am not able to figure if I achieve this with ether "Explicit context setting" or "{#if cond="condition"} helper". All examples on Linkedin Dust site illustrate how to do this with JSON key values but not object arrays.
Help appreciated !!!!
your json is not valid you should make something like this:
error = [
{
field:'one',
desc:'This is error for field one',
value:'FromPostFieldOne'
},
{
field:'two',
desc:'This is error for field two',
value:'FromPostFieldTwo'}
];