angular 个组件中的条件模板或模板 url

Question

假设我有以下组件。使用 webpack 将其捆绑在一起。模板是必需的，因此它是内联的。

@Component({
    selector: 'date-picker',
    template: require('./date-picker.html'),
})

然而，这意味着更改标记非常乏味，因为我必须经历捆绑过程，这在我的机器上最多需要 5-10 秒。我想要的是在生产构建中保留对模板的要求，但在开发过程中有一个模板 url 这样我就可以更改标记而无需捆绑。但是当创建生产包时，所有模板都内联到包中。

有没有办法做到这一点？最好的方法是创建我自己的 webpack 插件吗？已经不存在了吗？

此致莫腾

Answer 1

我最终为 Webpack 创建了自己的加载器，它使用正则表达式搜索和替换 template: require('.some.html') 与指向文件在同一个文件夹中。适用于 mac 和 windows。唯一的要求是 typescript 文件和 html 文件需要位于同一个文件夹中。然后，这将仅应用于您不想在每次更改标记文件时运行 webpack 的开发构建。对于 prod，require 仍然会在 bundle 中内联模板。

我的加载程序的内容最终看起来像下面的代码。连接为 webpack 加载器。Documentation for loaders in webpack

/*
This loader can replace template: require to templateUrls for angular components as long as they live inside the 
same folder as the component itself. This is in particular very useful for development builds to avoid having to 
run webpack everytime you change an html file.
*/

module.exports = function(source) {

//If there's no match, we're not processing a Component file.
var groups = source.match(`template: require\('.*.html.*'\)`);
if (groups == null)
{
    return source;
}


var resourcePath = this.resourcePath;
var regex = new RegExp(/\//g);

//To support OSX and win paths we replace / which is part of OSX paths to process the same way.
resourcePath = resourcePath.replace(regex,'\');

//Find a relative path to the resource relative to the apps folder.
var relativePathForAppsFolder = resourcePath.substr(resourcePath.indexOf('\app\'))
relativePathForAppsFolder = relativePathForAppsFolder.replace(/\/g,'/');

//Get the path without the filename to support html files and js files not sharing the same name minus the extension.
var pathWithoutFolder = relativePathForAppsFolder.substr(0, relativePathForAppsFolder.lastIndexOf('/'))


//To support having different names on the file and ts file we take the content of the group in our regex which would be the html file name.
var matchedString = groups[0].split('\''); 
var value = matchedString[1];  
value = value.replace('./','');
var combined = pathWithoutFolder + '/' + value;

//now we're changing to template url for dev builds instead of inline inside webpack bundle.
source = source.replace(/template: require\('.*.html.*'\)/,'templateUrl: \'' + combined + '\'')
return source;
}

angular 个组件中的条件模板或模板 url

conditional template or template url in angular components

require

webpack

angular