1

So my AngularJS code looks like this:

define(['angular', 'text!./template.html'], function (angular, template) {
'use strict';

return angular.module('app.widget', [])
    .directive('MyWidget', function(){
         //.... use the template here
})

I'm using the text plugin for RequireJS to get the html template and use in in the AngularJS directive. I want to use webpack and it's reading the AMD style code ok but it can't work with the text plugin.

Does anyone know how to get the text-loader for webpack to work with requirejs? There are some solutions out there and a discussion thread but I can't get them to work.

In my webpack.config.js I've got

loaders: [
  { test: /^text\!/, loader: "text" }
]

Thanks

Community
  • 1
  • 1
ShaneH
  • 385
  • 3
  • 17

3 Answers3

4

Actually you need dont need to specify node modules path. It works if you specify just the name of the actual loader like below

resolveLoader: {
        alias: { "text": "text-loader" }
    },
kongaraju
  • 9,344
  • 11
  • 55
  • 78
1

You need to install raw-loader, which is the webpack equivalent for loading raw files

npm i raw-loader

Then you need to alias the requireJS style with the raw-loader (resolveLoader is to be put in the root of the webpack config object)

resolveLoader: {
    alias: {
        'text': {
                test: /\.html$/,
                loader: "raw-loader"
            },
    }
}

Check this SO question: Webpack loader aliases?

Community
  • 1
  • 1
Tudor Ilisoi
  • 2,934
  • 23
  • 25
0

A similar solution which worked for me with Webpack 2.2:

resolveLoader: {
    alias: {
        // Support for require('text!file.json').
        'text': 'full/path/to/node_modules/text-loader'
    }
}

And install text-loader:

npm install text-loader
chris
  • 1,638
  • 2
  • 15
  • 17