使用@wwwalkerrun/NativeScript ngx magic时未显示NativeScript自定义组件

我创建了一个新的测试应用程序

> ng new TestApp

然后我安装nativescript ngx magic

> npm i @wwwalkerrun/nativescript-ngx-magic --save

然后创建一个新的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>

<Label text="My Custom Component" class="h1 text-center"></Label>

现在运行应用程序

> npm run start.android

该应用程序运行正常

然后创建一个自定义控件：

> ng g component custom

然后再次创建一个空的custom.component.tns.css 创建新的custom.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>

<Label text="My Custom Component" class="h1 text-center"></Label>

并将此自定义标记添加到我的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>
    <app-custom></app-custom>
</StackLayout>

我希望看到我的自定义组件，但应用程序看起来完全一样

我错过了什么

如果我将自定义组件添加到.html文件中，而不是tns.html并使用ng serve运行，那么网站将正确显示自定义组件。只是不是应用程序

使用nativescript ngx magic时，这可能吗？

我找到了原因

nativescript ngx magic命令创建一个nativescript目录，在这里有一个应用程序文件夹，在这里有另一个应用程序文件夹。此内部应用程序文件夹是指向主src文件夹中应用程序文件夹的符号链接。但在外部应用程序文件夹中，会生成第二个app.module.ts文件。这是导入NativeScript模块的地方。当我创建自定义控件：>ng g component custom时，该组件被自动注册到符号链接上共享的内部app文件夹中的app.module.ts中。但它未在用于nativescript的app.module.ts中注册。这解释了为什么自定义组件对网站可见，但对应用程序不可见。我需要在声明部分的第二个app.module.ts中注册自定义组件，因此这个app.module.ts现在看起来像：

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 { }

一旦我这样做了，那么定制组件也会显示在应用程序中

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 { }