NativeScript custom component not showing when using #wwwalkerrun/nativescript-ngx-magic - nativescript

Question

I create a new test app
> ng new TestApp
Then I install the nativescript-ngx-magic
> npm i #wwwalkerrun/nativescript-ngx-magic --save
Then create a new app.component.tns.html
<ActionBar title="Magic!" icon="" class="action-bar">
</ActionBar>
<StackLayout class="p-20">
<Label text="NativeScript is Neat." class="h1 text-center"></Label>
</StackLayout>
Create a blank app.component.tns.css
Then change my app.component.ts so that it will work with the nativescript-ngx-magic:
import { Component } from '#wwwalkerrun/nativescript-ngx-magic';
#Component({
moduleId: module.id,
selector: 'app-root',
templateUrl: 'app.component.html',
styleUrls: ['app.component.css']
})
export class AppComponent {
title = 'app works!';
}
now run the app
> npm run start.android
The app works
Then I create a custom control:
> ng g component custom
then again Create a blank custom.component.tns.css
create a new custom.component.tns.html
<Label text="My Custom Component" class="h1 text-center"></Label>
Change the custom.component.ts code:
import { Component } from '#wwwalkerrun/nativescript-ngx-magic';
#Component({
moduleId: module.id,
selector: 'app-custom',
templateUrl: 'custom.component.html',
styleUrls: ['custom.component.css']
})
export class CustomComponent {
}
and add this custom tag into my app.component.tns.html so now it looks like this:
<ActionBar title="Magic!" icon="" class="action-bar">
</ActionBar>
<StackLayout class="p-20">
<Label text="NativeScript is Neat." class="h1 text-center"></Label>
<app-custom></app-custom>
</StackLayout>
Then when I run the app again:
> npm run start.android
I expect to see my custom component, but the app just looks the same.
What am I missing?
If I add a custom component into the .html file, not the tns.html and run using ng serve, then the website shows the custom component correctly. Just not the app.
Is this even possible when using the nativescript-ngx-magic?

Answer 1

I found the reason.
The nativescript-ngx-magic command creates a nativescript directory, in here there is an app folder and in here another app folder. This inner app folder is a symbolic link to the app folder in the main src folder. But in the outer app folder there is a second app.module.ts file which is generated. This is where the NativeScriptModule is imported. When I created the custom control: > ng g component custom then this component was automatically registered in the app.module.ts within the inner app folder (shared on the symbolic link). But it was not registered in the app.module.ts which is for nativescript. This explains why the custom component was visible for the website but not for the app. I needed to register the custom component in this second app.module.ts in the declarations section, so this app.module.ts now looks like:
import { NgModule, NO_ERRORS_SCHEMA } from '#angular/core';
import { NativeScriptModule } from 'nativescript-angular/nativescript.module';
import { AppComponent } from './app/app.component';
import { CustomComponent } from "./app/custom/custom.component";
#NgModule({
bootstrap: [
AppComponent
],
imports: [
NativeScriptModule
],
declarations: [
AppComponent, CustomComponent
],
schemas: [
NO_ERRORS_SCHEMA
]
})
export class AppModule { }
Once I did this, then the custom component was shown in the app too.