Question regarding registerElement


#1

I’m trying to register a component so that I can use it a RadDrawerSlide. I actually got this to work by chance previously, however I didn’t know how I got it working and therefore can’t get it to work again.

I’ve tried moving the register element to the testsites-list.page.ts file, and to a sidedrawer.module.ts file,
and i’ve tried a a few configurations of the require function parameters, like:

registerElement(
  "sidedrawer",
  () => require("./sidedrawer/sidedrawer").SidedrawerComponent
);

or

registerElement(
  "sidedrawer",
  () => require("./sidedrawer/sidedrawer.component").SidedrawerComponent
);

But they each come with thier own errors & issues
eg;
“[Object object]” is not a valid view instance nativescript
or
TypeError: Could not load view for : Could not find module
or

<ProxyViewContainer nativeViewProtected="undefined"></ProxyViewContainer>

It’s quite hard to find any information about this method, where it should be, how it should work especially for me who’s coming from iOS, Android background and doesnt understand angular and js,ts applications very much.

this is my relevant project structure:

app.module.ts
app.routing.ts
/modules
 /login
  -login.page.ts
  -login.page.html
 /testsites
  -testsites.routing.ts
  -testsites.module.ts
  /sidedrawer
    -sidedrawer.component.ts
    -sidedrawer.component.html
  /testsites-list
    -testsites-list.page.ts
    -testsites-list.page.html

app.module.ts

import { NgModule } from "@angular/core";
import { NativeScriptModule } from "nativescript-angular/nativescript.module";
import { NativeScriptFormsModule } from "nativescript-angular/forms";
import { NativeScriptHttpClientModule } from "nativescript-angular/http-client";
import { NativeScriptRouterModule } from "nativescript-angular/router";
import { routes, AppRoutingModule } from "./app.routing";

import { NgShadowModule } from 'nativescript-ng-shadow';
import { AppComponent } from "./app.component";
import { httpInterceptorProviders } from "./shared/http-interceptors/index"
import { NativeScriptUISideDrawerModule } from "nativescript-ui-sidedrawer/angular";

import { LoginPage } from "./modules/login/login.page";
import { TestsitesListPage } from "./modules/testsites/testsites-list/testsites-list.page";


@NgModule({
  imports: [
    NativeScriptUISideDrawerModule,
    NativeScriptModule,
    NativeScriptFormsModule,
    NgShadowModule,
    NativeScriptHttpClientModule,
    AppRoutingModule
  ],
  declarations: [
    AppComponent,
    LoginPage,
    TestsitesListPage
  ],
  bootstrap: [
    AppComponent
  ],
  providers: [
    httpInterceptorProviders
  ]
})
export class AppModule {}

app.routing.ts

import { LoginPage } from "./modules/login/login.page";
import { TestsitesListPage } from "./modules/testsites/testsites-list/testsites-list.page";
import { NativeScriptRouterModule } from "nativescript-angular/router";
import { NgModule } from "@angular/core";
import { Routes } from "@angular/router";

export const routes: Routes = [
  { path: "", component: LoginPage },
  { path: "testsites-list", component: TestsitesListPage }
];

@NgModule({
  imports: [NativeScriptRouterModule.forRoot(routes)],
  exports: [NativeScriptRouterModule]
})
export class AppRoutingModule { }

testsites.module.ts

import { NgModule, NO_ERRORS_SCHEMA } from "@angular/core";
import { NativeScriptModule } from "nativescript-angular/nativescript.module";
import { NativeScriptCommonModule } from "nativescript-angular/common";

import { TestsitesListRoutingModule } from "./testsites.routing";
import { TestsitesListPage } from "./testsites-list/testsites-list.page";

import { SidedrawerComponent } from "./sidedrawer/sidedrawer.component";

import { registerElement } from "nativescript-angular/element-registry";


registerElement(
  "sidedrawer",
  () => require("./sidedrawer").SidedrawerComponent
);

@NgModule({
    imports: [
        NativeScriptModule,
        NativeScriptCommonModule,
        TestsitesListRoutingModule
    ],
    declarations: [
        TestsitesListPage,
        SidedrawerComponent
    ],
    schemas: [
        NO_ERRORS_SCHEMA
    ]
})
export class TestsitesListModule { }

testsites.routing.ts

import { NgModule } from "@angular/core";
import { Routes } from "@angular/router";
import { NativeScriptRouterModule } from "nativescript-angular/router";

import { TestsitesListPage } from "./testsites-list/testsites-list.page";
import { SidedrawerComponent } from "./sidedrawer/sidedrawer.component";

const routes: Routes = [
    { path: "", component: TestsitesListPage },
    { path: "sidedrawer", component: SidedrawerComponent }
];

@NgModule({
    imports: [NativeScriptRouterModule.forChild(routes)],
    exports: [NativeScriptRouterModule]
})
export class TestsitesListRoutingModule { }

Any help would be appreciated
Thanks, David