Why doesn't the webpack plugin for html templat injection work?

Question

JavaScript

Good day everyone! Faced the following problem, there is a code:

import template from './app.html';

let app = angular.module('app', []);

app.component('app', {

    templateUrl: 'template',
    controller: ['$http',App],
    controllerAs: '$app'
});

As you can see, I'm trying to implement automatic template insertion so that I don't copy it manually every time. I'm trying to do this with 2 loaders: ng-cache-loader
and ngtemplate-loader . But they all give me various errors: ng-cache-loader complains about:

ERROR in Cannot find module './node_modules/ng-cache-loader/index.js'
 @ ./src/app.js 7:11-32
ERROR in   ReferenceError: window is not defined

Here is his config:

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

ngtemplate-loader with this config:

test: /\.html$/,
loader: 'ngtemplate?relativeTo=' + (path.resolve(__dirname, './app')) + '/!html'

Throws the following error:

ERROR in   Error: Child compilation failed:
  Entry module not found: Error: Cannot resolve module 'html' in D:\Proj\AllProjects\Unicorn_Test_Angular:
  Error: Cannot resolve module 'html' in D:\Proj\AllProjects\Unicorn_Test_Angular

I would be very grateful if you tell me the solution to the problem, or indicate another way.

Answer 1

Why not just use html-loader?

{
test: /\.html$/,
 loader: "html"
}

template: require('./page.template.html')