XML components dynamically loaded with builder.load + Webpack bundle

[webleaf]

I use builder.load() to load xml file. It works well. But don't works when I build --bundle.
Because in this case __dirname refs to bundle.js and there are no more some-fragment.xml.
How implement such loading of xml file for work w/o an w/ --bundle?

[NickIliev]

@webleaf currently the dynamicl loading of XML with builder is a scenario that is not automatically enabled by nativescript-dev-webpack and needs some additional setup to be made.

Below I am going to list the steps taken to enable webpack bundling with dynamically loaded XML components.

• Create a custom componen file located in <your-project>/app/component/some-fragment.xml

• Use the builder to craete the compnent instance. Note that I am not using the global __dirname but a path relative to the app folder (using tilde ~)

var myComponentInstance = builder.load({
        path: "~/components",
        name: "some-fragment"
});

• Register the component In app/bundle-config.ts

if ((<any>global).TNS_WEBPACK) {
    // Register tns-core-modules UI framework modules
    require("bundle-entry-points");

    // Register application modules
    // This will register each `root`, `page`, `fragment` postfixed xml, css, js, ts, scss file in the app/ folder
    const context = (<any>require).context("~/", true, /(root|page|fragment)\.(xml|css|js|ts|scss|less|sass)$/);
    global.registerWebpackModules(context);

    global.registerModule("components/some-fragment", () => require("./components/some-fragment"));
}

• Because my custom component is located in folder components the final steps would be to add this folder to the webpack-config.js file

new CopyWebpackPlugin([
    { from: "components/**" },
    { from: "fonts/**" },
    { from: "**/*.jpg" },
    { from: "**/*.png" },
]

Update: Test application demonstrating the above can be found here

[webleaf]

@NickIliev thank you for answer. Looks like your solution creates copy of some-fragment.xml.
But some-fragment.xml already registered in bundle.js. Does --bundle produce any property to determine that it's bundled release is running? So I could use builder.parse() in that case.

[webleaf]

@NickIliev I do it so:

let innerComponent: View;

if(global.TNS_WEBPACK){
    // some-fragment.xml registered via bundle-config.ts, because it's postfixed with "fragment"
    // so it already exist in bundle.js as module
    innerComponent = builder.parse(<string>require('./some-fragment.xml'));
} else {
    innerComponent = builder.load(__dirname + '/some-fragment.xml');
}

Do the trick too.

[ebiscardi]

@NickIliev I do it so:

let innerComponent: View;

if(global.TNS_WEBPACK){
    // some-fragment.xml registered via bundle-config.ts, because it's postfixed with "fragment"
    // so it already exist in bundle.js as module
    innerComponent = builder.parse(<string>require('./some-fragment.xml'));
} else {
    innerComponent = builder.load(__dirname + '/some-fragment.xml');
}

Do the trick too.

Thank you! You saved my day!

[slolam]

@NickIliev, I have requirement to load view dynamically, however the only difference is, my project is an angular project. Could you please guide me with it? Pointer to any documentation showing how to dynamically load a view using builder.load and {N} 6 (webpack)

Thank in anticipation