Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
1.7k views
in Technique[技术] by (71.8m points)

angularjs - Critical dependencies - the request of a dependency is an expression Webpack

I am using a service in my angular application to create uibModal as follows

function modal(modalConfig){
                  var modalInstance = $uibModal.open({
                  animation: true,
                  template: require("../a/b/xyz.html"),
                  controller: modalConfig.controller,
                  size: modalConfig.size,
                  controllerAs: modalConfig.controllerAs,
                  bindToController : true,
                  resolve: modalConfig.resolveObj

                });
            }

Please note the line

 template: require("../a/b/xyz.html"),

I want to use a variable in its place like this

 template: require(modalConfig.templateUrl),

but when i use a variable in place of hard coded value webpack gives me

Critical dependencies:
83:22-54 the request of a dependency is an expression

I am not able to resolve this error. What can be the possible reason for it?

I have used node-express server for continuous webpack builds. I have looked at other answers too but they didn't solve my query.

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

After much hit and trial found the solution.What i did is this:

template: require("../../scripts" + modalConfig.templateUrl + ".html")

Assumptions

  1. root folder under which all the file comes is scripts
  2. and the relative path of this folder from the file in which the function is written is say ../../scripts.
  3. ../../scripts + modalConfig.templateUrl + ".html" will form the correct path for the file to be used.

Mandatory Note

  1. Always write some hardcoded path of root folder. Don't put it in variable. so this won't work

    var context = "../../scripts" ; template: require(context + modalConfig.templateUrl + ".html")

The base path (as in a part of the actual path) has to be hardcoded for basic reference, as in it helps webpack to create a list of all the modules which might be needed for the dynamic requires.

Reason (from webpack docs) , read dynamic requires.


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...