angularjs-template-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 angularjs-template-loader --save-dev

Option 2: Install from yarn.
- yarn add angularjs-template-loader --dev

Chain the angularjs-template-loader to your currently used TypeScript loader.

``js
loaders: ['awesome-typescript-loader', 'angularjs-template-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 angularjs-template-loader to the awesome-typescript-loader

`js
module: {
rules: [
{
test: /\.ts$/,
use: [
{
loader: 'awesome-typescript-loader'
},
{
loader: 'angularjs-template-loader',
options: {
relativeTo: path.resolve(__dirname, 'app/src'
}
}
]
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('/root/some/path/app/src/myComponent.html" ,
controller: "MyController"
});
`

$3


The angularjs-template-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