Error: Cannot find module 'ng'.

[ppetermann]

Good day!

I'm new to this webpack stuff, so there might just be something that I'm missing.

what i do have in my config is:

{
    test: /\.html$/,
    loader: "ng-cache?prefix=[dir]/[dir]"
}

i've tried both:

require('./pages/page1/page1.html');

and

require('ng-cache!./pages/page1/page1.html');

in both cases the javascript created by webpack then contains the line:

    __webpack_require__(14)(["ng"]).run(["$templateCache",function(c){c.put("pages/page1/page1.html", v1)}]);

and this line causes a problem, where it sais Error: Cannot find module 'ng'.

what am i missing?

[teux]

ng-cache-loader produces this code: angular.module(["ng"]).run(["$templateCache",function(c){c.put("pages/page1/page1.html", v1)}]);

In your case angular.module is replaced by __webpack_require__(14). This is not the result of the ng-cache-loader but some subsequent loaders or core webpack. What is 14 module? Why was replaced?

[ppetermann]

i don't know 100%, but it seems that the numbers match the files that webpack is loading through requires, and that webpack_require replaces the call to such require (instead using the function with that number that was created in the created js) - which seems to me the way webpack is working

[ppetermann]

in this specific case this seems to be something angular-webpack-plugin is doing

[ppetermann]

As you can see i have put in a fix in my fork, however, that fix breaks your tests, as it seems to me that webpack is unable to resolve a module named "angular", which might be related to your tests not using/including angular at all?!

Angular is not a dependency, angular is not required anywhere, and whats the most confusing to me, the results of your test wouldn't run when integrated to a website, as they assume angular being available from outside of webpack?

what am I missing?

[teux]

Angular must be global namespace for various modules as ngAnimate, ngMock, and so on. And I'm not sure that angular exposes itself through CommonJS interface. Therefore, there is no need to put angular in require. I do not see your configuration entirely and can not imagine what happening. Perhaps, your guess about angular-webpack-plugin is correct. Most likely, something breaks after ng-cache-loader. My typical usage like this work fine:

$stateProvider
            .state('news', {
                url: '/news',
                template: require('./news.html')
            })

or

require('./states/news/news.html');
$stateProvider
            .state('news', {
                url: '/news',
                templateUrl: 'states/news/news.html'
            })

[ppetermann]

https://github.com/stackfull/angular-webpack-plugin basically this plugin can take care of that having ngAnimate and co have what they need, so you can make use of webpack for your angular needs as well.

All thats needed to do is to set aliases in webpacks config as the module names don't match the filenames, for example 'ngAnimate': 'angular-animate/angular-animate.js'.

basically it replaces calls to angular.module, so webpack is used to resolve those (also wrapping those modules in commonjs modules) - and thats where it is breaking, as you generate such a call in a way it can't deal with.

[samhunta]

For angular-webpack-plugin usage, I had to use window.angular.module, rather than angular.module, or require('angular').module which results in a warning to the console that angular was loaded twice.

https://github.com/x6media/ng-cache-loader

Should I submit a formal pull request?

[teux]

Yes of course