webpack buggy behaviour while loading templates by require()

[ntrp]

webpack bundling doesn't work for templateUrl properties, out of the box it works only for inline string templates like this;

template: `<page-router-outlet><\page-router-outlet>`

I also tried to use the standard webpack pattern:

template: require('./home.component.html'),

and I have installed the html-loader but webpack complains that it cannot find the module because it is resolving it form the component path:

Hash: 424ef13d720e8aa357ba
Version: webpack 1.13.1
Time: 33ms
Asset Size Chunks Chunk Names
tns-java-classes.js 1.23 kB 0 [emitted] tns-java-classes
+ 2 hidden modules
ERROR in Cannot find module './node_modules/html-loader/index.js'
ERROR in Cannot find module './node_modules/html-loader/index.js'

The only way to fix this is to add a resolverAlias after the config has been generated:

var config = bundler.getConfig({});
config.resolveLoader = {
    alias: {
        html: path.join(__dirname,'node_modules', 'html-loader')
    }
}

and then require the template prefixing the loader type:

template: require('html!./home.component.html'),

I also tried to add a loader configuration so I don't have to prefix every require with html!:

module: {
        loaders: [
            {
                match: /\.html$/,
                loader: 'html'
            }
        ]
    }

but that doesn't work, probably because the scripts aren't merging well the config and setting a module property deletes the other loaders preconfigured..

You can find a working example here:
nativescript-ng2-drawer-seed

Just run:

npm i && tns run android --bundle

[leocaseiro]

I'm struggling to show up my icon fonts, such as FontAwesome. I believe this is a related issue.

Are you using FontAwesome in your app?

[ntrp]

What are you using to show them? Actually webpack doesn't care about fonts because the code that loads the font into the fontcache is running on absolute dynamic paths extracted from the css font-family directives.

Here you can find the file resolution:
https://github.com/NativeScript/NativeScript/blob/master/tns-core-modules/ui/styling/font.android.ts#L101

On my system resolves to (I set .fa class font-family to FontAwesome, fontawesome-webfont):

/data/data/<APP>/files/app/fonts/FontAwesome.ttf
/data/data/<APP>/files/app/fonts/fontawesome-webfont.ttf

The webpack build creates a bundle and sets package.json main to point to that file but it still copies all the files you have inside your project (which is in my opinion stupid, what's the point in using webpack then..). Considering that you get the fonts copied and loaded it should work out of the box.

The problem for me is that it doesn't work with "\uCODE" notation anyway.. Even without webpack I have to use real unicode characters pasted or the pipe from nativescript-ng2-fonticon which translates your "fa-CODE" classes to real unicode characters.

Anyway you can find an example with webpack and a working icon in the homepage here. It is preconfigured with the required loaders in case it would be needed but it is not at the moment.

[leocaseiro]

Hi @ntrp, thanks for your reply.

I've noticed you sent to me the android source, where I'm trying on ios.
I tried to run the ng2-drawer-seed, but it doesn't work bundled on ios. Only if I don't bundle.

I opened an issue for ios #12

[ntrp]

Ah, unfortunately I cannot test on ios because I don't have a mac and didn't setup a VM environment yet.. Anyway the font loading should not depend on webpack, but maybe for ios it is different..

You can try enabling the trace module by adding this to your code:

require('trace').enable()

[hdeshev]

Hey, @ntrp, thanks for digging in here! I hadn't gotten to bundling HTML files yet.

Anyway, I did some experiments and here's what I found out:

• webpack doesn't resolve loaders from node_modules by default. You need to add a resolveLoader.root setting.
• nativescript-dev-webpack doesn't configure any loaders, so you can pass your own module.loaders to bundler.getConfig.

That said, here's my webpack.config.js that works fine with template: require("./mytemplate.html") declarations:

var bundler = require("nativescript-dev-webpack");
var path = require("path");

module.exports = bundler.getConfig({
    resolveLoader: {
        root: path.join(__dirname, "node_modules")
    },
    module: {
        loaders: [
            {
                test: /\.html$/,
                loader: "html"
            }
        ]
    }
});