Chain-to loader for webpack that inlines all html and style's in angular components.
Install the webpack loader fromnpm.
npm install angular2-template-loader --save-dev
Chain theangular2-template-loaderto your currently used typescript loader.
loaders:['awesome-typescript-loader','angular2-template-loader'],To be able to use the template loader you must have a loader registered, which can handle.htmland.cssfiles.
The most recommended loader is
raw-loader
This loader allows you to decouple templates from the component file and maintain AoT compilation. This is particularly useful when building complex components that have large templates.
Here is an example markup of thewebpack.config.js,which chains theangular2-template-loaderto thetsloader
module:{
loaders:[
{
test:/\.ts$/,
loaders:['awesome-typescript-loader','angular2-template-loader?keepUrl=true'],
exclude:[/\.(spec|e2e)\.ts$/]
},
/* Embed files. */
{
test:/\.(html|css)$/,
loader:'raw-loader',
exclude:/\.async\.(html|css)$/
},
/* Async loading. */
{
test:/\.async\.(html|css)$/,
loaders:['file?name=[name].[hash].[ext]','extract']
}
]
}@Component({
selector:'awesome-button',
template:'button.template.html',
styles:['button.style.css']
})
exportclassAwesomeButtonComponent{}@Component({
selector:'awesome-button',
template:require('./button.template.html'),
styles:[require('./button.style.css')]
})
exportclassAwesomeButtonComponent{}Theangular2-template-loadersearches fortemplateUrlandstyleUrlsdeclarations inside of the Angular 2 Component metadata and replaces the paths with the correspondingrequirestatement.
IfkeepUrl=trueis added to the loader's query string,templateUrlandstyleUrlswill not be replaced bytemplateandstylerespectively so you can use a loader likefile-loader.
The generatedrequirestatements will be handled by the given loader for.htmland.jsfiles.
In some cases the webpack compilation will fail due to unknownrequirestatements in the source.
This is caused by theway the template loader works.
The Typescript transpiler doesn't have any typings for the
requiremethod, which was generated by the loader.
We recommend the installation of type defintions, which contain a declaration of therequiremethod.