CODEWITHSUNDEEP
nativescriptangular2-nativescript
Tim Pickin
Tim Pickin

Reputation: 419

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

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

enter image description here

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?

Upvotes: 0

Views: 900

Answers (1)

Tim Pickin
Tim Pickin

Reputation: 419

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.

Upvotes: 1

Related Questions