Repository files navigation

Chain-to loader for webpack that inlines all html and style's in angular components.

• Installation
• Requirements
• Example usage
• How does it work
• Common Issues

Install the webpack loader fromnpm.

• npm install angular2-template-loader --save-dev

Chain theangular2-template-loader to 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.html and.css files.

The most recommended loader israw-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-loader to 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-loader searches fortemplateUrl andstyleUrls declarations inside of the Angular 2 Component metadata and replaces the paths with the correspondingrequire statement.IfkeepUrl=true is added to the loader's query string,templateUrl andstyleUrls will not be replaced bytemplate andstyle respectively so you can use a loader likefile-loader.

The generatedrequire statements will be handled by the given loader for.html and.js files.

In some cases the webpack compilation will fail due to unknownrequire statements in the source.
This is caused by theway the template loader works.

The Typescript transpiler doesn't have any typings for therequire method, which was generated by the loader.

We recommend the installation of type defintions, which contain a declaration of therequire method.

• @types/node |dt~node
• @types/requirejs |dt~requirejs