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.

Quick Links

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

Installation

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.

loaders: ['awesome-typescript-loader', 'angular1-templateurl-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 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.

Example Usage

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

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

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

After (before it is bundled into your webpack'd application)

angular.module("my-module").component("my-component", {
  template: require('/myComponent.html" ,
  controller: "MyController"
});

How does it work

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.

Common Issues

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