angular1-template-loader

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

Quick Links

• Installation
• Requirements
• Example markup
• Awesome Typescript Loader
• How does it work

Installation

Install the webpack loader from npm.

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

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

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

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
• @types/requirejs

Example Markup

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

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)

{
  "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.