ngCache with Webpack, ES6 not outputting template html, parse error

320 views Asked by At

I am attempting to us ng-cache in order to pull in my templates in an angular project written in ES6 and using webpack.

I have the following files:

dashboard.config.js:

require('ng-cache!./index.html');
require('ng-cache!./nav-sidebar.html');

export default function DashboardConfig($stateProvider) {
  'ngInject';

  // Define the routes
  $stateProvider
    .state('dashboard', {
      url: '/dashboard',
      controller: 'DashboardController as $ctrl',
      templateUrl: 'index.html'
    });

}

This generates the following error when running webpack:

Error: Parse Error: <div class=\"clearfix\"></div>\r\n\r\n<div flex layout=\"row\" class=\"dashboard\">\r\n\r\n    Dashboard!\r\n    <ng-include src=\"'nav-sidebar.html'\"></ng-include>\r\n\r\n    <!-- Container #3 -->\r\n\r\n\r\n    <!-- Container #4 -->\r\n    <md-content id=\"dashboard-content\" ui-view=\"\" class=\"md-padding\" layout=\"column\"></md-content>\r\n    \r\n    <!--<md-content flex id=\"content\"></md-content>-->\r\n\r\n</div>"
Using unminified HTML

And produces the following output in the browser when visiting "/dashboard":

module.exports = "
\r\n\r\n
\r\n\r\n Dashboard!\r\n \r\n\r\n \r\n\r\n\r\n \r\n
\r\n \r\n \r\n\r\n
"

Now there are a couple of odd things happening here. Why is it trying to parse the HTML? Getting rid of the directives get ride of the parsing error, but I still have the issue of seeing module.export="..." for my output instead of seeing the template.

Here is the contents of index.html

<div class="clearfix"></div>

<div flex layout="row" class="dashboard">

    Dashboard!
    <ng-include src="'nav-sidebar.html'"></ng-include>

    <md-content id="dashboard-content" ui-view="" class="md-padding" layout="column"></md-content>

</div>
1

There are 1 answers

1
Maverik Minett On BEST ANSWER

The issue is that I had the raw html loader specified in my webpack.config.js file. I had that specifying the loader in the call to require() would over-ride any settings I had specified in the webpack file and this is not the case. Fixing this also removed the parsing error warnings.