angular1-template-loader/README.md

Backport of the Angulars webpack loader that inlines your angular templates into angular components.

# angular1-template-loader
Chain-to loader for webpack that inlines all html in angular 1 components. 

This is a backport of the [angular2-template-loader](https://github.com/TheLarkInn/angular2-template-loader)

### 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/angular1-template-loader).
- `npm install angular1-template-loader --save-dev`

Chain the `angular1-template-loader` to your currently used typescript loader.

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

### Requirements
To be able to use the template loader you must have a loader registered, which can handle `.html` files.
> The most recommended loader is [`ngtemplate-loader`](https://github.com/wearymonkey/ngtemplate-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)
- [@types/requirejs](https://www.npmjs.com/package/@types/requirejs)


### Example Markup
Here is an example markup of the `webpack.config.js`, which chains the `angular1-template-loader` to the `tsloader`

```js
module: {
  rules: [
    {
      test: /\.ts$/,
      loaders: ['awesome-typescript-loader', 'angular1-template-loader'],
      exclude: [/\.(spec|e2e)\.ts$/]
    },
    { 
      test: /\.html$/, 
      loaders: ['ngtemplate?relativeTo=/src/', 'html']
    }
  ]
}
```

### Awesome Typescript Loader
When using `awesome-typescript-loader` to load your typescript files you have to set the `useWebpackText` property to `true`.
Otherwise the `angular1-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 `angular1-template-loader` searches for `templateUrl`  declarations inside of the Angular 1 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.