각도 구성 요소의 조건부 템플릿 또는 템플릿 URL

Question

다음 구성 요소가 있다고 가정 해보십시오. webpack을 사용하면 번들로 제공됩니다. 템플리트가 필요하므로 인라인됩니다.

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

이 그러나 내가 걸리는 번들 과정을 거쳐야 가지고 기껏 내 컴퓨터에서 ~ 5~10초을 마크 업을 변경하는 지루한 것을 의미한다. 내가 무엇을 원한다면 프로덕션 빌드에서 템플릿에 대한 요구 사항을 유지하는 것이지만 번들하지 않고도 마크 업을 변경할 수 있도록 개발 중에 템플릿 URL이 있어야합니다. 그러나 프로덕션 번들이 작성되면 모든 템플리트가 번들로 인라인됩니다.

이렇게하는 방법이 있습니까? 가장 좋은 방법은 내 webpack 플러그인을 만드는 것입니까? 그런 존재는 이미 존재하지 않습니까?

안부 모르 텐

Answer 1

내가 검색 및 템플릿을 대체하기 위해 정규식을 사용 웹팩에 대한 내 자신의 로더를 만들어 결국 : ('. some.html')이 필요을에있는 파일을 가리키는 templateUrl로 같은 폴더. Mac 및 Windows 모두에서 작동합니다. 타이프 스크립트 파일과 html 파일이 모두 같은 폴더에 있어야한다는 요구 사항 만 있습니다. 그러면 마크 업 파일을 변경할 때마다 webpack을 실행하지 않으려는 개발 빌드에만 적용됩니다. prod의 경우 require는 여전히 번들의 템플리트를 인라인합니다.

내 로더의 내용이 아래 코드와 같이 보입니다. webpack loader로 연결됩니다. 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; 
}