angular2-template-loader

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


$3

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

$3

Install the webpack loader from npm.
- npm install angular2-template-loader --save-dev

Chain the angular2-template-loader to your currently used typescript loader.

``js
loaders: ['awesome-typescript-loader', 'angular2-template-loader'],
`

$3


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 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.

$3

#### Webpack
Here is an example markup of the webpack.config.js, which chains the angular2-template-loader to the tsloader

`js
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']
}
]
}
`

#### Before
`js
@Component({
selector: 'awesome-button',
template: 'button.template.html',
styles: ['button.style.css']
})
export class AwesomeButtonComponent { }
`

#### After (before it is bundled into your webpack'd application)
`js
@Component({
selector: 'awesome-button',
template: require('./button.template.html'),
styles: [require('./button.style.css')]
})
export class AwesomeButtonComponent { }
`

$3


The angular2-template-loader searches for templateUrl and styleUrls declarations inside of the Angular 2 Component metadata and replaces the paths with the corresponding require statement.
If keepUrl=true is added to the loader's query string, templateUrl and styleUrls will not be replaced by template and style respectively so you can use a loader like file-loader.

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

$3


In some cases the webpack compilation will fail due to unknown require statements in the source.

This is caused by the way the template loader works.

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

We recommend the installation of type defintions, which contain a declaration of the require` method.
- @types/node | dt~node
- @types/requirejs | dt~requirejs