ActionBar with custom Layout compiled with AOT

[Cateye82]

Environment Provide version numbers for the following components (information can be retrieved by running tns info in your project folder or by inspecting the package.json of the project):

{
  "nativescript": {
    "id": "com.###########.#####",
    "tns-android": {
      "version": "5.4.0"
    },
    "tns-ios": {
      "version": "5.4.2"
    }
  },
  "description": "NativeScript Application",
  "license": "SEE LICENSE IN <your-license-filename>",
  "repository": "<fill-your-repository-here>",
  "dependencies": {
    "@angular/animations": "~8.0.0",
    "@angular/common": "~8.0.0",
    "@angular/compiler": "~8.0.0",
    "@angular/core": "~8.0.0",
    "@angular/forms": "~8.0.0",
    "@angular/http": "~8.0.0-beta.10",
    "@angular/platform-browser": "~8.0.0",
    "@angular/platform-browser-dynamic": "~8.0.0",
    "@angular/router": "~8.0.0",
    "nativescript-angular": "~8.0.0",
    "nativescript-fingerprint-auth": "^7.0.1",
    "nativescript-platform-css": "^1.6.9",
    "nativescript-plugin-firebase": "^9.0.1",
    "nativescript-theme-core": "~1.0.4",
    "nativescript-ui-sidedrawer": "^6.0.0",
    "reflect-metadata": "~0.1.12",
    "rxjs": "~6.5.0",
    "tns-core-modules": "~5.4.0",
    "zone.js": "~0.9.1"
  },
  "devDependencies": {
    "@angular/compiler-cli": "~8.0.0",
    "@ngtools/webpack": "~8.0.0",
    "nativescript-dev-typescript": "~0.10.0",
    "nativescript-dev-webpack": "~0.24.0"
  },
  "gitHead": "8c1a4866a66daab09bf5ef8e5a96472687192373",
  "readme": "NativeScript Application"
}

✔ Getting NativeScript components versions information...
✔ Component nativescript has 5.4.2 version and is up to date.
✔ Component tns-core-modules has 5.4.3 version and is up to date.
✔ Component tns-android has 5.4.0 version and is up to date.
✔ Component tns-ios has 5.4.2 version and is up to date.

Describe the bug I am using an custom ActionBar like followed:

<ActionBar class="mat-bg-header" title="" flat="true">
    <GridLayout *ngIf="environmentService.device == 'android'" columns="auto,10,*,auto,*,10,auto,15">
        <Label col="0" (tap)="onOpenDrawer()" class="material-icons mat-bg-header" text="&#xe5d2;"></Label>
        <GridLayout col="6" rows="auto,20" columns="auto,20,10,auto,20">
            <Label row="0" col="0" rowSpan="2" colSpan="2" class="material-icons mat-bg-header" text="&#xe8b6;"></Label>

            <Label row="0" col="3" rowSpan="2" colSpan="2" (tap)="drawerService.onNavigateTo('/notifications')" class="material-icons mat-bg-header" text="&#xe7f4;"></Label>
            <Label row="1" col="4" (tap)="drawerService.onNavigateTo('/notifications')" class="material-icons-info mat-bg-warn" text="123"></Label>
        </GridLayout>
    </GridLayout>

    <ActionItem *ngIf="environmentService.device == 'ios'" ios.position="left" android.position="left">
        <Label (tap)="onOpenDrawer()" class="material-icons mat-bg-header" text="&#xe5d2;"></Label>
    </ActionItem>

    <ActionItem *ngIf="environmentService.device == 'ios'" ios.position="right" android.position="popup">
        <GridLayout rows="auto,20" columns="auto,20,10,auto,20">
            <Label row="0" col="0" rowSpan="2" colSpan="2" class="material-icons mat-bg-header" text="&#xe8b6;"></Label>

            <Label row="0" col="3" rowSpan="2" colSpan="2" (tap)="drawerService.onNavigateTo('/notifications')" class="material-icons mat-bg-header" text="&#xe7f4;"></Label>
            <Label row="1" col="4" (tap)="drawerService.onNavigateTo('/notifications')" class="material-icons-info mat-bg-warn" text="123"></Label>
        </GridLayout>
    </ActionItem>
</ActionBar>

After that i call: tns run android --bundle --env.uglify --env.aot --env.snapshot

Which will result in:

ERROR in : '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. ("ol="0" (tap)="onOpenDrawer()" class="material-icons mat-bg-header" text="&#xe5d2;"></Label>
        [ERROR ->]<GridLayout col="6" rows="auto,20" columns="auto,20,10,auto,20">
            <Label row="0" col="0" r")
: '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. ("<ActionBar class="mat-bg-header" title="" flat="true">
    [ERROR ->]<GridLayout *ngIf="environmentService.device == 'android'" columns="auto,10,*,auto,*,10,auto,15">
   ")
: '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. ("m *ngIf="environmentService.device == 'ios'" ios.position="right" android.position="popup">
        [ERROR ->]<GridLayout rows="auto,20" columns="auto,20,10,auto,20">
            <Label row="0" col="0" rowSpan="")

So I removed --env.aot and works. It seems that the AOT Option is causing this issue.

To Reproduce Take the ActionBar code (loaded in a shared module) and try to run it with:

tns run android --bundle --env.uglify --env.aot --env.snapshot

Expected behavior Should compile for the USB connected device.

Sample project I don't have this project public but can invite on GitHub.

Additional context Haven't found something so far.

[tsonevn]

Hi @Cateye82, I tested the described problem in a sample project, however, was unable to recreate the issue. For your convenience, I am attaching my sample project. Please review it and make the needed changes, that will allow us to reproduce the problem. Archive.zip

[Cateye82]

Hi @tsonevn, thank you for your reply, I will take a look to your code as soon as possible. Right now I just proofed that your code compiles fine. Hopefully I will find the difference compared to mine to post the solution here.

[Cateye82]

HI @tsonevn, I made the changes to the source code to reproduce the issue. Basically I separated the ActionBar into the "topbar" component and loaded it by the "shared" module. Archive.zip

[tsonevn]

Hi @Cateye82, Thank you for the additional info and the new sample project. I was able to recreate the problem, however, after adding the NO_ERRORS_SCHEMA in the shared.module.ts file, the issue is no longer reproducible. For example:

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

import {NativeScriptCommonModule} from "nativescript-angular/common";
import {NativeScriptFormsModule} from 'nativescript-angular/forms';
import {NativeScriptHttpModule} from 'nativescript-angular/http';
import {NativeScriptHttpClientModule} from "nativescript-angular/http-client";

import {FormsModule, ReactiveFormsModule} from "@angular/forms";

import {TopbarComponent} from "../topbar/topbar.component";

@NgModule({
    imports: [
        NativeScriptCommonModule,
        NativeScriptFormsModule,
        NativeScriptHttpModule,
        NativeScriptHttpClientModule,
        FormsModule,
        ReactiveFormsModule
    ],
    declarations: [
        TopbarComponent
    ],
    exports: [
        NativeScriptCommonModule,
        NativeScriptFormsModule,
        NativeScriptHttpModule,
        NativeScriptHttpClientModule,
        FormsModule,
        ReactiveFormsModule,
        TopbarComponent
    ],
    schemas: [
        NO_ERRORS_SCHEMA
    ]
})
export class SharedModule {
}

Can you try adding the NO_ERRORS_SCHEMA in your project into the shared module and check if you will be able to recreate the problem. For your convenience, I am attaching the project with the needed change. Archive.zip

[Cateye82]

Hi @tsonevn, you are right, this solved my issue. It didn't came to my mind that the missing schema is causing such an error. Thank you for your support.