angular1-templateurl-loader

Webpack loader that inlines all html for AngularJS code that specifies a templateUrl. It is a port of code from angular2-template-loader.


$3

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

$3

Option 1: Install from npm.
- npm install angular1-templateurl-loader --save-dev

Option 2: Install from yarn.
- yarn add angular1-templateurl-loader --dev

Chain the angular1-templateurl-loader to your currently used TypeScript loader.

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

$3


To be able to use the template loader you must have a loader registered, which can handle .html files.
> The most recommended loader is raw-loader

This loader allows you to decouple templates from the component file. 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 angular1-templateurl-loader to the awesome-typescript-loader
Will resolve for the template from the resolve.root, in this case the current directory of the file or in the app's root directory

`js
module: {
resolve: {
root: [__dirname, './'],
extensions: ['', '.ts', '.js', '.json'],
},
rules: [
{
test: /\.ts$/,
use: [
{
loader: 'awesome-typescript-loader'
},
{
loader: 'angular1-templateurl-loader'

}
]
exclude: [/\.(spec|e2e)\.ts$/]
},
{
test: /\.html$/,
use: ['raw-loader']
}
]
}
`

#### Before
`js
angular.module("my-module").component("my-component", {
templateUrl: "./myComponent.html" ,
controller: "MyController"
});
`

#### After (before it is bundled into your webpack'd application)
`js
angular.module("my-module").component("my-component", {
template: require('/myComponent.html" ,
controller: "MyController"
});
`

$3


The angular1-templateurl-loader searches for templateUrl declarations inside of the AngularJS files and replaces the paths with the corresponding require statement.
If relativeTo: '/some/absolute/path' is added to the loader's options, ALL templates will loaded in relation to the specified path instead of the current directory.

The generated require statements will be handled by the given loader for .html 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