angular2-template-loader

What is angular2-template-loader?

The angular2-template-loader is a Webpack loader that inlines HTML and styles in Angular components. It is used to preprocess Angular component templates and styles, making it easier to work with Angular applications in a Webpack build process.

What are angular2-template-loader's main functionalities?

Inline HTML Templates

This feature allows you to inline HTML templates in Angular components. By using angular2-template-loader in the Webpack configuration, it processes TypeScript files to replace template URLs with the actual HTML content, making the component self-contained.

module.exports = {
  module: {
    rules: [
      {
        test: /\.ts$/,
        use: [
          'ts-loader',
          'angular2-template-loader'
        ]
      }
    ]
  }
};

Inline Styles

This feature inlines styles in Angular components. Similar to HTML templates, it processes the style URLs in TypeScript files and replaces them with the actual CSS content, allowing for easier component management.

module.exports = {
  module: {
    rules: [
      {
        test: /\.ts$/,
        use: [
          'ts-loader',
          'angular2-template-loader'
        ]
      }
    ]
  }
};

Other packages similar to angular2-template-loader

angular2-router-loader

The angular2-router-loader is a Webpack loader that allows for lazy loading of Angular routes. While it focuses on a different aspect of Angular applications compared to angular2-template-loader, it complements the build process by optimizing route loading, which can be used alongside angular2-template-loader for a more efficient build setup.

README

angular2-template-loader

Chain-to loader for webpack that inlines all html and style's in angular2 components.

Quick Links

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

Installation

Install the webpack loader from npm.

• npm install angular2-template-loader --save-dev

Chain the angular2-template-loader to your currently used typescript loader.

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

This loader allows you to decouple templates from the component file and maintain AoT compilation. 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 angular2-template-loader to the tsloader

module: {
  loaders: [
    {
      test: /\.ts$/,
      loaders: ['awesome-typescript-loader', 'angular2-template-loader?keepUrl=true'],
      exclude: [/\.(spec|e2e)\.ts$/]
    },
    /* Embed files. */
    { 
      test: /\.(html|css)$/, 
      loader: 'raw-loader',
      exclude: /\.async\.(html|css)$/
    },
    /* Async loading. */
    {
      test: /\.async\.(html|css)$/, 
      loaders: ['file?name=[name].[hash].[ext]', 'extract']
    }
  ]
}

Angular

@Component({
  selector: 'awesome-button',
  template: require('./button.template.html'),
  styles: [require('./button.style.css')]
})
export class AwesomeButtonComponent { }

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. If keepUrl=true is added to the loader's query string, templateUrl and styleUrls will not be replaced by template and style respectively so you can use a loader like file-loader.

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