Require function in AngularJS templates

[ufocoder]

I want use require function inside template, there's an example of usage:

<div data-ng-include="require('myApp/templates/directive.html')"></div>

After processing of this template by wepback, module with this template will look like this:

function(module, exports) {
    var path = '/some/prefix/path/myApp/templates/directive.html';
    window.angular.module('ng').run(['$templateCache', function(c) {
        c.put(path, "<div data-ng-include=\"require('myApp/templates/directive.html')\"></div>")
    }]);
    module.exports = path;
}

But require function should be replaced by webpack_require function and the result module should be like this:

function(module, exports) {
    var path = '/some/prefix/path/myApp/templates/directive.html';
    window.angular.module('ng').run(['$templateCache', function(c) {
        c.put(path, "<div data-ng-include=\"'" + __webpack_require__(123) + "'\"></div>")
    }]);
    module.exports = path;
}

Additionally, require function can be used not only in ng-include, ng-inline directives, it can be used in other custom attributes also.

[ufocoder]

As variant You can add special function to rewrite content passed to loader:

function makeRequireFuncWebpackable(string) {
    return string.replace(/=\\('|")require\(([^\\]+)\)\\(\1)/gi, '=\\"\'" + require($2) + "\'\\"');
}

[WearyMonkey]

@ufocoder Sorry for the slow response, I have been migrating countries.

It's a nice idea, but my gut feeling is that it is outside the scope of ngtemplate-loader. Especially as it may break existing usages.

It should however be trivial to write a separate loader, that could be placed in front of the ngtemplate-loader and executes your above code.

Something like 'ngtemplate!inline-requires!foo.html'

If you write this loader I will add a reference to it in the readme :)

[alexsandro-xpt]

Any progress for ng-include ?

[icfantv]

same ? as @alexsandro-xpt, anyone ever take a gander at a loader for when ng-include is used?

[e-cloud]

as far as I can remember, that kind of functionality can be done by html-loader

[icfantv]

Turns out one doesn't actually need this feature. If one preloads the app's templates, they're already in the template cache and thus, one just uses the correct URL, without require. This is what we do and it works quite well.

[e-cloud]

yes, but it will need another variable to reference the url (what i'm doning) or write it mannually

[icfantv]

@e-cloud, are you using ng-include to dynamically select templates? I'd argue that's not proper, especially if you want to use webpack. You can simply create a wrapper directive that selects the right template and load them in that directive. We also do this in some (rare) cases. It will totally bork upgrading to ng2...

[e-cloud]

my-include? I guess you're talking about ng-include. Just a few case of that kind of usage

[icfantv]

Gah! Yes, that's what I get for typing on a phone....autocorrect...

I just realized, you're not the original poster of this issue - my comments were geared towards @ufocoder's original post.

[k-stasevich]

"ngtemplate-loader": "1.3.1",

/**

• build templates form angular */ { test: /.html$/, loader: "ngtemplate?relativeTo=" + (path.resolve(__dirname, './src/app')) + "/!html" }

<ng-include src="'components/header/navigation/navigation.html'"> // WORK <ng-include src="'./components/header/navigation/navigation.html'"> // NOT WORK <ng-include `src="'/components/header/navigation/navigation.html'"> // NOT WORK

project root: src/app/components/header/navigation/navigation.html

i think you can close this issue

[WearyMonkey]

Closing as out of scope.