How to use with Webpack?

[DaveOdden]

I've installed this package via npm, added the variants of require statements I've seen in the issues, and added the module within my angular modules dependency list. Is that it? I get a console error that the package cannot be found. It looks like I should just have to include angular-highlightjs dependency and it'll pull in highlight.js. I may be missing something, but it'd be nice to have concise documentation for the various methods of pulling in dependencies. I am also not a Webpack expert, so that could be it too.

Thanks

[pc035860]

I haven't tried it with Webpack myself. But I think it would work by following the browserify example.

https://github.com/pc035860/angular-highlightjs/blob/master/with-browserify/scripts/app.js

var angular = require('angular');

angular
.module('exampleApp', [
  require('../../angular-highlightjs')
])
.controller('MainCtrl', require('./main-ctrl'));

Since the UMD version of angular-highlightjs actually returns just a module name string, this can be rewritten like this.

// in ES6, untested
import angular from 'angular';
import hljsModule from 'angular-highlightjs';

angular
.module('exampleApp', [hljsModule])
.controller('MainCtrl', require('./main-ctrl'));

If you're still having issues, let me know.

[zedtux]

I tried your solution @pc035860 but it fails like that:

webpack_1    | ERROR in ./node_modules/angular-highlightjs/build/angular-highlightjs.js
webpack_1    | Module not found: Error: Can't resolve 'hljs' in '/application/node_modules/angular-highlightjs/build'

Do you have any idea what I shall do in order to fix that?

[zedtux]

I got it working but I had to disable AMD using the Webpack import-loader:

environment.loaders.append('angular-highlightjs', {
  test: require.resolve('angular-highlightjs'),
  loader: 'imports-loader?define=>false'
})