uib-popover-template not working with webpack

[sanjeet1827]

Hi,

I am using angular 1.6.5 and angular-ui-bootstrap 1.3.3 . I have started using webpack 2.x.x to bundle all my code and templates. But using webpack I found an issue with directive uib-popover-template. As this directive takes path value for template. I want to know how it can be used as template string ?

I tried uib-popover-html too but it does not compile the html string hence does not suits me because my popover template is bound with current controller scope and using uib-popover-html it displays the html correct but scope does get bound (Hence not able to perform events like ng-click).

has anyone faced slimier issue?

Thanks in advance.

[dlefloch]

Hi same issue here, I get the following error messages with same version 1.3.3/webpack 2:

ERROR in ./~/angular-ui-bootstrap/dist/ui-bootstrap-tpls.js Module not found: Error: Can't resolve '/Users/didierlefloch/Development/Github/tq-poc/app/client/uib/template/timepicker/timepicker.html' in '/Users/didierlefloch/Development/Github/tq-poc/node_modules/angular-ui-bootstrap/dist' resolve '/Users/didierlefloch/Development/Github/tq-poc/app/client/uib/template/timepicker/timepicker.html' in '/Users/didierlefloch/Development/Github/tq-poc/node_modules/angular-ui-bootstrap/dist' using description file: /Users/didierlefloch/Development/Github/tq-poc/node_modules/angular-ui-bootstrap/package.json (relative path: ./dist) Field 'browser' doesn't contain a valid alias configuration after using description file: /Users/didierlefloch/Development/Github/tq-poc/node_modules/angular-ui-bootstrap/package.json (relative path: ./dist) using description file: /Users/didierlefloch/Development/Github/tq-poc/package.json (relative path: ./app/client/uib/template/timepicker/timepicker.html)

I tried to define an alias in my webpack config but it did not work:

config.resolve = { alias: { uib: path.join(__dirname, 'node_modules', 'angular-ui-bootstrap') } };

Thank you for your help,

Didier

[sanjeet1827]

Hi,

Thanks for replying.

I found other way to fix this issue. Put the template in $templateCahe at the time when application is bootstrapped in angular module like below

var popOverTemplate = require("path/to/popovertemplate"); .run(["$templateCache",($templateCache)=>{ $templateCache.put("popOverTemplate",popOverTemplate ) }]);

Then use it via uib-popover-temlate like below.

Make sure to put the key of template in single quotes.

[stereokai]

@sanjeet1827 you saved my life man!!!