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?

Bundyo · Accepted Answer · 2019-07-23 05:37:07Z

2

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

answered Jul 23, 2019 at 5:37

Bundyo

2,18313 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Manoj Over a year ago

If you still like to use builder, then either adjust your webpack config to bundle the XML file Or assign the XML string to a variable and pass same to the builder function.

Khalifa Gad Over a year ago

@Bundyo actually, I use nativescript 5.4.2 version I will upgrade it and try with your recommendations and come back again

Khalifa Gad · Accepted Answer · 2019-07-24 13:38:56Z

0

It has been solved with the same code by just upgrading from nativescript version 5 to version 6

answered Jul 24, 2019 at 13:38

Khalifa Gad

3811 gold badge6 silver badges27 bronze badges

Collectives™ on Stack Overflow

How to dynamically load a custom component in nativescript?

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related