Visual Studio Code with Native Script does not recognize all Native Script components

Question

Visual Studio Code with Native Script does not recognise Native Script components sometimes in the component XML. I have one from the official tutorial and in it the ActionBar is recognized - but GridLayout is not:

'GridLayout' is not a known element: 1. If 'GridLayout' 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.

XML looks like this:

<ActionBar title="Groceries">
  <!-- On iOS devices, <ActionItem>s are placed from left to right in sequence; you can override that (as the code above does) by providing an ios.position attribute. -->
  <ActionItem text="Share" (tap)="share()" android.systemIcon="ic_menu_share_holo_dark" ios.systemIcon="9" ios.position="right"></ActionItem>
</ActionBar>
<GridLayout rows="auto, *">
  <!-- add-bar necessary since we moved the page up 20 over the status bar on iOS-->
  <GridLayout row="0" columns="*, auto" class="add-bar">
    <TextField #groceryTextField [(ngModel)]="grocery" hint="Enter a grocery item" (returnPress)="add()" col="0"></TextField>
    <Image src="res://add" (tap)="add()" col="1"></Image>
  </GridLayout>...

It seems totally arbitrary since for example StackLayout is no problem in another XML in same project.

Answer 1

As suggested in the error log make sure that you have included NO_ERRORS_SCHEMA in the respective NgModule (if using lazily loaded modules include the schema there as well)

import { NgModule, NO_ERRORS_SCHEMA } from "@angular/core";

@NgModule({
    schemas: [NO_ERRORS_SCHEMA],

//... more code follows here

Side note: it might be just an incomplete snippet but still... the parent GridLayout does not have an enclosing tag