angularjs-templateurl-loader

解决 angularJs templateurl 在 webpack 打包的时候丢失或不能加载 template 问题。

此版本是在angular1-template-loader的基础上进行优化的，非常感谢 tmarun

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

Option 2: Install from yarn.

yarn add angularjs-templateurl-loader --dev

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

loaders: ['awesome-typescript-loader', 'angularjs-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 angularjs-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: 'angularjs-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").default ,
  controller: "MyController"
});

How does it work

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