You've already forked angular2-template-loader
mirror of
https://github.com/encounter/angular2-template-loader.git
synced 2026-03-30 10:57:24 -07:00
Paul Gschwendtner
f6c04d2c16
* docs(readme): improve project description * docs(readme): mention possible errors due missing typescript definition References #9
79 lines
3.1 KiB
Markdown
79 lines
3.1 KiB
Markdown
# angular2-template-loader
|
|
Chain-to loader for webpack that inlines all html and style's in angular2 components.
|
|
|
|
[](https://travis-ci.org/TheLarkInn/angular2-template-loader)
|
|
[](https://codecov.io/gh/TheLarkInn/angular2-template-loader)
|
|
[](https://twitter.com/SwiftOnSecurity)
|
|
|
|
### Quick Links
|
|
- [Installation](#installation)
|
|
- [Requirements](#requirements)
|
|
- [Example markup](#example-markup)
|
|
- [Awesome Typescript Loader](#awesome-typescript-loader)
|
|
- [How does it work](#how-does-it-work)
|
|
|
|
### Installation
|
|
Install the webpack loader from [npm](https://www.npmjs.com/package/angular2-template-loader).
|
|
- `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'],
|
|
```
|
|
|
|
### Requirements
|
|
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`](https://github.com/webpack/raw-loader)
|
|
|
|
In some cases the webpack compilation will fail due to unknown `require` statements in the source.<br/>
|
|
This is caused by the [way the template loader works](#how-does-it-work).
|
|
|
|
> 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](https://www.npmjs.com/package/@types/node) | [dt~node](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/node/node.d.ts)
|
|
- [@types/requirejs](https://www.npmjs.com/package/@types/requirejs) | [dt~requirejs](https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/requirejs)
|
|
|
|
|
|
### Example Markup
|
|
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'],
|
|
exclude: [/\.(spec|e2e)\.ts$/]
|
|
},
|
|
{
|
|
test: /\.(html|css)$/,
|
|
loader: 'raw-loader'
|
|
}
|
|
]
|
|
}
|
|
```
|
|
|
|
### Awesome Typescript Loader
|
|
When using `awesome-typescript-loader` to load your typescript files you have to set the `useWebpackText` property to `true`.
|
|
Otherwise the `angular2-template-loader` is not able to chain into it.
|
|
|
|
Here is an example markup (`tsconfig.json`)
|
|
```js
|
|
{
|
|
"compilerOptions": {
|
|
...
|
|
},
|
|
"awesomeTypescriptLoaderOptions": {
|
|
...
|
|
"useWebpackText": true // Allows other loaders to be chained to awesome-typescript-loader.
|
|
},
|
|
}
|
|
```
|
|
|
|
### How does it work
|
|
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.
|
|
|
|
The generated `require` statements will be handled by the given loader for `.html` and `.js` files.
|