How to dynamically load a custom component in nativescript?

Question

I am new to nativescript, and I am trying to dynamically load a custom component when I tap on button, But I get this error:

Error: Module '/data/data/org.nativescript.DMMobileApp01/files/app/components' not found for element 'components:Test' com.tns.NativeScriptException: Failed to find module:
"/data/data/org.nativescript.DMMobileApp01/files/app/components", > relative to: app//

I have searched a lot but most issues and tutorials that related to dynamically load a custom component are around angular and webpack.

This function which responsible to dynamic loading of the custom component:

function toSettings(args){
    const page = args.object.page;
    const mainScene = page.getViewById('mainScene'); 
    let settingsCompo = builder.load({
        path: '~/components',
        name: 'test'
    });
}

And this is the app/components/test.xml file

<StackLayout orientation="horizontal">
    <Label text="yaaaay!" textWrap="true" />
</StackLayout>

I expect it is an easy task but I don't know why I am getting this error! Where is my missing part?

Answer 1

NativeScript 6.0 makes the Webpack workflow the only one to follow. So check if you're including your component in the bundle. Since Webpack uses static analysis in order to detect what to include - it can't detect that builder.load call over there. Try using dynamic imports to tell Webpack to include the files you need.

On the other hand it seems that you're just trying to show a Settings page? In that case you might be better off just navigating to it:

https://docs.nativescript.org/ui/ns-ui-widgets/frame#basic-navigation

Answer 2

从本地脚本版本5升级到版本6，已经用相同的代码解决了