Getting 404 Not Found error for templateUrl on $uibModal

[stukh]

Getting 404 Not Found error for templateUrl on $uibModal

[STUkh]

You should require or import your template higher in top-level declarations, because when webpack build templateCache it doesn't know about this template, so you should pre-cache it and then use, like this:

var sourceSelectionTpl = require('./source-selection/source.selection.html');
vm.updateSourceAndVisibility = function(skus) {
  var modal = $uibModal.open({
    templateUrl: sourceSelectionTpl ,
    controller: require('./source-selection/source.selection.controller.js'),
  });
};

[hussaintamboli]

Tried what you suggested. But It's not working.

[hussaintamboli]

I solved it by creating selection.module.js in selection/ and importing selection.html there.

'use strict';

import sourceSelectionCnst from './selection.constant';
import sourceSelectionTpl from './selection.html';

const sourceSelectionModule = angular.module('src-selection', [
]);

sourceSelectionModule
    .constant('sourceSelectionCnst', sourceSelectionCnst);

export default sourceSelectionModule;

I had to also import it in my controller

import sourceSelectionTpl from './selection/selection.html';

Then I was able to use templateUrl

templateUrl: sourceSelectionTpl,

This solves the issue but I am not sure whether importing the template twice will load the template twice. Please suggest another better way if any.

[STUkh]

Better way i described in previous message. Just import template not in modal config object or function.
In your second case it will not be loaded twice, because it cached by name in $templateCache service

[hussaintamboli]

Okay. Got it. Thanks.

[Alex-DE-74]

Have exactly the same problem. Tried all internet tipps down and up since one week - no solution.
Tried you solution and it is not working on angular-cli on windows with webpack, error say that 'require' is not defined.
How you get this working, please?