[beleta1]

I 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 Cabrera]

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

[beleta1]

I am enclosing here the package.json of my project.

Regards,

Josep M Beleta

• This reply was modified 5 years, 9 months ago by beleta1.

Attachments:

You must be logged in to view attached files.

[Salvador Cabrera]

Hi 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

[beleta1]

I 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 Cabrera]

Thanks beleta1,

I’ll give it a try and get back to you as soon as posible.

Cheers,
Sal

[Salvador Cabrera]

Hi beleta1,

Looks like the errors that you are seeing on /EscuelaAngular/src/app/personas/personas.component.html are related to how pTemplate it is being used.

So instead of using *pTemplate, add an ng-template tag with pTemplate 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.html

Let me know if you need help.

Cheers,
Sal

• This reply was modified 5 years, 9 months ago by Salvador Cabrera.

[beleta1]

Hi 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

• This reply was modified 5 years, 9 months ago by beleta1.
• This reply was modified 5 years, 9 months ago by beleta1.
• This reply was modified 5 years, 9 months ago by beleta1.

[Salvador Cabrera]

Hey 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 of src/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.

[beleta1]

Yes Sal, that did the trick. Angular Web uses src/tsconfig.app.json that has the excludes of the NativeScript files but tsconfig.json has not. I added the excludes to this last file and now things go with no problem.

Muchas gracias.

Josep M Beleta

[beleta1]

I 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 excluded tns.ts files. So if Angular templates are fixed Typescript NativeScript files are broken and the opposite is also true

Probably 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 Cabrera]

Hey 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

[Author]

Posts