Tagged: NativeScript
- This topic has 11 replies, 2 voices, and was last updated 5 years, 7 months ago by Salvador Cabrera.
-
AuthorPosts
-
beleta1ParticipantI am using Codemix to develop an Angular Web / NativeScript Angular shared project.
In my Angular Web project I was able to use IntelliSense inside Angular templates with no problem. When I added PrimeNG or Material modules for instance, I got code completion for PrimeNG and Material elements with no problem.
But when I added NativeScript to my project, then code completion stopped working on my Angular Web templates for modules as Material and PrimeNg. The projects still is a normal Angular Web with some NativeScript modules added. Also I get errors on Material and PrimeNg directives like this one:
Property binding pTemplate not used by any directive on an embedded template. Make sure that the property name is spelled correctly and all directives are listed in the "@NgModule.declarations".
Code completion still works as usual on the other Angular Web projects that are not shared with NativeScript.
Do you know what is going on, and if there is any way to configure Codemix or Visual Code to prevent this problem to happen.
Thank you in advance
Salvador CabreraMemberHi beleta1,
We are currently trying to replicate the problem, but while we do so, can you please share the version numbers of Angular, Angular CLI, NativeScript, PrimeNG and Material?, would helpful to we can get back to you faster.
Best Regards,
Sal.
beleta1Participant
Salvador CabreraMemberHi beleta1,
Thanks for sharing the info.
It would be great if you can reach us via Live Chat as it can be the fastest way to get to the root of the issue.Cheers,
Sal
beleta1ParticipantI think it will be easier that you test my project, so I am including it here.
You will find that /EscuelaAngular/src/app/personas/personas.component.html shows some errors when opened with the HTML::Codemix editor. The errors are shown in lines 50 and 61.
Regards
Attachments:
You must be logged in to view attached files.
Salvador CabreraMemberThanks beleta1,
I’ll give it a try and get back to you as soon as posible.
Cheers,
Sal
Salvador CabreraMemberHi beleta1,
Looks like the errors that you are seeing on
/EscuelaAngular/src/app/personas/personas.component.html
are related to howpTemplate
it is being used.So instead of using
*pTemplate
, add anng-template
tag withpTemplate
on it, so it looks like:<p-table [value]="personasDataSource.data" [paginator]="true" [rows]="4" [alwaysShowPaginator]="true"> <ng-template pTemplate="head"> <tr> <th pSortableColumn="codigo">Código <p-sortIcon></p-sortIcon> </th> <th pSortableColumn="nombre">Nombre <p-sortIcon field="nombre"></p-sortIcon> </th> <th pSortableColumn="apellido">Apellido</th> <th>Editar</th> <th>Borrar</th> </tr> </ng-template> <ng-template pTemplate="body" let-persona> <tr> <td>{{persona.codigo}}</td> <td>{{persona.nombre}}</td> <td>{{persona.apellido}}</td> <td><button mat-raised-button type="button" (click)="editar(persona)" >Editar</button></td> <td><button mat-raised-button type="button" (click)="eliminar(persona)" >Eliminar</button></td> </tr> </ng-template> </p-table>
You can find more info about this here in the following resources:
https://www.primefaces.org/primeng/#/table
https://www.cloudhadoop.com/2018/08/primeng-angular-datatable-tutorial-with.htmlLet me know if you need help.
Cheers,
Sal- This reply was modified 5 years, 8 months ago by Salvador Cabrera.
beleta1ParticipantHi Sal.
No, it’s not the case, this code is absolutely correct and works with no problem when running it. These sentences only got marked when I added the NativeScript stuff to my project Learn more about angular structural directive microsyntax on https://angular.io/guide/structural-directives#microsyntax.
Beside that, keep in mind that I also said that code completion does not work as expected on template files after adding the NativeScript nature to my project. Without NativeScript Material and PrimenNg elements and directives are completed when hitting ctrl-space but not after adding it. Please make the try.
Both problems are clearly related. It seems that after adding NativeScript modules the Codemix engine gets confused when parsing templates. If it were possible to exclude this NativeScript modules from being considered by Codemix I am pretty sure that the problem will not appear.
Saludos.
Josep M Beleta
Salvador CabreraMemberHey beleta1,
As the Angular Language Service extension uses tsconfig.json, it is also taking consideration
src/app.module.tns.ts
, it takes into account the imports from there instead ofsrc/app.module.ts
and you see these errors and code completion for PrimeNG and Materials are missing.As workaround you can try adding the NativeScript files to the exclude list of tsconfig.json, it should look like this:
{ "compileOnSave": false, "compilerOptions": { "baseUrl": "./", "outDir": "./dist/out-tsc", "sourceMap": true, "declaration": false, "module": "es2015", "moduleResolution": "node", "emitDecoratorMetadata": true, "experimentalDecorators": true, "importHelpers": true, "target": "es5", "typeRoots": [ "node_modules/@types" ], "lib": [ "es2018", "dom" ] }, "exclude": [ "**/*.tns.ts", "**/*.android.ts", "**/*.ios.ts" ] }
This should bring back code completion and remove the errors that you’re seeing.
Let know how it goes,
Sal.
beleta1ParticipantYes Sal, that did the trick. Angular Web uses
src/tsconfig.app.json
that has the excludes of the NativeScript files buttsconfig.json
has not. I added the excludes to this last file and now things go with no problem.Muchas gracias.
Josep M Beleta
beleta1ParticipantI noticed that in Codemix 3 you detect when the user is inside a NativeScript project and offer him to fix
tsconfig.json
.The problem is that the fix, the same you gave to me – excluding the
tns.ts
files – does not fix all the issues with NativeScript. It solves the problem with the templates files not being treated correctly, but now code completion does not work inside the excludedtns.ts
files. So if Angular templates are fixed Typescript NativeScript files are broken and the opposite is also trueProbably is not your fault but that the culprits are TypeScript and Angular Language Services, but perhaps you can imagine a solution to this problem.
Thank you in advance
Salvador CabreraMemberHey beleta1,
Sorry about this problem.
As you mentioned, this is a problem with the way Angular Language Services extension deals with tsconfig.json.
We are going to research on a way to deal with this issue and will reach you back as soon as there is a fix available,
Cheers,
Sal -
AuthorPosts