ShaneH ShaneH -4 years ago 302
AngularJS Question

Using a text loader in Webpack for RequireJS text plugin

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" }


Answer Source

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?

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download