Webpack: использование require для ng-include

Я новичок в webpack, и сейчас я использую его впервые в одном из моих проектов angular.

Я хочу использовать функцию require в своем html файле, чтобы потребовать, чтобы шаблон для ng-include был следующим:

<div ng-include="require(./my-template.html)"></div>

Я знаю, что есть загрузчики, такие как ng-cache и ngtemplate, но они не работают так, как мне это нужно. С ними мне нужно сначала создать шаблон в js и использовать имя шаблона в моем html файле.

Как это сделать?

Ответ 1

Вы можете использовать webpack-required-loader для npm.

В вашем приложении js или модуле js добавьте комментарий:

//@require "./**/*.html"

В шаблоне вы можете использовать

<div ng-include="'my-template.html'"></div>

Ngtemplate будет работать нормально. Ng-cache работает тоже.

Также обратите внимание, что нет необходимости в относительном пути в директиве ng-include, потому что об этом заботится, добавляя команду //@require во главе вашего файла ввода.

Наконец, обратите внимание, что вам нужно использовать двойные и одинарные кавычки, чтобы заставить ng-include работать. Таким образом, вы бы сделали "'template-name.html'", а не "template-name.html" или 'template-name.html'.

Как загрузчики конфигурации

Ответ 2

Вы можете использовать загрузчик HTML и angular $templateCache service

angular
    .module('template',[])
    .run(['$templateCache', function($templateCache) {
        var url = 'views/common/navigation.html';
        $templateCache.put(url, require(url));
    }]);

Конфигурация загрузчика webpack:

{
    test: /\.html$/,
    loader: 'html',
    query: {
        root:sourceRoot
    }
}

Ответ 3

Другим подходом было бы преобразование my-template.html в компонент angular: Предполагая, что вы используете html-loader для загрузки ваших HTML файлов (loaders: {test: /\.html/, loader: 'html'}), определите компонент myTemplate в вашем файле JavaScript модуля:

import myTemplate from './my-template.html';
angular.module(...)
  .component('myTemplate', {template: myTemplate})

Затем используйте его:

<my-template></my-template>

Ответ 4

Я уже разместил это на fooobar.com/info/251854/..., но:

Чтобы включить параметр "relativeTo", в противном случае ваши частичные части шаблона загружаются в "/home/username/path/to/project/path/to/template/" (проверьте, что ваш пакет bundle.js вероятно, утечка вашего имени пользователя в ваших проектах)

var ngTemplateLoader = (
    'ngtemplate?relativeTo=' + path.resolve(__dirname, './src/') +
    '!html'
);

module.exports = {
    ...
    module: {
        loaders: [
            {test: /\.html$/, loader: ngTemplateLoader},
        ],
    },
    ...
}

Затем в вашем коде требуется только побочный эффект:

// src/webapp/admin/js/foo.js
require('../../templates/path/to/template.html');

Затем вы можете загрузить html:

<div ng-include src="'/webapp/templates/path/to/template.html'"</div>