nativescript-telerik-ui not supporting AoT compilation

[newapx]

Use version 0.2.11
After the command npm run start-android-bundle in step webpack --config = webpack.android.js --progress out error
Error: Unexpected value 'SIDEDRAWER_DIRECTIVES' declared by the module 'AppModule'
in \node_modules\@angular\compiler\bundles\compiler.umd.js:14722:29

Use Angular, AppModule is main and one application module.
SIDEDRAWER_DIRECTIVES from plugins nativescript-telerik-ui

[hdeshev]

I haven't seen this error before. Could you post your project somewhere on GitHub, so I can reproduce it on my end?

[newapx]

Here is a link to the project (https://github.com/newapx/nativescipt.sidedraw-webpack)

[hdeshev]

Thanks for the project! It turns out the nativescript-telerik-ui package doesn't ship component metadata yet (Hence no AoT support). I opened an issue on their tracker.

Until we get this fixed, it should be possible to use the dynamic platform without the ng-tools webpack loader, but I would recommend against that, since it will ship the entire compiler codebase in the app.

Ping @VladimirAmiorkov

[imaginationcoder]

Same here:
ERROR in Unexpected value 'SIDEDRAWER_DIRECTIVES' declared by the module 'AppModule'
My 'app.module.ts' includes below
import {SIDEDRAWER_DIRECTIVES} from "nativescript-telerik-ui/sidedrawer/angular";
and
@NgModule

declarations: [
        SIDEDRAWER_DIRECTIVES,
        AppComponent 
    ] 

Can any one please help me here to resolve the issue when using 'nativescript-dev-webpack'.
Everything is working fine without webpack usage

[VladimirAmiorkov]

@imaginationcoder The current 1.5.1 version of the nativescript-telerik-ui plugin does not support AoT compilation which is by default enabled in nativescript-dev-webpack. We are already working on resolving this issue and we are expecting to release a version 1.6.1 which should include the mentioned support for AoT compilation. We apologize for any inconvenience that this might by causing.

[imaginationcoder]

@VladimirAmiorkov thank you for your quick reply.. is there any chance to me expect the release date of version 1.6.1?

[VladimirAmiorkov]

@imaginationcoder The 1.6.1 release is planned to be out in a week after the 1.6.0 release which is doe to be released in two weeks.

[dunqan]

@VladimirAmiorkov sorry for bugging you, but are there any chances that mentioned 1.6.1 version will be released soon? Thanks!

[VladimirAmiorkov]

Hi @dunqan,

The 1.6.1 is currently being worked on and will be available soon, more information about this can be found in this forum thread.

[triniwiz]

I can confirm this works now 👍

[nraboy]

I'm getting the following error now:

ERROR in Type RadSideDrawerComponent is part of the declarations of 2 modules: NativeScriptUISideDrawerModule and AppModule

[VladimirAmiorkov]

@nraboy Make sure to remove the sidedrawer import from the declarations of your AppModule.

[nraboy]

Yes I did. The error is happening after I had done this. This is what my file looks like:

import { NgModule, NO_ERRORS_SCHEMA } from "@angular/core";
import { NativeScriptModule } from "nativescript-angular/nativescript.module";
import { NativeScriptHttpModule } from "nativescript-angular/http";
import { NativeScriptUISideDrawerModule } from "nativescript-telerik-ui-pro/sidedrawer/angular";
import { NativeScriptUIListViewModule } from "nativescript-telerik-ui-pro/listview/angular";
import { ModalDialogService } from "nativescript-angular/modal-dialog";
import { AppRoutingModule, Components } from "./app.routing";
import { AppComponent } from "./app.component";
import { registerElement } from 'nativescript-angular/element-registry';

import { IfAndroidDirective, IfIosDirective } from "./directives/if-platform.directive";

import { ZoneProvider } from "./providers/zone.provider";
import { CloudFlareProvider } from "./providers/cloudflare.provider";
import { GoogleProvider } from "./providers/google.provider";

import { ZonesModal } from "./modals/zones/zones.modal";
import { GenericModal } from "./modals/generic/generic.modal";

registerElement("CardView", () => require("nativescript-cardview").CardView);
registerElement("Fab", () => require("nativescript-floatingactionbutton").Fab);
registerElement("CheckBox", () => require("nativescript-checkbox").CheckBox);

@NgModule({
    bootstrap: [
        AppComponent
    ],
    imports: [
        NativeScriptModule,
        NativeScriptHttpModule,
        NativeScriptUISideDrawerModule,
        NativeScriptUIListViewModule,
        AppRoutingModule
    ],
    declarations: [
        AppComponent,
        IfAndroidDirective,
        IfIosDirective,
        ...Components,
        ZonesModal,
        GenericModal
    ],
    entryComponents: [ZonesModal, GenericModal],
    providers: [ModalDialogService, ZoneProvider, CloudFlareProvider, GoogleProvider],
    schemas: [
        NO_ERRORS_SCHEMA
    ]
})
export class AppModule { }

As you can see nothing stands out. Then I try to use my RidSideDrawerComponent as defined in the documentation.

Best,

[VladimirAmiorkov]

@nraboy Are you sure no other component in your app is importing the from "nativescript-telerik-ui-pro/sidedrawer/angular" maybe the AppComponent or ...Components. Can you send a sample of the project so I can take a look at it?

[nraboy]

I have this in one of my components:

import { Component, ViewChild, ViewContainerRef, OnInit } from "@angular/core";
import { Http } from "@angular/http";
import { RouterExtensions } from "nativescript-angular/router";
import { ListViewEventData, RadListView } from "nativescript-telerik-ui-pro/listview";
import { RadSideDrawerComponent, SideDrawerType } from "nativescript-telerik-ui-pro/sidedrawer/angular";
import { ModalDialogService } from "nativescript-angular/directives/dialogs";
import { View } from 'ui/core/view';
import * as Utils from "utils/utils";
import * as Dialogs from "ui/dialogs";
import * as FrameModule from "ui/frame";
import * as ApplicationSettings from "application-settings";
import { Configuration } from "../../config";
import * as Toast from 'nativescript-toast';
import "rxjs/Rx";
@Component({
    selector: "secure",
    templateUrl: "./components/secure/secure.component.html",
    styleUrls: ["./components/secure/secure.component.css"]
})
export class SecureComponent implements OnInit {
    private drawer: SideDrawerType;
    @ViewChild(RadSideDrawerComponent)
    public drawerComponent: RadSideDrawerComponent;

Without the import, the definitions will throw errors.

[VladimirAmiorkov]

@nraboy This all looks fine, can you wrap a test project and send it to me, without being able to reproduce this issue on my end I cannot help you further.

[imaginationcoder]

@VladimirAmiorkov
Now working fine for me thank you for version 1.6.1
Nativescript: 2.5.2 | tns-ios: 2.5.0 | "tns-core-modules": "^2.5.1"

and my app.module.ts contains

// --- The built-in 'nativescript-telerik-ui' modules
import { NativeScriptUISideDrawerModule } from "nativescript-telerik-ui/sidedrawer/angular";
import { NativeScriptUIListViewModule } from "nativescript-telerik-ui/listview/angular";

@NgModule({
    declarations: [
      ....
    ],
    bootstrap: [
        AppComponent
    ],
    imports: [
        NativeScriptModule,
        NativeScriptUIListViewModule,
       NativeScriptUISideDrawerModule,
      ......
    ],
    .....
 

[Salahudeen]

I am also running into the same issue. I tried with the combinations u have mentioned.
Nativescript-Telerik-UI 1.6.1
Nativescript: 2.5.2 | tns-android: 2.5.0 | "tns-core-modules": "^2.5.1"

still issue persist, please suggest if there is anything else you did

[VladimirAmiorkov]

@Salahudeen Did you make sure to clean the project (delete node_modules, platforms and maybe the npm cache)

[Salahudeen]

Tried the same now, but no luck. The issue still persists. Some more points on my project setup.

1. I am using NathanWalkers angular seed advanced project
2. The regular build successfully passes, but the AOT build is where this error shows up.

ERROR in Type RadSideDrawerComponent in nativescript/node_modules/nativescript-telerik-ui-pro/sidedrawer/angular/side-drawer-directives.d.ts is part of the declarations of 2 modules: NativeScriptUISideDrawerModule in nativescript/node_modules/nativescript-telerik-ui-pro/sidedrawer/angular/side-drawer-directives.d.ts and SideNavModule in nativescript/app/app/shared/side-nav/side-nav.module.ts! Please consider moving RadSideDrawerComponent in nativescript/node_modules/nativescript-telerik-ui-pro/sidedrawer/angular/side-drawer-directives.d.ts to a higher module that imports NativeScriptUISideDrawerModule in nativescript/node_modules/nativescript-telerik-ui-pro/sidedrawer/angular/side-drawer-directives.d.ts and SideNavModule in nativescript/app/app/shared/side-nav/side-nav.module.ts. You can also create a new NgModule that exports and includes RadSideDrawerComponent in nativescript/node_modules/nativescript-telerik-ui-pro/sidedrawer/angular/side-drawer-directives.d.ts then import that NgModule in NativeScriptUISideDrawerModule in nativescript/node_modules/nativescript-telerik-ui-pro/sidedrawer/angular/side-drawer-directives.d.ts and SideNavModule in nativescript/app/app/shared/side-nav/side-nav.module.ts.

[VladimirAmiorkov]

Did you import the correct ngModule like @imaginationcoder posted earlier? If you can share some of your app implementation I can take a look at it, like the bootstrap component etc.

[Salahudeen]

@VladimirAmiorkov Thanks for pointing me in the right direction. I was importing SIDEDRAWER_DIRECTIVES in the module where i implemented the side navigarion, changing that to import the NativeScriptUISideDrawerModule solved the issue.
Thanks a ton.

[VladimirAmiorkov]

@Salahudeen you are welcome if you have any questions, bug reports or feature requests for the nativescript-telerik-ui plugin you can stop by our won feedback repo here: https://github.com/telerik/nativescript-ui-feedback/issues

[VladimirAmiorkov]

Closing this issue, AoT should work with nativescript-telerik-ui and nativescript-telerik-ui-pro plugins version 1.6.1 or above

[nraboy]

Closing this issue, AoT should work with nativescript-telerik-ui and nativescript-telerik-ui-pro plugins version 1.6.1 or above

@VladimirAmiorkov Still doesn't work for me, so I am not sure why you are closing this.

[VladimirAmiorkov]

@nraboy Can you send me a working project that reproduces this issue as from all of my testing with the code snippets and the discussion with other in this thread after correctly importing the NgModule for the corresponding ui component from the ^1.6.1 version of the nativescript-telerik-ui plugin, AoT is executed without errors?

You can find information on how to bootstrap your project so that AoT is supported by for the nativescript-telerik-ui plugin in our documentation here.

We have reopened the issue and require more information from anyone experiencing such issues.

[nraboy]

Just to follow up here.

I've upgraded from CLI 2.5.2 to 2.5.4 and all my problems regarding UI have been resolved. No idea why, but I'll take it :-)

[VladimirAmiorkov]

@nraboy Hmm I will take a closer look at that combination, thank you for the information, can you tell me which version of nativescript-telerik-ui you are using on those tests?

[kvindascr]

Hello Guys,
Once I changed from constant to module I get the following issue:

Unexpected module 'NativeScriptUISideDrawerModule in /../myproject/node_modules/nativescript-telerik-ui/sidedrawer/angular/side-drawer-directives.d.ts' declared by the module 'AppModule in /.../myproject/app/app.module.ts'

As comment, Im using telerik-ui 1.6.2.

Sorry my bad.
I leave the line on declaration, while when using the module should be moved to imports.

It is working.