Angular.js components dynamic templateURL

Question

I am Trying to create dynamic templateUrls with angular component. But i get this error as:

Error: [$injector:unpr] Unknown provider: eProvider <- e

angular
    .module('myApp')
    .component('fieldComponent', {
        templateUrl: function ($element, $attrs) {
           return $attrs.templateUrl || 'some/path/default.html'
        },
        controller:fieldComponentController,
        controllerAs:'vm',
        $routeConfig: [
            {path: '/dashboard', component: 'dashboardApp', name: 'Dashboard', useAsDefault: true}
        ]
    });

As files getting minified, its throwing error as above. So where & how to i inject this dependencies?

Matt Richards · Accepted Answer · 2016-09-13 14:05:49Z

1

I'm guessing that your DI in the fieldComponentController is getting broken by minification. When the code is minified, your dependencies are getting their names changed to things like 'e', which Angular doesn't know how to handle.

One way to deal with this is by utilizing ng-annotate (https://github.com/olov/ng-annotate) to rewrite those variable names in a minification-safe way.

If you're using a build tool like Webpack to do your bundling and minification, you can simply add the ngAnnotatePlugin to your config and include the string 'ngInject' at the top of your controller definition

angular.module("MyMod").controller("MyCtrl", function($scope, $timeout)        
{
"ngInject";
...
});

ES2015 Version:

export class MyCtrl {
    constructor($scope, $timeout){
        'ngInject';
    }
}

answered Sep 13, 2016 at 14:05

Matt Richards

212 bronze badges

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

2 Comments

Mithun Shreevatsa Over a year ago

Its fine to inject the services inside controllers, but how to achieve the same for templateurl function?

Matt Richards Over a year ago

Hmmmmm - I'm not sure. I wonder if you could inject those dependencies in the controller and then dynamically set the template by using a div with an ng-include that dynamically loads the template

Mithun Shreevatsa · Accepted Answer · 2016-09-13 17:23:41Z

0

I was able to do it by adding /@ngInject/ at top as suggested by @Matt Richards.

/*@ngInject*/
angular
    .module('myApp')
    .component('fieldComponent', {
        templateUrl: function ($element, $attrs) {
           return $attrs.templateUrl || 'some/path/default.html'
        },
        controller:fieldComponentController,
        controllerAs:'vm',
        $routeConfig: [
            {path: '/dashboard', component: 'dashboardApp', name: 'Dashboard', useAsDefault: true}
        ]
    });

But, finally i ended up with ng-include rather going towards the dynamic template approach, and saved my time covering unit test case.

answered Sep 13, 2016 at 17:23

Mithun Shreevatsa

3,65310 gold badges59 silver badges106 bronze badges

Collectives™ on Stack Overflow

Angular.js components dynamic templateURL

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